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

Animasjonsinnhold avslørte diviHva du trenger for å komme i gang

For å komme i gang trenger du følgende:

  1. Le Divi-tema installert og aktiv
  2. En ny side laget for å bygge fra bunnen av på front-enden (visuell konstruktør)
  3. 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.

Velg et divi-oppsettFø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 en degradert divi-bakgrunn

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.

Divi fruktjuiceJuster justeringen av bildet til midten.

Divi senterjustering

Legge til en oppfordring til handling i kolonne 2

I 2-kolonnen legger du til et anrop til handlingsmodulen.

Handling i kolonne 2

Legg til URL-knapp for en knapp for å sikre at knappen vises.

Legg til en kobling for divi-handling

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

Tilpass divi call to action

Styler CTA-knappen

Oppdater knappdesignet som følger:

Knapptekstfarge: #ffffff
Knapp Bakgrunnsfarge: # e09900
Knappgrensebredde: 0 px

Tilpass iamge divi bakgrunn

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)

Egendefinert border divi

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.

Tilpass divi-grenser

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

Divi border animasjon

Sakte ned overgangen

For et siste trinn, la oss redusere varigheten av overgangen.

Overgangs varighet: 700ms

Konfigurer divi-overgangerEndelig resultat

Her er det endelige resultatet på skrivebordet.

Divi sluttresultat

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!