Pregradni razdjelnici i dalje su popularan element dizajna na Divi-u. Postoji mnogo stilova separatora, uključujući neke korisne opcije koje olakšavaju dodavanje jedinstvenih prijelaza i pozadina na vašu stranicu.
U ovom vodiču koristit ćemo razdjelnike sekcija malo drugačije. Divi vam omogućuje podešavanje visine i rasporeda svake pregrade. To nam omogućuje postavljanje separatora iznad određenih područja ili sadržaja u odjeljku. Korištenjem opcije lebdenja za visinu razdjelnika, možemo dodati jedinstvene efekte lebdenja otkrivajući a sadržaj djelomično skriveno. Ovo odlično funkcionira za privlačenje pozornosti na poziv na radnju ili određeni gumb na koji želite da ljudi kliknu. posjetitelji klik.
Počnimo.
Uzorak rezultata
Što trebate za početak
Da biste započeli, trebate sljedeće:
- Le Divi tema instaliran i aktivan
- Nova stranica stvorena za izgradnju od nule na prednjem dijelu (vizualni konstruktor)
- Neke lažne slike za korištenje u dizajnu. Koristit ću neke slike s prozirnim pozadinama s Paket za izradu sokova u trgovini .
Nakon toga, spremni ste za početak!
Implementacija dizajna efekta lebdenja visine razdjelnika odjeljka u Divi
Stvaranje odjeljka i crte
Započnimo stvaranjem redovnog odjeljka s nizom od dva stupca.
Prije dodavanja modula otvorite postavke odjeljka i ažurirajte sljedeće:
Lijevi gradijent pozadine: #73ba57
Desni pozadinski gradijent: #2a4c23
Širina: 80%
Maksimalna širina: 1080px
Poravnavanje odjeljka: Centar
Ali također možete odabrati shemu boja koja vam se sviđa prema vašoj slici. moja shema boja je: # fff200 - # e09900 u gradijentu.
Dodajte naslov odjeljka
Da biste dodali naslov odjeljka, izradite tekstualni modul i ažurirajte sadržaj tijela sa sljedećim h2 zaglavljem:
Sok
Zatim ažurirajte crtež na sljedeći način:
Naslov 2 Font: Lato
Veličina slova 2: 80px
Zaglavlje 2 Razmak slova: -5px
Margina: -50px pri vrhu, -40px pri dnu
Z-indeks: -1
Prilagođena margina i z indeks omogućit će da tekst stoji iza slike koju ćemo dodati u sljedećem koraku.
Dodaj sliku
Pod modul teksta s naslovom u stupcu 1 dodajte modul slike. Zatim prenesite sliku s prozirnom pozadinom. Koristim sliku iz Juice Shop Layout Pack koja je 240 piksela sa 300 piksela.
Prilagodite poravnanje slike na sredinu.
Dodavanje poziva na akciju u stupcu 2
U stupcu 2 dodajte poziv akcijskom modulu.
Dodajte URL veze gumba kako biste bili sigurni da je gumb prikazan.
Pozadina CTA i stil naslova
Zatim ažurirajte sljedeće parametre dizajna:
Boja pozadine: #ffffff
Boja teksta:
naslov Font: Lato
Naslov Težina Pravila: Teška
Naslov Font Stil: TT
Veličina teksta: 18px
Stilizirajte CTA gumb
Ažurirajte dizajn gumba na sljedeći način:
Boja teksta gumba: #ffffff
Boja pozadine gumba: # e09900
Širina obruba gumba: 0 px
Stiliziranje CTA granice
Zatim dodajte obrub da biste uokvirili modul na sljedeći način:
Širina granice: 10px
Boja obruba: rgba (224,145,0,0.25)
Dodan je efekt lebdenja visine razdjelnika kako bi se otkrio poziv na akciju
Sada je vrijeme da dodate efekt lebdenja visine podjele odjeljka kako biste otkrili poziv na akciju. Da bismo to učinili, prvo moramo stvoriti naše razdjelnike odjeljaka.
Dodavanje gornjeg separatora
Otvorite parametre odjeljka i gornji separator sa sljedećim parametrima.
Stil gornjeg razdjelnika: pogledajte snimak zaslona Boja gornjeg razdjelnika: # 73ba57 Visina gornjeg razdjelnika: 70% (zadano), 0% (lebdenje)
Preklopni razdjelnik: vodoravno
Imajte na umu da visina separatora započinje zadanom visinom od 70%, a zatim se pomiče na visinu od 0% pri prelasku.
Dodatak donjeg razdjelnika
Zatim dodajte donji separator sličan odjeljku sa sljedećim parametrima.
Stil gornjeg razdjelnika: pogledajte snimak zaslona Boja gornjeg razdjelnika: # 73ba57 Visina gornjeg razdjelnika: 70% (zadano), 0% (lebdenje)
Preklopni razdjelnik: vodoravno
Izgled razdjelnika: na vrhu odjeljka Sadržaj
Ovaj razdjelnik pozadine također započinje s visinom od 70% koja se mijenja kod prelaska lebdjenjem u 0%. Međutim, budući da je opcija rasporeda separatora postavljena na vrhu sadržaja, separator odjeljka skriva donji dio poziva na akciju u stupcu 1. Zatim, pri zadržavanju pokazivača miša, ostatak l otkriva se poziv na akciju.
Pogledajte dosadašnji rezultat.
Dodan je efekt zadržavanja pokazivača u sjeni za jedinstveni prijelaz i dizajn
Za jedinstveni prijelaz i dizajn lebdenja možemo dodati efekt lebdenja u sjenci okvira koji će se odvijati istovremeno s efektom lebdenja visine razdjelnika. Da biste to učinili, dodajte sjenu sljedećeg okvira u odjeljak.
Box Shadow: pogledajte snimak zaslona
Okvir Sjena Vodoravni položaj: 0px
Okvirna okomita pozicija: 0px
Sila širenja sjene okvira: 0px (zadano), 150px (lebdeći pokazivač)
Boja sjenila: #73ba57
Usporite trajanje prijelaza
Za zadnji korak, usporimo trajanje prijelaza.
Trajanje prijelaza: 700ms
Konačni rezultat
Evo konačnog rezultata na radnoj površini.
Na temelju onoga što smo gore učinili, moći ćete prilagoditi prikaz na mobitelu i tabletu.
Završne misli
Nadam se da vam je ovaj vodič dao inspiraciju za stvaranje jedinstvenih efekata prelaska pokazivača iznad visine odjeljka za otkrivanje sadržaja. Zapravo, podešavanje visine lebdećeg razdjelnika može biti izvanredan element dizajna. A uzorci dizajna trebali bi vam pomoći da započnete vlastito istraživanje i vlastite dizajne.
Nadam se da ćemo se čuti u komentarima.
Na vaše zdravlje!
