Seksjonsdelere er fortsatt et populært designelement på Divi. Det er mange stiler med separatorer der ute, inkludert noen nyttige alternativer som gjør det enkelt å legge til unike overganger og bakgrunner til siden din.
I denne opplæringen vil vi bruke seksjonsdelere litt annerledes. Divi lar deg justere høyden og utformingen av hver skillevegg. Dette lar oss plassere skilletegn over bestemte områder eller innhold i seksjonen. Ved å bruke svevealternativet for skillehøyde, kan vi legge til unike sveveeffekter som avslører en innhold delvis skjult. Dette fungerer utmerket for å trekke oppmerksomhet til en oppfordring til handling eller en bestemt knapp du vil at folk skal klikke på. Besøkende klikk.
La oss begynne.
Prøveresultat
Hva du trenger for å komme i gang
For å komme i gang trenger du følgende:
- Le Divi-tema installert og aktiv
- En ny side laget for å bygge fra bunnen av på front-enden (visuell konstruktør)
- Noen dummy bilder å bruke i designet. Jeg skal bruke noen bilder med gjennomsiktig bakgrunn fra Juice Shop Layout Pack .
Etter det er du klar til å starte!
Implementering av snittdeleren høyde svever effekt design i Divi
Opprette seksjonen og linjen
La oss starte med å lage en vanlig seksjon med en rad med to kolonner.
Før du legger til en modul, må du åpne seksjonsinnstillingene og oppdatere følgende:
Gradient i venstre bakgrunn: #73ba57
Høyre bakgrunnsgradient: #2a4c23
Bredde: 80%
Maksimal bredde: 1080px
Seksjon Alignment: Center
Men du kan også velge fargeskjemaet du liker i henhold til bildet ditt. fargevalget mitt er: # fff200 - # e09900 i gradient.
Legg til seksjonstitel
For å legge til seksjonstittelen, lag en tekstmodul og oppdater innhold av kroppen med følgende h2-overskrift:
Jusen
Oppdater deretter tegningen som følger:
Overskrift 2 Font: Lato
Overskrift 2 Tekststørrelse: 80px
Overskrift 2 Letteravstand: -5px
Margin: -50px øverst, -40px nederst
Z-indeks: -1
Den egendefinerte margen og z-indeksen gjør at teksten kan sitte bak bildet som vi vil legge til i neste trinn.
Legg til bilde
Legg til en bildemodul under tekstmodulen med tittelen i kolonne 1. Last deretter opp et bilde med gjennomsiktig bakgrunn. Jeg bruker et bilde fra Juice Shop Layout Pack som er 240 piksler på 300 piksler.
Juster justeringen av bildet til midten.
Legge til en oppfordring til handling i kolonne 2
I 2-kolonnen legger du til et anrop til handlingsmodulen.
Legg til URL-knapp for en knapp for å sikre at knappen vises.
CTA bakgrunn og tittel stil
Oppdater deretter følgende designparametere:
Bakgrunnsfarge: #ffffff
Tekstfarge:
tittel Font: Lato
Tittel Vekt Policy: Heavy
Tittel Font Style: TT
tittel Tekststørrelse: 18px
Styler CTA-knappen
Oppdater knappdesignet som følger:
Knapptekstfarge: #ffffff
Knapp Bakgrunnsfarge: # e09900
Knappgrensebredde: 0 px
Styling CTA-grensen
Legg deretter til en ramme for å ramme modulen på følgende måte:
Bredde på grensen: 10px
Farge på grensen: rgba (224,145,0,0.25)
Lagt til skillehøyde svevereffekt for å avsløre oppfordring til handling
Nå er det på tide å legge til seksjonen divisjon høyde sveveeffekt for å avsløre handlingen. For å gjøre dette må vi først opprette seksjonsdelere.
Legger til den øvre separatoren
Åpne seksjonsparametrene og den øvre separatoren med følgende parametere.
Toppdelerstil: se skjermbilde Toppdelerfarge: # 73ba57 Toppdelerhøyde: 70% (standard), 0% (svevet)
Vipp toppdeler: vannrett
Vær oppmerksom på at høyden på separatoren begynner med en standardhøyde på 70%, og deretter beveger seg til en høyde på 0% ved rullering.
Tilsetning av nedre skillelinje
Legg deretter til en nedre separator som ligner på seksjonen med følgende parametere.
Toppdelerstil: se skjermbilde Toppdelerfarge: # 73ba57 Toppdelerhøyde: 70% (standard), 0% (svevet)
Vipp toppdeler: vannrett
Divider Layout: Øverst i seksjonen Innhold
Denne bakgrunnsskilleren starter også med en høyde på 70%, som endres til 0% når du holder markøren. Men fordi separatoroppsettalternativet er satt øverst i innholdet, skjuler seksjonsseparatoren den nedre delen av handlingsoppfordringen i kolonne 1. Deretter, mens du holder markøren, resten av l oppfordring til handling avsløres.
Sjekk resultatet så langt.
Lagt til en bokseskyggeeffekt for en unik overgang og design
For en unik svevende overgang og design, kan vi legge til en bokseskygge-svevereffekt som vil finne sted samtidig med skillelinjen. For å gjøre dette, legg til skyggen av følgende boks i seksjonen.
Box Shadow: se skjermbilde
Box Skygge Horisontal posisjon: 0px
Box Shadow Vertikal posisjon: 0px
Box Shadow Spread Force: 0px (standard), 150px (hover)
Box Shadow Color: #73ba57
Sakte ned overgangen
For et siste trinn, la oss redusere varigheten av overgangen.
Overgangs varighet: 700ms
Endelig resultat
Her er det endelige resultatet på skrivebordet.
Basert på hva vi har gjort ovenfor, vil du kunne tilpasse skjermen på mobil og nettbrett.
avslutt~~POS=TRUNC tanker
Håper denne opplæringen ga deg litt inspirasjon til å lage unike seksjonsdeler høyde svevereffekter for å avsløre innhold. Å justere høyden på den svevende skillelinjen kan faktisk være et bemerkelsesverdig designelement. Og designeksemplene skal hjelpe deg med å starte din egen utforskning og dine egne design.
Håper å høre fra deg i kommentarene.
Til helsen din!