Chcete vytvořit mřížku s divi být tekutý na visu?
Pokud rádi vytváříte webové stránky s ohledem na interakci uživatele, tento tutoriál si zamilujete.
Dnes vám ukážeme, jak vytvořit průhlednou mřížku, jejíž pozadí se odhalí, jakmile někdo najede na jeden z prvků. Design je zpočátku jednoduchý a čistý. Výsledkem je příjemný zážitek z vznášení.
V tomto tutoriálu vás krok za krokem provedeme procesem tvorby.
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
Kancelář
Mobilní aplikace
Začněme proces tvorby v Divi
Přidat novou sekci
Barva pozadí
Přidejte novou sekci na stránku, na které pracujete.
Viz též: Divi: Jak vytvořit vlastní zápatí
Nejprve otevřete nastavení sekce a použijte bílou barvu pozadí.
- Pozadí: #ffffff
Přidejte řádek #1
Struktura kolony
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů otevřete nastavení linky, přejděte na kartu Design, stáhněte možnost dolů Rozměry a upravte parametry velikosti následovně:
- Použít vlastní šířku okapu: ANO
- Žlab s: 1
- Šířka: 100 %
- Max. šířka: 100 %
vzdálenost
Poté možnost stáhněte dolů Vzdálenost a změňte následující nastavení:
- Výplň (nahoře a dole): 0px
Hranice
V možnosti Ohraničení proveďte také následující změny:
- Styly ohraničení (nahoře a dole): 1 pixel
- Barva ohraničení (nahoře a dole): #d3d3d3
Nastavení sloupce 1
Vznášející se pozadí
Dále upravme nastavení pro sloupec 1. Použijte přechodovou výplň na kurzor.
- Barva 1: rgba (255,255,255,0)
- Barva 2: #000000
- Typ gradientu: Lineární
- Barva pozice 1: 30 %
- Umístění přechodu nad přechodový obrázek: ANO
Obrázek na pozadí při najetí myší
Nahrajte také obrázek na pozadí, který se zobrazí po najetí myší.
- Velikost obrázku na pozadí: obálka
- Pozice obrázku na pozadí: Střed
CSS třídy
A dokončete nastavení sloupce přiřazením následující třídy CSS na kartě pokročilý :
- CSS Třída: hover-column
Přidejte modul Text #1 do sloupce 1
Přidat text velikosti H3 (nadpis 3)
Je čas přidat moduly, počínaje prvním textovým modulem ve sloupci 1. Vložte text podle svého výběru.
Nastavení textu H3
Poté přepněte na kartu Design modulu a upravte textové parametry H3 následovně:
- Písmo: Oswald
- Hmotnost písma Hmotnost písma: ultralehká
- Nadpis 3 Styl písma: TT
- Barva textu: #0a0a0a
- Velikost textu nadpisu 3:
- Desktop: 3vw
- Tablet: 7VW
- Telefon: 14VW
- Nadpis 3 Rozestup písmen: -2px
dimenzování
Změňte šířku na různých velikostech obrazovky v nastavení velikosti.
- Šířka:
- Počítač: 44 %
- Tablety: 48 %
- Telefon: 50 %
vzdálenost
Změňme také následující parametry ve volbě Vzdálenost.
- Marže (dole): 25vh
- Polstrování (nahoře a dole): 5 %
- Polstrování (vlevo a vpravo): 4 %
Hranice
Dále přidáme ohraničení vpravo a níže.
- Šířka okraje (vpravo a dole): 1 pixel
- Barva ohraničení (vpravo a dole): #d3d3d3
CSS třídy
A také dokončíme nastavení modulu přiřazením následující třídy CSS modulu Text:
- CSS Třída: hover-title
Přidejte modul Text #2 do sloupce 1
Přidat obsah
Přidejte další textový modul těsně pod předchozí modul s obsah popis dle vašeho výběru.
Nastavení textu
Přepnout na kartu Design modulu a podle toho upravte parametry textu:
- Písmo textu: Karla
- Barva textu: #ffffff
- Velikost :
- Desktop: 0,8 vw
- Tablet: 2VW
- Telefon: 3.6VW
- Výška řádku: 2,2 em
vzdálenost
Použít také vlastní hodnoty okrajů.
- Polstrování (dole): 10 %
- Polstrování (vlevo a vpravo): 9 %
CSS třídy
A doplňte parametry modulu pomocí následující třídy CSS pro modul:
- CSS Třída: hover-text
Přidejte do sloupce 1 modul „Tlačítko“.
Přidat popis
Dalším a posledním modulem, který potřebujeme, je modul Tlačítko. Zadejte popis dle vlastního výběru.
Nastavení tlačítek
Upravte parametry modulu následovně:
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu tlačítka:
- Desktop: 1vw
- Tablet: 2,5 vw
- Telefon: 4VW
- Šířka okraje tlačítka: 0px
- Poloměr ohraničení: 0px
- Písmo tlačítka: Karla
- Zobrazit ikonu tlačítka: ANO
- Umístění ikony tlačítka: Vpravo
- Zobrazit pouze ikonu nad tlačítkem: NE
vzdálenost
Přidejte také vlastní hodnoty mezer.
- Marže (dole): 8 %
- Marže (levá a pravá): 9 %
- Polstrování (dole): 5 %
- Výplň (vpravo): 20 %
krabicový stín
Dále aplikujte stín boxu.
- Horizontální poloha stínu rámečku: 0px
- Vertikální poloha stínu rámečku: 2px
- Barva stínu: #000000
CSS třídy
A dokončete nastavení modulu přiřazením následující třídy CSS k tlačítku:
- Třída CSS: tlačítko s kurzorem
Znovu použít sloupec 1
Odstraňte sloupce 2, 3 a 4
Nyní, když jsme vytvořili první sloupec, můžeme jej znovu použít. První věc, kterou uděláme, je odstranění prázdných sloupců z našeho řádku.
Klonujte sloupec 1 třikrát
Sloupec 1 znovu použijeme tak, že jej třikrát naklonujeme.
Změňte obrázky na pozadí při umístění kurzoru na duplicitní sloupce
Poté změňte duplicitní obrázky pozadí sloupců v každém duplicitním sloupci.
Upravit duplicitní obsah
Změňte také obsah modulu v každém duplicitním sloupci.
Jedinečné okraje sloupců
Sloupec 1
Budeme muset použít jedinečné nastavení ohraničení pro každý sloupec, počínaje sloupcem 1.
- Šířka okraje (vpravo):
- Plocha: 1px
- Tablet: 1 pixelů
- Telefon: 0px
- Barva (vpravo): #d3d3d3
- Šířka okraje (dole):
- Plocha: 0px
- Tablet: 1 pixelů
- Telefon: 1px
- Barva ohraničení (dole): #d3d3d3
Sloupec 2
Dále máme sloupec 2.
Šířka okraje (vpravo):
- Plocha: 1px
- Tablet: 1 pixelů
- Telefon: 0px
Barva (vpravo): #d3d3d3Šířka okraje (dole):
- Plocha: 0px
- Tablet: 1 pixelů
- Telefon: 1px
Barva ohraničení (dole): #d3d3d3
Sloupec 3
A pro sloupec 3 použijeme následující nastavení ohraničení:
- Šířka okraje (vpravo):
- Plocha: 1px
- Tablet: 1 pixelů
- Telefon: 0px
- Barva (vpravo): #d3d3d3
- Šířka okraje (dole):
- Plocha: 0px
- Tablet: 1 pixelů
- Telefon: 1px
- Barva ohraničení (dole): #d3d3d3
Přidejte vlastní CSS do nastavení stránky
Otevřete nastavení stránky
Nyní, když je celý návrh na svém místě, zbývá pouze přidat nějaký vlastní kód CSS, který pomůže spouštět efekty přechodu na moduly. Chcete-li to provést, otevřete nastavení stránky.
Přečtěte si také našeho průvodce: Divi: Jak vytvořit lepící zápatí s efektem "Odhalit".
Přidejte kód CSS
A zkopírujte a vložte následující řádky kódu CSS:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Kancelář
Mobilní aplikace
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak vytvořit krásný design hoveru.
Konkrétně jsme vytvořili mřížku sloupců, která začíná jednoduše a čistě. Jakmile bude Návštěvníci umístěte kurzor myši na konkrétní položku mřížky, zobrazí se obrázek na pozadí a změní se styly modulu.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
