Vytváranie efektov posúvania pomocou rozdeľovača sekcií je jednoduchá a zábavná technika, ktorá vám môže pridať život webové stránky pomocou WordPress tému Divi. Rozdeľovač sekcií je aj naďalej všestranným dizajnovým prvkom, ktorý je užitočný na dodanie kreativity vašim prechodom obsah stránky.
S rolovacími efektmi Divi sa však rozdeľovače sekcií stanú ešte zaujímavejšími! Trik je v izolácii časti venovanej zvolenému štýlu rozdeľovača. Potom môžete do sekcie pridať všetky druhy pohybov generovaných posúvaním, aby ste vytvorili nádherné efekty posúvania ako pozadie pre obsah str.
Začnime!
Možný výsledok
Tu je prehľad návrhov, ktoré budeme môcť dosiahnuť po absolvovaní tohto tutoriálu.
Ako vytvoriť animované oddeľovače posúvania sekcií pomocou Divi
Vytvorenie dvoch častí obsahu
Pridajte riadok
Ak chcete začať, vytvorte riadok s jedným stĺpcom v predvolenej sekcii.
Rozpätie prierezu (na testy)
Na účely testovania pridajte do časti horný okraj, aby sme mali priestor na rolovanie. Otvorte nastavenia sekcie a pridajte nasledujúce:
- Horný okraj: 80 h
Pridajte textový modul
V riadku stĺpca pridajte nový textový modul.
Obsah textového modulu
Vo vnútri obsah tela, pridajte tento nadpis H2:
<h2>Section Avec Séparateurs</h2>
Návrh textových modulov
Podľa nastavení dizajnu aktualizujte nasledujúce informácie:
- Písmo textu: Roboto
- Zarovnanie textu: stred
- Položka 2 Farba textu: # bae0d8
- Hlavička 2 Veľkosť textu: 80 px (na počítači), 50 pixelov (tablet), 30 pixlov (na telefóne)
Pridajte druhú sekciu obsahu
V predchádzajúcej časti pridajte novú pravidelnú sekciu.
Pridajte riadok
V novej sekcii pridajte riadok do stĺpca.
Pridajte textový modul
Potom do riadku pridajte nový textový modul.
Návrh textových modulov
Predvolený obsah výplne si zatiaľ môžeme nechať v tele. Prejdime na kartu Návrh a aktualizujeme nasledujúce:
- Písmo textu: Roboto
- Farba textu textu: #dddddd
- Veľkosť textu: 16px
- Výška riadku textu: 1,5 em
- Zarovnanie textu: vľavo
- Maximálna šírka: 400 px
- Zarovnanie modulu: stred
Nastavenia sekcií
Nezabudnite odstrániť predvolenú farbu pozadia sekcie, ale dajte jej úplne priehľadné pozadie. Potom môžeme odstrániť hornú výplň a pridať spodný okraj pre účely rolovacieho testu.
Ak to chcete urobiť, otvorte nastavenia sekcie a aktualizujte nasledujúce:
- Farba pozadia: rgba (0,0,0,0)
- Spodný okraj: 80 h
- Výplň: 0px
Vytvorenie animovaného oddeľovača sekcií
Po dokončení dvoch sekcií obsahu sme pripravení pridať sekciu pre naše animované oddeľovače sekcií.
Pridajte novú sekciu
Pokračujte a vytvorte novú pravidelnú sekciu uprostred oboch sekcií obsahu.
Kontext časti
Znova odstráňte predvolenú farbu pozadia sekcie, ale aktualizujte nasledujúce:
- Farba pozadia: rgba (0,0,0,0)
Dizajn deliča profilov
Nerobte si starosti, svoju farbu pozadia vytvoríme pomocou oddeľovačov sekcií. Ak to chcete urobiť, kliknite na kartu dizajn a do sekcie pridajte horný a dolný rozdeľovač nasledovne:
Vynikajúci dizajn deliča
- Najlepší štýl rozdeľovača: pozri snímku obrazovky
- Farba horného deliča: # 524fbf
- Výška horného deliča: 20 Vw
- Horizontálne opakovanie horného deliča: 0,6x
- Prevrátenie horného deliča: vodorovné
Dizajn dolného deliča
- Štýl dolného rozdeľovača: pozri snímku obrazovky
- Farba spodného oddeľovača: # 524fbf
- Výška dolného deliča: 20 Vw
- Horizontálne opakovanie dolného deliča: 0,5x
- Sklon dolného deliča: vodorovný a zvislý
Výška prierezu a čalúnenie
Pretože táto časť slúži čisto na návrh rozdeľovača, môžeme sa zbaviť výšky a polstrovania, aby sa zobrazil iba štýl rozdeľovača a aby medzi týmito dvoma časťami obsahu nevzniklo zbytočné miesto. Aktualizujte nasledujúce informácie:
- Výška: 0px
- Výplň: vysoká 0px, nízka 0px
Efekty posunu oddeľovača sekcií
Potom dajte sekcii nasledujúce rolovacie efekty:
Pod záložkou Horizontálny pohyb ...
- Aktivujte horizontálny pohyb: ÁNO
Pre toto môžeme ponechať predvolené nastavenia z pohľadu kancelária .
Potom aktualizujte parametre horizontálneho pohybu na tablette :
- Počiatočný posun: 3 (pri 0% okna)
- Priemerný posun: 0 (pri 50% výrezu)
- Koncový posun: -3 (pri 100% výrezu)
Pod záložkou Zvýšenie a zníženie efektu aktualizujte na kancelária ...
- Začiatočná stupnica: 200% (pri 0% okna)
- Priemerná mierka: 150% (pri 45% - 65% výrezu)
- Koncová stupnica: 150% (pri 100% výrezu)
Potom aktualizujte efekt Škálovanie nahor a nadol na tablette nasledovne:
- Štartová stupnica: 400% (pri 0% okna)
- Priemerná mierka: 300% (pri 45% - 65% výrezu)
- Koncová stupnica: 400% (pri 100% výrezu)
Hlavným dôvodom, prečo musíme upraviť pohybové efekty na tablete (a telefóne), sú horizontálne hodnoty pohybu pomocou jednotiek dĺžky pixelov (t. J. 3 = 300 pixelov), ktoré sú absolútne a neprispôsobovať sa šírke prehliadača.
Pozrime sa teraz na konečný výsledok nášho posúvača animovaných oddielov.
záverečné myšlienky
Animácia oddeľovačov častí na zvitku je zábavný a efektívny spôsob, ako oživiť webovú stránku. Dúfam, že vám to dá inšpiráciu, aby ste sami podnietili ešte viac kreatívnych návrhov.
