Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Secties en widgets sticky maken met Elementor

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.

Sticky effecten elementor

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

Sectie bewerken Elementor

  • Ga naar tabblad ‘Geavanceerd’ en open de tab ‘Bewegingseffecten’
  • Zet ‘sticky’ op ‘Top’ (blijft bovenaan vastplakken) of ‘Bottom’ (blijft onderaan vastplakken)

sectie sticky maken elementor

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.

Widgets sticky maken in kolom laten

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.