Stvaranje efekata pomicanja pomoću Section Divider jednostavna je i zabavna tehnika koja vam može dodati život web stranica koristiti WordPress tema Divi. Pregrada za dijelove i dalje je svestran element dizajna, koristan za dodavanje daška kreativnosti vašim prijelazima sadržaj stranice.
Ali uz Divi efekte pomicanja, razdjelnici odjeljaka postaju još zanimljiviji! Trik je u tome da izdvojite odjeljak posvećen odabranom stilu razdjelnika. Zatim možete dodati sve vrste pokreta generiranih pomicanjem u odjeljak kako biste stvorili prekrasne efekte pomicanja kao pozadinu za sadržaj stranice.
Započnimo!
Mogući ishod
Evo pregleda dizajna koje ćemo moći postići nakon završetka ovog vodiča.
Kako stvoriti animirane dijelove odjeljka za pomicanje s Divi
Stvaranje dvaju sadržajnih odjeljaka
Dodajte red
Za početak stvorite redak s jednim stupcem u zadanom odjeljku.
Granica odjeljka (za testove)
Za potrebe testiranja dodajte gornju marginu odjeljku kako bismo imali prostora za pomicanje. Otvorite postavke odjeljka i dodajte sljedeće:
- Gornja marža: 80vh
Dodajte tekstualni modul
U redak stupca dodajte novi tekstualni modul.
Sadržaj tekstualnog modula
Unutar sadržaj tijela dodajte sljedeći naslov H2:
<h2>Section Avec Séparateurs</h2>
Dizajn tekstualnog modula
U postavkama dizajna ažurirajte sljedeće:
- Font teksta: Roboto
- Usklađivanje teksta: središte
- Stavka 2 Boja teksta: # bae0d8
- Zaglavlje 2 Veličina teksta: 80 px (desktop), 50px (tablet), 30px (telefon)
Dodajte drugi odjeljak sa sadržajem
Pod prethodnim odjeljkom dodajte novi redoviti odjeljak.
Dodajte red
U novom odjeljku dodajte redak stupcu.
Dodajte tekstualni modul
Zatim u redak dodajte novi tekstualni modul.
Dizajn tekstualnog modula
Zadani sadržaj obloga zasad možemo zadržati u tijelu. Prijeđimo na karticu dizajn i ažurirajte sljedeće:
- Font teksta: Roboto
- Boja teksta teksta: #dddddd
- Veličina teksta: 16px
- Visina retka teksta: 1,5 em
- Poravnanje teksta: lijevo
- Maksimalna širina: 400 px
- Usklađivanje modula: centar
Postavke odjeljka
Obavezno uklonite zadanu boju pozadine odjeljka, ali dajte mu potpuno prozirnu pozadinu. Tada možemo ukloniti gornju oblogu i dodati donju marginu u svrhu testiranja pomicanja.
Da biste to učinili, otvorite postavke odjeljka i ažurirajte sljedeće:
- Boja pozadine: rgba (0,0,0,0)
- Donja marža: 80vh
- Dodavanje: 0px
Stvaranje razdvojenog animiranog odjeljka
Nakon dovršetka dvaju odjeljaka sadržaja, spremni smo dodati odjeljak za naše animirane dijelitelje odjeljaka.
Dodajte novi odjeljak
Nastavite i stvorite novi redoviti odjeljak u sredini dva odjeljka sa sadržajem.
Kontekst odjeljka
I opet, uklonite zadanu boju pozadine odjeljka, ali ažurirajte sljedeće:
- Boja pozadine: rgba (0,0,0,0)
Dizajn razdjelnika odjeljka
Ne brinite, svoju ćemo pozadinsku boju stvoriti pomoću razdjelnika odjeljaka. Da biste to učinili, kliknite karticu dizajn i dodajte gornji i donji razdjelnik u odjeljak kako slijedi:
Vrhunski dizajn razdjelnika
- Vrh razdjelnika: pogledajte snimak zaslona
- Boja gornjeg razdjelnika: # 524fbf
- Visina gornjeg razdjelnika: 20vw
- Vodoravno ponavljanje gornjeg razdjelnika: 0,6x
- Okretanje gornjeg razdjelnika: vodoravno
Dizajn donjeg razdjelnika
- Stil donjeg razdjelnika: pogledajte snimak zaslona
- Boja donjeg separatora: # 524fbf
- Visina donjeg razdjelnika: 20vw
- Vodoravno ponavljanje donjeg razdjelnika: 0,5x
- Nagib donjeg razdjelnika: vodoravni i okomiti
Visina odjeljka i obloga
Budući da je ovaj odjeljak namijenjen samo dizajnu razdjelnika, možemo se riješiti visine i podloga tako da je prikazan samo stil razdjelnika i da između dva dijela sadržaja ne dolazi nepotreban prostor. Ažurirajte sljedeće:
- Visina: 0px
- Padding: 0px visoko, 0px low
Učinci pomicanja odjeljka za odjeljke
Zatim navedite odjeljak sljedeće efekte pomicanja:
Ispod kartice Horizontalno kretanje ...
- Uključite vodoravno kretanje: DA
Zadane postavke za ovu možemo zadržati na prikazu biro .
Zatim ažurirajte parametre vodoravnog pomicanja na tableta stavljena :
- Početni pomak: 3 (na 0% prozora)
- Prosječni pomak: 0 (pri 50% prikaza)
- Krajnji pomak: -3 (pri 100% vidnog polja)
Ispod kartice Učinak smanjivanja i smanjivanja , ažurirajte sljedeće na biro ...
- Početna ljestvica: 200% (na 0% prozora)
- Prosječna ljestvica: 150% (na 45% -65% vidnog polja)
- Krajnja skala: 150% (na 100% vidnog polja)
Zatim ažurirajte efekt skaliranja prema gore i dolje na tableta stavljena kako slijedi:
- Početna ljestvica: 400% (na 0% prozora)
- Prosječna ljestvica: 300% (na 45% -65% vidnog polja)
- Krajnja skala: 400% (na 100% vidnog polja)
Glavni razlog zbog kojeg moramo prilagoditi učinke kretanja na tabletu (i telefonu) je zbog vodoravnih vrijednosti kretanja pomoću jedinica duljine piksela (tj. 3 = 300 piksela), koje su apsolutni i ne prilagođavaju se širini preglednika.
Sada ćemo vidjeti konačni rezultat našeg pomičnog animiranog razdjelnika odjeljka.
Završne misli
Animirajući razdjelnici odjeljaka na svitku zabavan je i učinkovit način za oživljavanje web stranice. Nadam se da će vam ovo dati inspiraciju da sami potaknete još kreativnije dizajne.
