Hoe maak je elementen sticky op je pagina met Elementor? Met Elementor Pro kun je bijna alle sticky maken op je pagina. Denk aan de header, sidebars, social media buttons etc. Zo gebruiken wij op onze website ook sticky effects op onze blogpagina (zie voorbeeld van de nieuwsbrief in de sidebar (alleen op desktop). In dit artikel leg ik je uit hoe dit precies werkt voor secties, kolommen en widgets.
Het sticky effect toepassen
Je kunt het sticky effect toepassen voor sectie en widgets. Binnen een sectie gebruik je vaak meerdere content elementen (widgets). Denk bijvoorbeeld aan een header waarin je een menu, logo en eventueel contactgegevens plaatst. Als je de complete header sticky wilt maken, doe je dit via de sectie waarin je alle elementen hebt geplaatst. Wil je alleen een los element (widget) sticky maken op een pagina? Denk bijvoorbeeld aan een button, afbeelding of contactformulier. Dan werkt het op dezelfde manier.
- Klik op de rechtermuisknop om de sectie (of widget) te bewerken
- Ga naar tabblad ‘Geavanceerd’ en open de tab ‘Bewegingseffecten’
- Zet ‘sticky’ op ‘Top’ (blijft bovenaan vastplakken) of ‘Bottom’ (blijft onderaan vastplakken)
Offset instellen
De offset geeft aan hoeveel marge er moet zitten tussen de bovenkant van je pagina (als je kiest voor Sticky top) of onderkant (sticky bottom). Dit stel je met name in als je meerdere elementen op de pagina sticky maakt. Denk bijvoorbeeld aan een header en sticky sidebar. Als je de offset niet instelt voor de sidebar dan valt deze of over de header óf onder de header (afhankelijk van hoe je de z-index hebt ingesteld). Het is dat geval handig om de offset in te stellen.
Effects offset
Hier geef je het aantal pixels aan dat je websitebezoeker moet scrollen voordat het element sticky wordt. Deze optie werkt overigens alleen als je hiervoor custom CSS instelt. Dit kan er dan bijvoorbeeld zo uit zien:
selector.elementor-sticky--effects {background-color: rgba(133,130,255,0.5)!important;}
selector {transition: background-color 4s ease !important;}
selector.elementor-sticky--effects >.elementor-container {min-height: 80px;}
selector > .elementor-container {transition: min-height 1s ease !important;}
Stay in column
Als je een widget sticky maakt, dan heb je nog een extra optie: stay in column. Hiermee geef je aan dat de widget sticky moet blijven in de kolom waarin deze is geplaatst. Hiermee voorkom je bijvoorbeeld dat deze over andere content op de pagina loopt (zoals de footer). Als je dit niet wilt, zet je de optie ‘Stay in column’ aan.
