Sectieverdelers blijven een populair ontwerpelement op Divi. Er zijn veel verschillende stijlen van scheidingstekens, waaronder enkele handige opties waarmee u eenvoudig unieke overgangen en achtergronden aan uw pagina kunt toevoegen.
In deze zelfstudie gebruiken we sectieverdelers een beetje anders. Met Divi kunt u de hoogte en indeling van elke scheidingswand aanpassen. Hierdoor kunnen we scheidingstekens boven bepaalde gebieden of inhoud in de sectie plaatsen. Door de zweefoptie voor de hoogte van de scheidingslijn te gebruiken, kunnen we unieke zweefeffecten toevoegen die een inhoud gedeeltelijk verborgen. Dit werkt prima om de aandacht te vestigen op een call-to-action of een bepaalde knop waarop mensen moeten klikken. bezoekers Klik.
Laten we beginnen.
Voorbeeldresultaat
Wat je nodig hebt om te beginnen
Om te beginnen heb je het volgende nodig:
- Le Divi-thema geïnstalleerd en actief
- Een nieuwe pagina gemaakt om helemaal opnieuw te bouwen op de front-end (visuele constructor)
- Enkele dummy-afbeeldingen om in het ontwerp te gebruiken. Ik ga enkele afbeeldingen gebruiken met transparante achtergronden uit de Juice Shop Layout-pakket .
Daarna ben je klaar om te beginnen!
Implementatie van het effectontwerp van de hoogte van de sectie-verdeler in Divi
De sectie en de lijn maken
Laten we beginnen met het maken van een normale sectie met een rij van twee kolommen.
Voordat u een module toevoegt, opent u de sectie-instellingen en werkt u het volgende bij:
Verloop achtergrond links: #73ba57
Rechter achtergrondverloop: #2a4c23
Breedte: 80%
Maximale breedte: 1080px
Sectie-uitlijning: Center
Maar u kunt ook het kleurenschema kiezen dat u leuk vindt op basis van uw afbeelding. mijn kleurenschema is: # fff200 - # e09900 in verloop.
Titel titel toevoegen
Om de sectietitel toe te voegen, maakt u een tekstmodule en werkt u de inhoud van het lichaam met de volgende h2-header:
Het sap
Werk vervolgens de tekening als volgt bij:
Kop 2-lettertype: Lato
Kop 2-tekstgrootte: 80px
Kop 2 Letterafstand: -5px
Marge: -50px bovenaan, -40px onderaan
Z-index: -1
Door de aangepaste marge en de z-index kan de tekst achter de afbeelding komen te staan die we in de volgende stap zullen toevoegen.
Voeg afbeelding toe
Voeg onder de tekstmodule met de titel in kolom 1 een afbeeldingsmodule toe. Upload vervolgens een afbeelding met een transparante achtergrond. Ik gebruik een afbeelding uit het Juice Shop Layout Pack van 240 bij 300 pixels.
Pas de uitlijning van de afbeelding naar het midden aan.
Een call-to-action toevoegen in kolom 2
Voeg in de kolom 2 een oproep toe aan de actiemodule.
Voeg een knoplink-URL toe om te controleren of de knop wordt weergegeven.
Achtergrond en stijl van de CTA-achtergrond
Werk vervolgens de volgende ontwerpparameters bij:
Achtergrondkleur: #ffffff
Tekstkleur:
title Font: Lato
Titelgewichtbeleid: zwaar
Titel Fontstijl: TT
titel Tekstgrootte: 18px
Stileer de CTA-knop
Werk het knopontwerp als volgt bij:
Knoptekstkleur: #ffffff
Achtergrondkleur knop: # e09900
Knop Randbreedte: 0 px
De CTA-rand stylen
Voeg vervolgens een rand toe om de module als volgt te kadreren:
Breedte van de rand: 10px
Kleur van rand: rgba (224,145,0,0.25)
Hovereffect voor scheidingshoogte toegevoegd om call-to-action te onthullen
Nu is het tijd om het zweefeffect voor de hoogte van de sectie-indeling toe te voegen om de oproep tot actie te onthullen. Om dit te doen, moeten we eerst onze sectieverdelers maken.
Het bovenste scheidingsteken toevoegen
Open de sectieparameters en het bovenste scheidingsteken met de volgende parameters.
Stijl bovenverdeler: zie screenshot Kleur bovenverdeler: # 73ba57 Hoogte bovenverdeler: 70% (standaard), 0% (zweefde)
Flip top divider: horizontaal
Merk op dat de hoogte van het scheidingsteken begint met een standaardhoogte van 70% en bij het kantelen naar een hoogte van 0% gaat.
Toevoeging van de onderste verdeler
Voeg vervolgens een lager scheidingsteken toe vergelijkbaar met de sectie met de volgende parameters.
Stijl bovenverdeler: zie screenshot Kleur bovenverdeler: # 73ba57 Hoogte bovenverdeler: 70% (standaard), 0% (zweefde)
Flip top divider: horizontaal
Dividerindeling: bovenaan de sectie Inhoud
Deze achtergrondscheidingsteken begint ook met een hoogte van 70% die bij zweven verandert in 0%. Omdat de lay-outoptie voor het scheidingsteken echter boven aan de inhoud is ingesteld, verbergt het sectiescheidingsteken het onderste deel van de call-to-action in kolom 1. Vervolgens, bij zweven, wordt de rest van de oproep tot actie wordt onthuld.
Bekijk het resultaat tot nu toe.
Een box-schaduweffect toegevoegd voor een unieke overgang en ontwerp
Voor een unieke zweefovergang en ontwerp kunnen we een box-shadow-hover-effect toevoegen dat gelijktijdig plaatsvindt met het hover-effect van de verdelerhoogte. Om dit te doen, voegt u de schaduw van het volgende vak toe aan de sectie.
Box Shadow: zie screenshot
Box Shadow Horizontal Position: 0px
Box Shadow Vertical Position: 0px
Box Shadow Spread Force: 0px (standaard), 150px (hover)
Doosschaduwkleur: #73ba57
Vertraag de duur van de overgang
Laten we voor een laatste stap de duur van de overgang vertragen.
Duur van de overgang: 700ms
Eindresultaat
Hier is het eindresultaat op het bureaublad.
Op basis van wat we hierboven hebben gedaan, kunt u de weergave op mobiel en tablet aanpassen.
Final gedachten
Ik hoop dat deze tutorial je wat inspiratie heeft gegeven om unieke zweefeffecten voor de hoogte van de sectieverdeler te maken om inhoud te onthullen. Het aanpassen van de hoogte van de zwevende scheidingswand kan zelfs een opmerkelijk ontwerpelement zijn. En de ontwerpvoorbeelden zouden u moeten helpen bij het starten van uw eigen verkenning en uw eigen ontwerpen.
Ik hoop van je te horen in de comments.
Voor je gezondheid!
