Wil je weten hoe je moet onthullen inhoud wanneer u over het sectiescheidingsteken beweegt Divi ?
Sectieverdelers blijven een ontwerpelement Divi populair. Er zijn veel stijlen van scheidingslijnen om uit te kiezen met handige opties die het gemakkelijk maken om unieke overgangen en achtergronden aan je pagina toe te voegen.
In deze zelfstudie gebruiken we sectieverdelers een beetje anders. Divi Hiermee kunt u de hoogte en indeling van elke scheidingswand aanpassen. Hierdoor kunnen we afscheiders boven bepaalde gebieden of de inhoud van de sectie.
Door de hover-optie voor de hoogte van het scheidingsteken te gebruiken, kunnen we unieke hover-effecten toevoegen die een inhoud gedeeltelijk verborgen. Dit werkt prima om de aandacht te vestigen op een bepaalde call-to-action of knop waarop mensen moeten klikken. bezoekers Klik.
overzicht
Download DIVI nu!!!
Maak een nieuwe pagina met Divi Builder
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Het Sectie Divider Hover-effect ontwerpen in Divi
De sectie en de lijn maken
Maak een normale sectie met een rij met twee kolommen.
Voordat u een module toevoegt, opent u de sectie-instellingen en werkt u het volgende bij:
Achtergrondverloop (links): #73ba57
Achtergrondverloop (rechts): #2a4c23
Breedte: 80%
Maximale breedte: 1px
Sectie-uitlijning: Midden
Sectietitel toevoegen
Om de sectietitel toe te voegen, maakt u een tekstmodule en voegt u de volgende tekst in:
<h2>The Juice</h2>
Werk het ontwerp vervolgens als volgt bij:
Lettertype: Lato
Tekstgrootte: 80px
Letterafstand: -5px
Marge: -50px (boven), -40px (onder)
Z-index: -1
De aangepaste marge en z-index zorgen ervoor dat de tekst achter de afbeelding blijft die we in de volgende stap zullen toevoegen.
Voeg afbeelding toe
Voeg onder de module Tekst met de titel in kolom 1 een module Afbeelding toe. Upload dan een afbeelding met een transparante achtergrond. We gebruiken een afbeelding uit het lay-outpakket Juice Shop 240 bij 300 pixels.
De aanpassing van de uitlijning van het beeld in het midden.
Voeg een "Call To Action"-module toe in kolom 2
Voeg in kolom 2 een Call To Action-module toe.
Voeg een knoplink-URL toe om ervoor te zorgen dat de knop wordt weergegeven.
CTA-achtergrond en titeltekststijl
Werk vervolgens de volgende ontwerpinstellingen bij:
Achtergrond: #ffffff
Tekstkleur: donker
Titel Lettertype: Lato
Titel Lettertypegewicht: Zwaar
Lettertype: TT
Titel tekstgrootte: 18px
Pas de CTA-knop aan
Werk het knopontwerp als volgt bij:
- Gebruik aangepaste stijlen voor knop: JA
- Tekstkleur knop: #ffffff
- Achtergrondkleur knop: #73ba57
- Randbreedte: 0px
Pas de rand van de CTA-module aan
Voeg vervolgens een rand toe om de module als volgt in te kaderen:
Randbreedte: 10px
Randkleur: rgba (115,186,87,0.15)
Het zweefeffect aan de splitter toegevoegd om de module "Call To Action" te onthullen
Nu is het tijd om het hover-effect toe te voegen aan de sectiescheiding om de "Call To Action" -module te onthullen. Om dit te doen, moeten we eerst onze sectieverdelers maken.
Lees ook: Divi: inhoud onthullen wanneer u over tabbladen beweegt
Het bovenste scheidingsteken toevoegen
Open de sectieparameters en het bovenste scheidingsteken met de volgende parameters.
Top Divider-stijl: zie screenshot
Kleur bovenste verdeler: #73ba57
Hoogte scheidingswand: 70% (standaard), 0% (zweven)
Top Divider Flip: horizontaal
Houd er rekening mee dat de hoogte van het scheidingsteken begint met een standaardhoogte van 70% en vervolgens verandert in een hoogte van 0% bij zweven.
Bodemverdeler toegevoegd
Voeg vervolgens een lager scheidingsteken toe vergelijkbaar met de sectie met de volgende parameters.
- Bottom Divider Style: zie screenshot
- Kleur bodemverdeler: #73ba57
- Hoogte scheidingswand: 70% (standaard), 0% (zweven)
- Scheidingswand Flip: horizontaal
- Arrangement: bovenop sectie-inhoud
Deze onderste verdeler begint ook met een hoogte van 70% die bij zweven naar 0% daalt. Omdat de optie voor het splitsen van de indeling echter boven de inhoud is ingesteld, verbergt de sectiesplitser het onderste deel van de "Call To Action"-module in kolom 1. Vervolgens wordt bij zweven de rest van de module onthuld.
Bekijk het resultaat tot nu toe.
Download DIVI nu!!!
Box shadow hover-effect toegevoegd voor unieke overgang en ontwerp
Voor een unieke overgang en ontwerp bij het zweven, kunnen we een zwevend effect voor de schaduw van een doos toevoegen dat gelijktijdig met het zwevende effect van de splitter plaatsvindt. Voeg hiervoor de volgende boxschaduw toe aan de sectie.
- Box Shadow: zie screenshot
- Horizontale positie: 0px
- Verticale positie: 0px
- Box Shadow Spread Strength: 0px (standaard), 150px (hover)
- Schaduwkleur: #73ba57
Vertraag de duur van de overgang
Laten we voor een laatste stap de duur van de overgang vertragen.
Overgangsduur: 700 ms
Eindresultaat
Nu we alle stappen hebben doorlopen, gaan we het eindresultaat bekijken.
Download DIVI nu!!!
Conclusie
We hopen dat dit artikel je wat inspiratie heeft gegeven om unieke zweefeffecten voor sectiescheidingen te creëren om inhoud te onthullen.
In feite kan het aanpassen van de hover-splitter op zichzelf al een geweldig ontwerpelement zijn. Bovendien moeten de voorbeeldontwerpen u helpen uw eigen verkenning en ontwerpen te starten.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
