Chceli by ste vytvoriť mriežku s divi byť tekutý na vznášaní?
Ak máte radi vytváranie webových stránok s ohľadom na interakciu používateľa, tento návod sa vám bude páčiť.
Dnes vám ukážeme, ako vytvoriť priehľadnú mriežku, ktorej obrázok na pozadí sa odhalí hneď, ako niekto prejde na jeden z prvkov. Dizajn je spočiatku jednoduchý a čistý. Výsledkom je príjemný zážitok zo vznášania.
V tomto návode vás krok za krokom prevedieme procesom vytvárania.
Poďme.
prehľad
Predtým, ako sa ponoríme do tutoriálu, pozrime sa rýchlo na výsledok na rôznych veľkostiach obrazovky.
kancelária
Mobilné
Začnime proces tvorby v Divi
Pridať novú sekciu
Farba pozadia
Pridajte novú sekciu na stránku, na ktorej pracujete.
Pozri tiež: Divi: Ako vytvoriť vlastnú pätu
Najprv otvorte nastavenia sekcie a použite bielu farbu pozadia.
- Pozadie: #ffffff
Pridajte riadok #1
Štruktúra stĺpca
Pokračujte pridaním nového riadka s použitím nasledujúcej štruktúry stĺpcov:
dimenzovanie
Zatiaľ bez pridania modulov, otvorte nastavenia linky, prejdite na kartu dizajn, potiahnite možnosť nadol Dimenzovanie a upravte parametre veľkosti takto:
- Použiť vlastnú šírku odkvapu: ÁNO
- Žľab s: 1
- Šírka: 100 %
- Maximálna šírka: 100 %
vzdialenosť
Potom vyberte možnosť riadkovanie a zmeňte nasledujúce nastavenia:
- Výplň (horná a dolná časť): 0 pixelov
hraničné
Vo voľbe Ohraničenie vykonajte aj nasledujúce zmeny:
- Štýly orámovania (hore a dole): 1 pixel
- Farba orámovania (hore a dole): #d3d3d3
Nastavenia stĺpca 1
Umiestnite kurzor myši na pozadie
Ďalej si prispôsobme nastavenia pre stĺpec 1. Použiť prechod na pozadie.
- Farba 1: rgba (255,255,255,0)
- Farba 2: #000000
- Typ gradientu: Lineárny
- Farba pozície 1: 30 %
- Umiestniť prechod nad obrázok s prechodom: ÁNO
Obrázok na pozadí pri umiestnení kurzora myši
Nahrajte aj obrázok na pozadí, ktorý sa zobrazí po umiestnení kurzora myši.
- Veľkosť obrázka na pozadí: obálka
- Pozícia obrázka na pozadí: Stred
Triedu CSS
A dokončite nastavenia stĺpcov priradením nasledujúcej triedy CSS na karte pokročilý :
- CSS Trieda: hover-stĺpec
Pridajte modul Text #1 do stĺpca 1
Pridať text veľkosti H3 (nadpis 3)
Je čas pridať moduly, počnúc prvým textovým modulom v stĺpci 1. Vložte text podľa vlastného výberu.
Nastavenia textu H3
Potom prejdite na kartu dizajn modulu a upravte textové parametre H3 takto:
- Písmo: Oswald
- Hmotnosť písma Hmotnosť písma: ultra ľahké
- Nadpis 3 Štýl písma: TT
- Farba textu: #0a0a0a
- Veľkosť textu nadpisu 3:
- Desktop: 3vw
- Tablet: 7VW
- Telefón: 14VW
- Nadpis 3 Medzera medzi písmenami: -2px
dimenzovanie
Zmeňte šírku na rôznych veľkostiach obrazovky v nastaveniach veľkosti.
- Šírka:
- Počítač: 44 %
- Tablety: 48 %
- Telefón: 50 %
vzdialenosť
Zmeňme aj nasledujúce parametre vo voľbe riadkovanie.
- Marža (dole): 25vh
- Polstrovanie (hore a dole): 5 %
- Výplň (vľavo a vpravo): 4 %
hraničné
Ďalej pridáme okraje vpravo a nižšie.
- Šírka okraja (vpravo a dole): 1 pixel
- Farba orámovania (vpravo a dole): #d3d3d3
Triedu CSS
A tiež dokončíme nastavenia modulu priradením nasledujúcej triedy CSS modulu Text:
- CSS Trieda: hover-title
Pridajte modul Text #2 do stĺpca 1
Pridajte obsah
Pridajte ďalší textový modul tesne pod predchádzajúci modul s obsah popis podľa vlastného výberu.
Nastavenia textu
Prepnúť na kartu dizajn modulu a podľa toho upravte textové parametre:
- Písmo textu: Karla
- Farba textu: #ffffff
- Rozmer:
- Desktop: 0,8 vw
- Tablet: 2VW
- Telefón: 3.6VW
- Výška riadku: 2,2 em
vzdialenosť
Použiť aj vlastné hodnoty okrajov.
- Polstrovanie (dole): 10 %
- Výplň (vľavo a vpravo): 9 %
Triedu CSS
A doplňte parametre modulu pomocou nasledujúcej triedy CSS pre modul:
- CSS Trieda: hover-text
Pridajte modul „Tlačidlo“ do stĺpca 1
Pridať popis
Ďalší a posledný modul, ktorý potrebujeme, je modul gombík. Zadajte popis podľa vlastného výberu.
Nastavenia tlačidiel
Upravte parametre modulu nasledovne:
- Použiť vlastné štýly pre tlačidlo: ÁNO
- Veľkosť textu tlačidla:
- Desktop: 1vw
- Tablet: 2,5 vw
- Telefón: 4VW
- Šírka okraja tlačidla: 0px
- Polomer okraja: 0px
- Písmo tlačidla: Karla
- Zobraziť ikonu tlačidla: ÁNO
- Umiestnenie ikony tlačidla: Vpravo
- Zobraziť iba ikonu pre tlačidlo: NIE
vzdialenosť
Pridajte tiež vlastné hodnoty medzery.
- Marža (dole): 8 %
- Okraj (ľavý a pravý): 9 %
- Polstrovanie (dole): 5 %
- Výplň (vpravo): 20 %
krabicový tieň
Ďalej naneste tieň boxu.
- Horizontálna poloha tieňa rámčeka: 0px
- Vertikálna poloha tieňa rámčeka: 2px
- Farba tieňa: #000000
Triedu CSS
A dokončite nastavenia modulu priradením nasledujúcej triedy CSS k tlačidlu:
- CSS Trieda: tlačidlo vznášania
Znovu použite stĺpec 1
Odstráňte stĺpce 2, 3 a 4
Teraz, keď sme vytvorili prvý stĺpec, môžeme ho znova použiť. Prvá vec, ktorú urobíme, je odstránenie prázdnych stĺpcov z nášho riadku.
Klonujte stĺpec 1 trikrát
Stĺpec 1 znova použijeme jeho trojnásobným klonovaním.
Zmeňte obrázky na pozadí umiestnením kurzora myši na duplicitné stĺpce
Potom zmeňte duplicitné obrázky pozadia stĺpcov v každom duplicitnom stĺpci.
Upravte duplicitný obsah
Zmeňte tiež obsah modulu v každom duplicitnom stĺpci.
Jedinečné okraje stĺpcov
Stĺpec 1
Budeme musieť použiť jedinečné nastavenia okrajov pre každý stĺpec, počnúc stĺpcom 1.
- Šírka okraja (vpravo):
- Desktop: 1px
- Tablet: 1 pixelov
- Telefón: 0px
- Farba (vpravo): #d3d3d3
- Šírka okraja (dole):
- Desktop: 0px
- Tablet: 1 pixelov
- Telefón: 1px
- Farba orámovania (dole): #d3d3d3
Stĺpec 2
Ďalej máme stĺpec 2.
Šírka okraja (vpravo):
- Desktop: 1px
- Tablet: 1 pixelov
- Telefón: 0px
Farba (vpravo): #d3d3d3Šírka okraja (dole):
- Desktop: 0px
- Tablet: 1 pixelov
- Telefón: 1px
Farba orámovania (dole): #d3d3d3
Stĺpec 3
A pre stĺpec 3 použijeme nasledujúce nastavenia okrajov:
- Šírka okraja (vpravo):
- Desktop: 1px
- Tablet: 1 pixelov
- Telefón: 0px
- Farba (vpravo): #d3d3d3
- Šírka okraja (dole):
- Desktop: 0px
- Tablet: 1 pixelov
- Telefón: 1px
- Farba orámovania (dole): #d3d3d3
Pridajte vlastný CSS do nastavení stránky
Otvorte nastavenia stránky
Teraz, keď je celý dizajn na svojom mieste, zostáva už len pridať nejaký vlastný kód CSS, ktorý pomôže spustiť efekty vznášania sa na moduly. Ak to chcete urobiť, otvorte nastavenia stránky.
Prečítajte si tiež nášho sprievodcu: Divi: Ako vytvoriť lepiacu pätu s efektom „Odhaliť“.
Pridajte kód CSS
A skopírujte a prilepte nasledujúce riadky 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;
}
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
kancelária
Mobilné
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako vytvoriť krásny dizajn vznášadla.
Konkrétne sme vytvorili mriežku stĺpcov, ktorá začína jednoducho a čisto. Hneď ako bude Návštevníci umiestnite kurzor myši na konkrétnu položku mriežky, zobrazí sa obrázok na pozadí a zmení sa štýl modulu.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
