Vytváření efektů posouvání pomocí rozdělovače sekcí je jednoduchá a zábavná technika, která vám může přidat život Webové stránky za použití WordPress téma Divi. Oddělovač sekcí je i nadále všestranným designovým prvkem, užitečným pro přidání nádechu kreativity do vašich přechodů obsah stránky.
Ale díky efektům posouvání Divi se děliče sekcí stanou ještě zajímavějšími! Trik je izolovat část věnovanou zvolenému stylu rozdělovače. Poté můžete do sekce přidat všechny druhy pohybů generovaných posouváním a vytvořit tak krásné efekty posouvání jako pozadí pro obsah strana.
Začněme!
Možný výsledek
Zde je přehled návrhů, kterých budeme moci dosáhnout po absolvování tohoto kurzu.
Jak vytvořit animované oddělovače posouvaných sekcí pomocí Divi
Vytvoření dvou částí obsahu
Přidejte řádek
Nejprve vytvořte řádek s jedním sloupcem ve výchozí sekci.
Rozpětí sekce (pro zkoušky)
Pro účely testování přidejte do sekce horní okraj, abychom měli prostor pro posouvání. Otevřete nastavení sekce a přidejte následující:
- Horní okraj: 80vh
Přidat textový modul
V řádku sloupce přidejte nový textový modul.
Obsah textového modulu
Uvnitř obsah těla přidejte následující nadpis H2:
<h2>Section Avec Séparateurs</h2>
Návrh textového modulu
V nastavení návrhu aktualizujte následující:
- Textové písmo: Roboto
- Zarovnání textu: střed
- Položka 2 Barva textu: # bae0d8
- Záhlaví 2 Velikost textu: 80px (na ploše), 50px (tablet), 30px (telefon)
Přidejte druhou část obsahu
V předchozí části přidejte novou pravidelnou sekci.
Přidejte řádek
V nové sekci přidejte řádek do sloupce.
Přidat textový modul
Poté do řádku přidejte nový textový modul.
Návrh textového modulu
Můžeme si zatím ponechat výchozí obsah výplně uvnitř těla. Pojďme přejít na kartu Návrh a aktualizovat následující:
- Textové písmo: Roboto
- Barva textu textu: #ddddd
- Velikost textu: 16px
- Výška textového řádku: 1,5 em
- Zarovnání textu: vlevo
- Maximální šířka: 400 px
- Zarovnání modulu: střed
Nastavení sekce
Nezapomeňte odstranit výchozí barvu pozadí sekce, ale dát jí zcela průhledné pozadí. Pak můžeme odstranit horní výplň a přidat spodní okraj pro účely posouvání.
Chcete-li to provést, otevřete nastavení sekce a aktualizujte následující:
- Barva pozadí: rgba (0,0,0,0)
- Dolní okraj: 80vh
- Výplň: 0px
Vytvoření oddělovače animovaných sekcí
Po dokončení dvou sekcí obsahu jsme připraveni přidat sekci pro naše animované děliče sekcí.
Přidejte novou sekci
Pokračujte a vytvořte novou pravidelnou sekci uprostřed dvou částí obsahu.
Kontext sekce
Znovu odeberte výchozí barvu pozadí sekce, ale aktualizujte následující:
- Barva pozadí: rgba (0,0,0,0)
Návrh děliče sekcí
Nebojte se, vytvoříme naši barvu pozadí s děliči oddílů. Chcete-li to provést, klikněte na kartu Návrh a do sekce přidejte horní a dolní dělič takto:
Vynikající design děliče
- Nejlepší styl rozdělovače: viz screenshot
- Barva horního děliče: # 524fbf
- Výška horního děliče: 20 Vw
- Horizontální opakování horního děliče: 0,6x
- Překlopení horního děliče: vodorovně
Konstrukce spodního děliče
- Styl dolního děliče: viz screenshot
- Barva spodního oddělovače: # 524fbf
- Výška dolního děliče: 20 Vw
- Horizontální opakování dolního děliče: 0,5x
- Sklon dolního děliče: vodorovný a svislý
Výška sekce a čalounění
Vzhledem k tomu, že tato část je čistě pro návrh rozdělovače, můžeme se zbavit výšky a výplně, takže je zobrazen pouze styl rozdělovače a mezi dvěma částmi obsahu nepřichází zbytečné místo. Aktualizujte následující:
- Výška: 0px
- Výplň: 0px vysoká, 0px nízká
Efekty posunu oddělovače sekcí
Poté zadejte sekci následující efekty posouvání:
Na kartě Horizontální pohyb ...
- Aktivujte horizontální pohyb: ANO
Můžeme ponechat výchozí nastavení pro toto z pohledu kancelář .
Poté aktualizujte parametry horizontálního pohybu na tablette :
- Počáteční posun: 3 (v 0% okna)
- Průměrný offset: 0 (při 50% výřezu)
- Konec posunutí: -3 (při 100% výřezu)
Na kartě Efekt škálování nahoru a dolů , aktualizujte na kancelář ...
- Startovní stupnice: 200% (v 0% okna)
- Průměrná stupnice: 150% (při 45% -65% výřezu)
- Koncová stupnice: 150% (při 100% výřezu)
Poté aktualizujte efekt Škálování nahoru a dolů na tablette takto:
- Startovní stupnice: 400% (v 0% okna)
- Průměrná stupnice: 300% (při 45% -65% výřezu)
- Koncová stupnice: 400% (při 100% výřezu)
Hlavním důvodem, proč musíme upravit pohybové efekty na tabletu (a telefonu), jsou horizontální hodnoty pohybu pomocí jednotek délky pixelů (tj. 3 = 300 pixelů), které jsou absolutní a nepřizpůsobovat se šířce prohlížeče.
Nyní se podívejme na konečný výsledek našeho posouvacího animovaného děliče sekcí.
Závěrečné myšlenky
Animace oddělovačů sekcí na svitku je zábavný a efektivní způsob, jak oživit webovou stránku. Doufám, že vám to dá nějakou inspiraci, abyste sami podnítili ještě více kreativních návrhů.
