Vil du gerne vide, hvordan du afslører indhold når du svæver over sektionsadskilleren i Divi ?
Sektionsopdelere er fortsat et designelement Divi populær. Der er mange typer af skillevægge at vælge imellem med nyttige muligheder, der gør det nemt at tilføje unikke overgange og baggrunde til din side.
I denne vejledning vil vi bruge sektionsopdelere lidt anderledes. Divi giver dig mulighed for at justere højden og layoutet af hver skillevæg. Dette giver os mulighed for at placere separatorer over bestemte områder eller indhold af afsnittet.
Ved at bruge svævemuligheden til separatorhøjde kan vi tilføje unikke svæveeffekter, der afslører en indhold delvist skjult. Dette fungerer fantastisk til at henlede opmærksomheden på en bestemt opfordring til handling eller knap, du vil have folk til at klikke på. besøgende klik.
undersøgelse
Download DIVI nu!!!
Opret en ny side med Divi Builder
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Design af Section Divider Hover Effect i Divi
Oprettelse af sektionen og linjen
Opret en almindelig sektion med en række med to kolonner.
Før du tilføjer et modul, skal du åbne sektionsindstillingerne og opdatere følgende:
Baggrundsgradient (venstre): #73ba57
Baggrundsgradient (højre): #2a4c23
Bredde: 80 %
Maks. bredde: 1px
Sektionsopretning: Center
Tilføj afsnitstitel
For at tilføje sektionstitlen skal du oprette et tekstmodul og indsætte følgende tekst:
<h2>The Juice</h2>
Opdater derefter designet som følger:
Skrifttype: Lato
Tekststørrelse: 80px
Bogstavafstand: -5px
Margen: -50px (øverst), -40px (nederst)
Z-indeks: -1
Den brugerdefinerede margen og z-indekset vil gøre det muligt for teksten at forblive bag det billede, vi tilføjer i næste trin.
Tilføj billede
Tilføj et billedmodul under tekstmodulet med titlen i kolonne 1. Upload derefter et billede med en gennemsigtig baggrund. Vi bruger et billede fra layoutpakken Juice Shop 240 pixels gange 300 pixels.
Justering af justeringen af billedet i midten.
Tilføj et "Call To Action"-modul i kolonne 2
Tilføj et Call To Action-modul i kolonne 2.
Tilføj en knaplink-URL for at sikre, at knappen vises.
CTA-baggrund og titeltekststyling
Opdater derefter følgende designindstillinger:
Baggrund: #ffffff
Tekstfarve: mørk
Titelskrifttype: Lato
Titel Skrifttypevægt: Tung
Skrifttype: TT
Titel Tekststørrelse: 18px
Tilpas CTA-knappen
Opdater knapdesignet som følger:
- Brug brugerdefinerede stilarter til knap: JA
- Knaptekstfarve: #ffffff
- Knap baggrundsfarve: #73ba57
- Kantbredde: 0px
Tilpas CTA-modulets kant
Tilføj derefter en kant for at indramme modulet som følger:
Kantbredde: 10px
Kantfarve: rgba(115,186,87,0.15)
Tilføjede svæveeffekten til splitteren for at afsløre modulet "Call To Action".
Nu er det tid til at tilføje svæveeffekten til sektionsopdelingen for at afsløre modulet "Call To Action". For at gøre dette skal vi først oprette vores sektionsopdelere.
Læs også: Divi: Sådan afslører du indhold, når du svæver over faner
Tilføjelse af den øverste separator
Åbn sektionsparametrene og den øverste separator med følgende parametre.
Top Divider Style: se skærmbillede
Topdeler farve: #73ba57
Skillehøjde: 70% (standard), 0% (hover)
Top Divider Flip: vandret
Bemærk, at højden af separatoren starter med en standardhøjde på 70 %, og derefter ændres til en højde på 0 % ved svævning.
Tilføjet bunddeler
Tilføj derefter en lavere separator svarende til sektionen med følgende parametre.
- Bottom Divider Style: se skærmbillede
- Bunddeler farve: #73ba57
- Skillehøjde: 70 % (standard), 0 % (hover)
- Divider Flip: vandret
- Arrangement: På toppen af afsnitsindhold
Denne nedre skillevæg starter også med en højde på 70 %, som falder til 0 % ved svævning. Men da splitter-arrangementet er indstillet over indholdet, skjuler sektionsopdeleren den nederste del af "Call To Action"-modulet i kolonne 1. Derefter afsløres resten af modulet.
Tjek resultatet indtil videre.
Download DIVI nu!!!
Tilføjet box shadow hover-effekt for unik overgang og design
For en unik overgang og design på hover, kan vi tilføje en box shadow hover effekt, der vil finde sted samtidigt med splitter hover effekten. For at gøre dette skal du tilføje følgende boksskygge til sektionen.
- Box Shadow: se skærmbillede
- Vandret position: 0px
- Lodret position: 0px
- Box Shadow Spread Styrke: 0px (standard), 150px (hover)
- Skyggefarve: #73ba57
Sænk overgangens varighed
For et sidste trin, lad os bremse overgangens varighed.
Overgangsvarighed: 700ms
Endelig resultat
Nu hvor vi har gennemgået alle trinene, lad os se slutresultatet.
Download DIVI nu!!!
Konklusion
Vi håber, at denne artikel gav dig lidt inspiration til at skabe unikke sektionsopdelere svæveeffekter for at afsløre indhold.
Faktisk kan justering af svævesplitteren være en fantastisk designfunktion i sig selv. Derudover bør prøvedesignerne hjælpe dig med at starte din egen udforskning og design.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
