Divi: Hoe maak je een sticky footer met "Reveal" effect

Wil je een sticky footer maken met DIVI die volledig zichtbaar wordt als je naar beneden scrolt?

Een plakkerige voettekst toevoegen aan uw Site web net dat beetje extra kan geven waar je naar op zoek was Site web. Het "Onthullen"-effect, waardoor de voettekst zichtbaar wordt wanneer u naar beneden scrolt, geeft een zeer charmant ontwerp aan uw webpagina's.

Meestal vereist dit effect aangepaste CSS, die beperkend en moeilijk te gebruiken is. Maar dankzij DIVI kunt u dit eenvoudig bereiken.

In deze zelfstudie laten we u zien hoe u een Reveal-effect op uw plakkerige voettekst kunt maken. Het enige dat nodig is, zijn een paar eenvoudige stappen.

Laten we beginnen!

overzicht

Hier is een kort overzicht van de plakkerige voettekst met Reveal-effect die we in deze zelfstudie zullen maken.

Een nieuwe voettekstsjabloon maken

Bezoek Divi >> Themabouwer vanuit het WordPress-dashboard.

Daar, klik op "Voeg een globale voettekst toe"

Kies dan "Een wereldwijde voettekst bouwen"

In deze zelfstudie gebruiken we een vooraf gemaakte lay-out om het creatieproces te versnellen, maar je kunt het ook helemaal opnieuw doen. Klik hiervoor op "Laden uit bibliotheek".

Onder het pop-upvenster Laden uit bibliotheek, zoek en gebruik de lay-out " Marina Over pagina » uit het Marina-indelingspakket.

Nadat de lay-out is geladen, verwijdert u alle secties behalve de voettekst. We zullen dit voettekstgedeelte gebruiken om het Reveal-effect toe te voegen.

Voeg het Reveal-effect toe en maak de voettekst plakkerig

Voettekst plakkerig maken

Zie ook: Hoe maak je een schuif- en drukmenu in DIVI?

Eerst moeten we de voettekst plakkerig maken. Open hiervoor de sectie-instellingen en klik op het tabblad vergevorderd. Onder "Scroleffecten", wijzigt u de instellingen als volgt:

• Kleverige positie: blijf bij de bodem

Update Z-index voor plakkerige toestand

Vervolgens moeten we onze voettekstsectie een z-index van 0 geven wanneer de sectie zich in de plakkerige toestand bevindt. Hierdoor kan de sectie tijdens het scrollen achter andere secties of elementen in de hoofdtekst van de pagina blijven.

Om dit te doen, werkt u de Z Index-positie bij door op het plakkerige pictogram naast de Z Index-optie te klikken. Werk vervolgens de Z-index bij naar 0.

• Z-index (sticky): 0

Tijdelijke aanduiding voor plakkerige voettekst bijwerken Z-index

Wanneer een element een plakkerige positie krijgt toegewezen in Divi, wordt ook automatisch een duplicaat placeholder-element gemaakt. Dit biedt de functionaliteit die nodig is om plakkerige elementen te positioneren en te ontwerpen met Divi Builder. 

Zie ook: Een globale kop maken met Divi's Theme Builder

In dit geval wordt een tijdelijke aanduiding voor een voettekstgedeelte gemaakt met een standaard z-index van 1. We willen niet dat onze daadwerkelijke plakkerige voettekstsectie (nu met een Z-index van 0) achter de tijdelijke aanduiding-sectie komt, dus we moeten de Z-index van de tijdelijke aanduiding op -1.

Om dit te doen, voegt u eerst als volgt een aangepaste CSS-klasse toe aan de voettekst:

• CSS-klasse: sticky-footer-reveal

Open vervolgens de pagina-instellingen via het instellingenmenu van de Themabouwer. 

Ga naar de " Geavanceerd " en voer de volgende CSS in het vak in: CSS aanpassen :

.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}

Hierdoor wordt het gedeelte met de tijdelijke aanduiding gedwongen om achter de plakkerige voettekst te blijven.

Wijzigingen opslaan

Als u klaar bent, slaat u de wijzigingen op die zijn aangebracht in de voettekstsjabloon.

Sla ook de Divi Theme Builder-wijzigingen op.

Eindresultaat

Om het eindresultaat te zien, bekijk een pagina en scroll.

Download DIVI nu!!!

Conclusie

In Divi kunt u een sticky voettekst toevoegen aan uw Site web vereist geen plug-in of ingewikkelde aangepaste CSS. Met behulp van de constructor thema's, kunt u eenvoudig een voettekstsjabloon maken met Onthullingseffect in een paar minuten. 

Hopelijk geeft dit je voettekstontwerp een subtiele boost met een aantrekkelijke interactie die de bezoekers zal waarderen. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden het commentaar gedeelte om het te bespreken.

Zie ook 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.

...