Create Sticky Sections In Elementor Pro

Leer hoe u secties in Elementor Pro kunt verbergen en ze kunt laten verschijnen wanneer de bezoeker door uw website scrolt. Erg handig voor headers of call-to-actions bovenaan je pagina.

We zullen gebruik maken van CSS-codes om het uiteindelijke resultaat te krijgen. Eerst zullen we een tweede header maken in Elementor Pro, deze optimaliseren voor alle apparaten en deze vervolgens plakkerig maken. Daarna zullen we de sectie een CCS-klasse geven, zodat we de sectie CSS-stijlen kunnen geven wanneer deze scrolt.

We zullen een CSS-code kopiëren die de koptekst verbergt wanneer de bezoeker niet scrolt en deze toont wanneer de bezoeker begint te scrollen. We zullen ook een animatie in de CSS-code toevoegen om deze een mooie overgang te geven wanneer deze verschijnt.

Overzicht met tijdstempels:
00:00 Intro
01:17 De toewijzing van de huidige kop ongedaan maken
02:10 Maak een nieuwe header-sjabloon in Elementor Pro
02:43 Maak de scroll-header
04:40 Maak de kop plakkerig
05:10 Weergavevoorwaarden toevoegen
06:39 Creëer wat structuur met de Elementor Navigator
07:02 Laat de tweede kop verdwijnen
09:09 Gebruik negatieve marge in Elementor Pro
10:14 Gebruik de effectoffset
11:58 Maak een plakkerige sectie halverwege een pagina

Powered by BetterDocs

Geef een reactie

Your email address will not be published.