Vil du vite hvordan du avslører innhold når du svever over seksjonsskilleren i Divi ?
Seksjonsdelere fortsetter å være et designelement Divi populær. Det er mange typer skillelinjer å velge mellom med 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 tillater oss å plassere separatorer over visse områder eller innhold av seksjonen.
Ved å bruke hover-alternativet for separatorhøyde, kan vi legge til unike sveveeffekter som avslører en innhold delvis skjult. Dette fungerer utmerket for å trekke oppmerksomhet til en bestemt handlingsfremmende oppfordring eller knapp du vil at folk skal klikke på. Besøkende klikk.
undersøkelsen
Last ned DIVI nå!!!
Opprett en ny side med Divi Builder
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Utforme Section Divider Hover Effect i Divi
Opprette seksjonen og linjen
Lag en vanlig seksjon med en rad med to kolonner.
Før du legger til en modul, åpne seksjonsinnstillingene og oppdater følgende:
Bakgrunnsgradient (venstre): #73ba57
Bakgrunnsgradient (høyre): #2a4c23
Bredde: 80 %
Maks bredde: 1px
Seksjonsjustering: Senter
Legg til seksjonstittel
For å legge til seksjonstittelen, lag en tekstmodul og sett inn følgende tekst:
<h2>The Juice</h2>
Deretter oppdaterer du designet som følger:
Font: Lato
Tekststørrelse: 80px
Bokstavavstand: -5px
Marg: -50 piksler (øverst), -40 piksler (bunn)
Z-indeks: -1
Den tilpassede margen og z-indeksen vil tillate teksten å holde seg bak bildet vi legger til i neste trinn.
Legg til bilde
Under Tekstmodulen med tittelen i kolonne 1 legger du til en bildemodul. Last deretter opp et bilde med en gjennomsiktig bakgrunn. Vi bruker et bilde fra layoutpakken Juice Shop 240 piksler x 300 piksler.
Justeringen av justeringen av bildet i midten.
Legg til en "Call To Action"-modul i kolonne 2
I kolonne 2 legger du til en Call To Action-modul.
Legg til en knapplenke-URL for å sikre at knappen vises.
CTA-bakgrunn og titteltekststil
Deretter oppdaterer du følgende designinnstillinger:
Bakgrunn: #ffffff
Tekstfarge: mørk
Tittel Font : Lato
Tittel Skriftvekt: Tung
Skriftstil: TT
Tittel Tekststørrelse: 18px
Tilpass CTA-knappen
Oppdater knappdesignet som følger:
- Bruk egendefinerte stiler for knapp: JA
- Knapptekstfarge: #ffffff
- Bakgrunnsfarge for knapp: #73ba57
- Kantbredde: 0px
Tilpass CTA-modulgrensen
Legg deretter til en kantlinje for å ramme inn modulen som følger:
Kantbredde: 10px
Kantfarge: rgba(115,186,87,0.15)
La til sveveeffekten i splitteren for å avsløre "Call To Action"-modulen
Nå er det på tide å legge til sveveeffekten i seksjonsdeleren for å avsløre "Call To Action"-modulen. For å gjøre dette må vi først lage våre seksjonsdelere.
Les også: Divi: Hvordan avsløre innhold når du holder musepekeren over faner
Legger til den øvre separatoren
Åpne seksjonsparametrene og den øvre separatoren med følgende parametere.
Top Divider Style: se skjermbilde
Toppdeler farge: #73ba57
Skillehøyde: 70 % (standard), 0 % (sveving)
Top Divider Flip: horisontal
Merk at høyden på skillelinjen starter med en standardhøyde på 70 %, og endres deretter til en høyde på 0 % ved sveving.
Lagt til bunndeler
Legg deretter til en nedre separator som ligner på seksjonen med følgende parametere.
- Bottom Divider Style: se skjermbilde
- Farge på bunndeler: #73ba57
- Skillehøyde: 70 % (standard), 0 % (sveving)
- Divider Flip: Horisontal
- Arrangement: På toppen av seksjonsinnhold
Denne nedre skilleveggen starter også med en høyde på 70 % som synker til 0 % ved sveving. Men siden splitter-arrangementet er satt over innholdet, skjuler seksjonssplitteren den nederste delen av "Call To Action"-modulen i kolonne 1. Når du holder musepekeren, avsløres resten av modulen.
Sjekk resultatet så langt.
Last ned DIVI nå!!!
Lagt til boksskyggeeffekt for unik overgang og design
For en unik overgang og design på hover, kan vi legge til en box shadow hover-effekt som vil finne sted samtidig med splitter hover-effekten. For å gjøre dette, legg til følgende boksskygge til seksjonen.
- Box Shadow: se skjermbilde
- Horisontal posisjon: 0px
- Vertikal posisjon: 0px
- Box Shadow Spread Styrke: 0px (standard), 150px (sveve)
- Skyggefarge: #73ba57
Sakte ned overgangen
For et siste trinn, la oss redusere varigheten av overgangen.
Overgangsvarighet: 700ms
Endelig resultat
Nå som vi har gått gjennom alle trinnene, la oss se sluttresultatet.
Last ned DIVI nå!!!
konklusjonen
Vi håper denne artikkelen ga deg litt inspirasjon til å lage unike seksjonsdeler sveveeffekter for å avsløre innhold.
Faktisk kan justering av svevesplitteren være et flott designelement alene. I tillegg bør prøvedesignene hjelpe deg med å starte din egen utforskning og design.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
