Sektionsdelere er fortsat et populært designelement på Divi. Der er mange separatorstyper derude, herunder nogle nyttige muligheder, der gør det let 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 i sektionen. Ved at bruge svævemuligheden til skillevægshø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 opfordring til handling eller en bestemt knap, du vil have folk til at klikke på. besøgende klik.
Lad os starte.
Prøveresultat
Hvad du behøver for at komme i gang
For at komme i gang har du brug for følgende:
- Le Divi-tema installeret og aktiv
- En ny side oprettet til at bygge fra bunden på frontend (visuel konstruktør)
- Nogle dummy billeder til brug i designet. Jeg skal bruge nogle billeder med gennemsigtig baggrund fra Juice Shop Layout Pack .
Derefter er du klar til at starte!
Implementering af sektionsdeleren højde svæver effekt design i Divi
Oprettelse af sektionen og linjen
Lad os starte med at oprette et almindeligt afsnit med en række med to kolonner.
Inden du tilføjer et modul, skal du åbne sektionsindstillingerne og opdatere følgende:
Gradient i venstre baggrund: #73ba57
Højre baggrundsgradient: #2a4c23
Bredde: 80%
Maksimal bredde: 1080px
Afsnit Alignment: Center
Men du kan også vælge det farveskema, du kan lide, alt efter dit billede. mit farveskema er: # fff200 - # e09900 i gradient.
Tilføj sektionstitel
For at tilføje afsnitstitlen skal du oprette et tekstmodul og opdatere indhold af kroppen med følgende h2-header:
Saften
Opdater derefter tegningen som følger:
Overskrift 2 Skrifttype: Lato
Tekst 2 Tekststørrelse: 80px
Overskrift 2 Letterafstand: -5px
Margen: -50px øverst, -40px nederst
Z-indeks: -1
Den brugerdefinerede margen og z-indekset tillader teksten at sidde bag det billede, som vi vil tilføje 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. Jeg bruger et billede fra Juice Shop Layout Pack, der er 240 pixels ved 300 pixels.
Juster billedets justering til midten.
Tilføjelse af en opfordring til handling i kolonne 2
I 2-kolonnen tilføj et opkald til handlingsmodulet.
Tilføj en knaplink-URL for at sikre dig, at knappen vises.
CTA baggrund og titel stil
Opdater derefter følgende designparametre:
Baggrundsfarve: #ffffff
Tekstfarve:
titel Skrifttype: Lato
Titel Vægt politik: Heavy
Titel skrifttype: TT
titel Tekststørrelse: 18px
Styler CTA-knappen
Opdater knapdesignet som følger:
Knappen tekstfarve: #ffffff
Knappens baggrundsfarve: # e09900
Knappens kantbredde: 0 px
Styling CTA-grænsen
Tilføj derefter en ramme for at ramme modulet som følger:
Bredde på grænsen: 10px
Farve på grænse: rgba (224,145,0,0.25)
Tilføjet skillehøjde svævende effekt for at afsløre opfordring til handling
Nu er det tid til at tilføje sektionsdelingshøjde-svævningseffekten for at afsløre opfordringen til handling. For at gøre dette skal vi først oprette vores sektionsdelere.
Tilføjelse af den øverste separator
Åbn sektionsparametrene og den øverste separator med følgende parametre.
Topdeler-stil: se skærmbillede Topdelerfarve: # 73ba57 Topdelerhøjde: 70% (standard), 0% (svævet)
Flip topdeler: vandret
Bemærk, at separatorens højde begynder med en standardhøjde på 70% og derefter bevæger sig til en højde på 0% ved rullering.
Tilføjelse af den nedre skillelinje
Tilføj derefter en lavere separator svarende til sektionen med følgende parametre.
Topdeler-stil: se skærmbillede Topdelerfarve: # 73ba57 Topdelerhøjde: 70% (standard), 0% (svævet)
Flip topdeler: vandret
Divider Layout: Øverst i sektionen Indhold
Denne baggrundsseparator starter også med en højde på 70%, som ændres til 0% på svævningen. Men fordi indstillingen for separatorlayout er indstillet øverst på indholdet, skjuler sektionsseparatoren den nederste del af opfordringen til handling i kolonne 1. Derefter, når du holder markøren, resten af l opfordring til handling afsløres.
Tjek resultatet indtil videre.
Tilføjet en boksskygge-svævende effekt for en unik overgang og design
For en unik svævende overgang og design kan vi tilføje en boksskygge-svævende effekt, der finder sted samtidigt med skillehøjde svæveeffekten. For at gøre dette skal du tilføje skyggen af det følgende felt til sektionen.
Box Shadow: se skærmbillede
Box Skygge Horisontal Position: 0px
Box Skygge Lodret Position: 0px
Box Shadow Spread Force: 0px (standard), 150px (hover)
Box Shadow Color: #73ba57
Sænk overgangens varighed
For et sidste trin, lad os bremse overgangens varighed.
Overgangs varighed: 700ms
Endelig resultat
Her er det endelige resultat på skrivebordet.
Baseret på hvad vi har gjort ovenfor, vil du være i stand til at tilpasse skærmen på mobil og tablet.
endelige tanker
Håber, at denne vejledning gav dig lidt inspiration til at skabe unikke sektionsdelerhøjde svæveeffekter for at afsløre indhold. Faktisk kan det være et bemærkelsesværdigt designelement at justere højden på den svævende skillevæg. Og designeksemplerne skal hjælpe dig med at starte din egen udforskning og dine egne designs.
Håber at høre fra dig i kommentarerne.
Til dit helbred!
