Používanie nových možností zmeny veľkosti od Divi nám pomáha nielen vytvárať vysoko responzívne webové stránky, ale tiež nám pomáha vytvárať jedinečné interakcie. Pomocou týchto možností si môžete ľubovoľné prispôsobiť webové stránky vytvárate a prispôsobujete štruktúru svojich stránok na základe aktuálnych trendov dizajnu.
Najmä v tomto tutoriáli vám ukážeme, ako vytvoriť oddiely vznášania pomocou Divi. Vytvoríme novú stránku a povolíme zobrazenie všetkých názvov sekcií, ale každá sekcia sa otvorí iba pri umiestnení kurzora myši (počítač) alebo kliknutí (mobil). Hneď ako otvoríte ďalšiu sekciu, automaticky sa zatvorí aj tá, ktorú ste predtým otvorili. Začneme vysvetlením všeobecného prístupu a pokračujeme opätovným vytvorením príkladu, ktorý vidíte nižšie. Dúfame, že vás tento výukový program povzbudí k vytvoreniu vlastných návrhov sekcií nadjazdu!
Poďme!
prehľad
Predtým, ako sa ponoríte do tutoriálu, pozrime sa rýchlo na výsledok.
Fáza návrhu
Predtým, než sa ponoríme do tutoriálu, zopakujme si techniku použitú na vytváranie sekcií prevrátenia. Túto techniku môžete použiť na akýkoľvek typ webové stránky staviate v akomkoľvek štýle.
1. Pridajte prvú časť na svoju stránku
Predpokladajme, že začnete s novým dizajnom na úplne novej stránke. Prvá vec, ktorú musíte urobiť, je pridať novú pravidelnú sekciu.
2. Pridajte nový riadok vrátane názvu sekcie
Potom môžete pokračovať pridaním nového riadku s textovým modulom s názvom vašej sekcie. Môžete tiež pridať oddeľovací modul a niečo, čo naznačuje, že sa čiara roztiahne pri umiestnení kurzora myši alebo dotyku. Je dôležité oddeliť názov sekcie od zvyšku obsah oddielu. Uistite sa teda, že medzi názvom sekcie a všetkým, čo nasleduje, je dostatok miesta.
3. Upravte zvyšok obsah časti
Dizajnové prvky, ktoré nasledujú po názvoch sekcií, sú úplne na vás. Môžete vytvoriť sekciu tak dlhú alebo krátku, ako chcete, a použiť akýkoľvek štýl dizajnu.
4. Zmeňte predvolené výšky a umiestnite kurzor myši nad časť
Po zdokonalení sekcie a všetkých jej dizajnových prvkov je čas vytvoriť efekt vznášania. Predvolená výška vašej sekcie je navrhnutá tak, aby zodpovedala iba názvu sekcie. Pri umiestnení kurzora myši sa oddiel vráti na pôvodnú veľkosť.
5. Skryť vertikálne pretečenie
Ďalšou dôležitou súčasťou tejto techniky je skrytie vertikálneho prepadu. Po nastavení predvolenej maximálnej výšky sekcie, ktorá je menšia ako pôvodná výška sekcie, sa vytvorí prepad. Aby ste sa uistili, že sa pretečenie nezobrazuje, musíte sa ubezpečiť, že je skryté v nastaveniach viditeľnosti sekcie.
5. Zopakujte kroky pre všetky časti stránky.
Opakujte rovnaké kroky pre všetky sekcie vašej stránky, aby ste vytvorili zrejmú používateľskú skúsenosť, ktorá vám vyhovuje Návštevníci ocení.
Začiatok návrhu!
Pridajte novú sekciu
Predvolená farba pozadia
Teraz, keď sme sa riadili prístupom v tomto príspevku, je čas začať uvádzať veci do praxe! Pridajte bežnú prvú sekciu na svoju úplne novú stránku webové stránky WordPress a otvorte nastavenia sekcie. Zmeňte predvolenú farbu pozadia vašej sekcie na farbu podľa vlastného výberu.
- Farba pozadia: # 000000
Prelet nad farbou pozadia
Zmeňte túto farbu pozadia vznášajúcu sa.
- Farba pozadia: #ffffff
Pridajte riadok 1
Štruktúra stĺpcov
Pokračujte v pridávaní prvého riadku do svojej sekcie pomocou nasledujúcej štruktúry stĺpcov:
Pridajte textový modul
Pridajte obsah H2
Pridajte textový modul na svoj ďalší nový riadok. Keď sa sekcia rozvinie, pridajte kópiu H2 so symbolom „▼“.
Nastavenia textu H2
Prejdite na kartu Návrh modulu a zmeňte nastavenie textu H2.
- Rubrika 2 Písmo: Trebuchet
- Názov 2 Hmotnosť písma: Ultra Bold
- Názov 2 Zarovnanie textu: Vľavo
- Názov 2 Farba textu: #ff0f3b
- Názov textu 2 Veľkosť textu: 100 pixelov (desktop), 80 pixelov (tablet), 60 pixelov (telefón)
- Názov 2 Rozstup písmen: -5px
Pridať modul delenia
viditeľnosť
Druhý a posledný modul, ktorý v tomto riadku potrebujeme, je modul rozdelenia. V nastaveniach viditeľnosti nezabudnite povoliť možnosť „Zobraziť oddeľovač“.
- Zobraziť oddeľovač: Áno
Farba
Potom prejdite na kartu Návrh a zmeňte farbu oddeľovača.
- Farba: #ff0f3b
dimenzovanie
Zmeňte tiež parametre veľkosti modulu.
- Hmotnosť deliča: 2px
- Šírka: 14%
Pridajte riadok 2
Štruktúra stĺpcov
Ďalší riadok! To je miesto, kde budete musieť umiestniť všetky obsah ktoré chcete zobraziť po umiestnení kurzora myši (počítač) alebo kliknutí (tablet a mobil). Používame nasledujúcu štruktúru stĺpcov, ale všimnite si, že môžete pridať toľko riadkov a modulov, koľko chcete, a prispôsobiť ich svojim potrebám:
Pridajte textový stĺpec do stĺpca 1
Pridajte obsah
Vložte textový modul do prvého stĺpca s obsahom podľa vášho výberu.
Nastavenia textu
Prejdite na kartu Dizajn textového modulu a zmeňte orientáciu textu.
- Textová orientácia: Zdôvodnenie
Pridajte textový stĺpec do stĺpca 2
Pridajte obsah
Do druhého stĺpca tiež pridajte textový modul s obsahom podľa vášho výberu.
Nastavenia textu
Opäť zmeňte orientáciu textu v nastaveniach textu modulu.
- Textová orientácia: Zdôvodnenie
Do sekcie pridajte parametre veľkosti
Predvolená veľkosť
Po dokončení sekcie je čas vytvoriť efekt vznášania. Otvorte nastavenia sekcie a zmeňte maximálnu výšku pre rôzne veľkosti obrazovky:
- Maximálna výška: 300px (počítač), 280px (tablet), 260px (telefón)
vznášajúce
Zapnite tiež možnosť umiestnenia kurzora myši na maximálnu výšku a pridajte hodnotu dostatočne veľkú na to, aby pokryla všetky prvky bez ohľadu na veľkosť obrazovky. Táto hodnota zaisťuje, že sa všetky vaše prvky zobrazia bez prekročenia počiatočnej veľkosti kontajnera sekcie.
- Maximálna výška: 5000px
Vertikálny prepad
Potom v časti prejdite na kartu Rozšírené a zmeňte vertikálny prepad. To skryje všetok obsah, ktorý presahuje kontajner sekcie.
- Vertikálny prepad: skrytý
prechody
Aby sme vytvorili plynulý prechod, zmeníme tiež nastavenie prechodu na karte Rozšírené.
- Trvanie prechodu: 800ms
- Čas prechodu: 500 ms
Klonujte celú sekciu toľkokrát, koľkokrát chcete
Po vytvorení prvej sekcie nadjazdu ju môžete naklonovať toľkokrát, koľkokrát chcete.
Zmeniť názvy sekcií
Samozrejme budete chcieť zmeniť duplicitné názvy sekcií.
Zmeňte farby textu H2
Aby sme vytvorili variácie v dizajne, zmeníme aj farby textu modulov zvýraznených na tlačovej obrazovke nižšie.
- Názov 2 Farba textu: #c4c4c4
Zmeňte farby oddeľovača
S oddeľovacími farbami, ktoré sprevádzajú textové moduly.
- Farba: #c4c4c4
prehľad
Po dokončení všetkých krokov sa pozrime na výsledok.
záverečné myšlienky
V tomto článku sme si ukázali, ako kreatívne využiť nové premiestniteľné možnosti zmeny veľkosti Divi na vytvorenie jedinečných interakcií pomocou sekcií kurzora myši na ľubovoľnej webovej stránke, ktorú vytvoríte. Začali sme vysvetlením prístupu a pokračujeme opätovným vytvorením príkladu dizajnu od nuly. Môžete si tiež zadarmo stiahnuť súbor JSON! Ak máte akékoľvek otázky alebo návrhy, nezabudnite zanechať komentár v sekcii komentárov nižšie.
