Hoe maak je sticky sidebar widgets in WordPress

Wil je dat de widgets in de sidebar op jouw WordPress website meebewegen wanneer een bezoeker naar beneden scrolt?

Het is een handige functie die ook wel “Sticky Widgets” of “floating sidebar” genoemd wordt en waarmee je ervoor kunt zorgen dat je lezer nooit een lege sidebar te zien krijgt.

Doordat de bezoeker altijd een sidebar in beeld heeft wordt er vaker op een element in de sidebar geklikt.

Scrol in dit artikel gerust naar beneden en blijf de sidebar in de gaten houden om te bekijken wat ik precies bedoel.

In dit artikel zal ik je uitleggen hoe je dit ook op jouw website voor elkaar kunt krijgen.

Q2W3 Fixed Widget (Sticky Widget)

Q2W3 fixed widget (Sticky Sidebar)

Met behulp van de plugin Q2W3 Fixed Widget (Sticky Widget) kun je het voor elkaar krijgen om een meebewegende sidebar te maken.

In de video hieronder kun je over mijn schouder meekijken hoe de plugin werkt.

Abonneer je op mijn YouTube kanaal

Wil je liever de tekstuitleg of meer informatie, dan kun je hieronder verder lezen.

Wanneer je de plugin geïnstalleerd en geactiveerd hebt zal je een extra optie “Fixed Widget” bij alle widgets te zien krijgen.

Fixed widget optie

Het enige wat je eigenlijk hoeft te doen is bij deze optie gewoon een vinkje zetten en de widget opslaan. Ga vervolgens naar de voorkant van je website en scrol naar beneden. Je zal zien dat de widgets in de sidebar meebewegen.

Tip: Selecteer alleen de onderste widgets. Indien je voor de bovenste widget en deze optie niet aanzet voor de widgets eronder, dan overlapt de bovenste widget de overige widgets bij het scrollen.

Naast dat je kunt instellen welke widgets mee moeten bewegen in de sidebar kun je bij “Weergave -> Fixed Widget Options” nog een aantal andere dingen instellen.

Sticky Widget instellingen

Je kunt onder andere aangeven hoeveel ruimte (margin) er tussen de top en footer van je website moet zitten, aangeven of de plugin niet zijn werk hoeft te doen bij smartphones en tablets, en nog een aantal dingen meer.

Wat als Q2W3 Fixed Widget niet werkt?

Bij de meeste WordPress thema’s zal Q2W3 Fixed Widget geen problemen opleveren en gewoon goed werken. Het komt helaas weleens voor dat de plugin niet bij thema werkt en dit kan verschillende oorzaken hebben. Dit zijn de vereisten om het te laten werken:

  • jQuery versie 1.7 is minimaal vereist. jQuery 1.8.3 of hoger is aanbevolen;
  • Er mogen geen JavaScript fouten zijn (kan veroorzaakt worden door andere plugin);
  • Het thema moet gebruikmaken van wp_head () en wp_footer ().

Verder moeten alle widgets ook een unieke ID hebben. Dit probleem wordt in de meeste gevallen verholpen (sinds versie 4.0.4) dankzij de optie “Auto fix widget id” die standaard aanstaat.

Wat zijn de voordelen van een sticky widget plugin?

Er zijn meerdere voordelen te verzinnen om gebruik te maken van een sticky widget plugin. Zo zal bij lange artikelen normaliter niemand meer de sidebar van je website zien aan het einde van het artikel. Met deze plugin kun je er echter voor zorgen dat de sidebar wel altijd zichtbaar is.

Doordat bepaalde widgets in de sidebar altijd zichtbaar zijn kun je het perfect gebruiken om meer nieuwsbrief inschrijvingen te krijgen, je beste artikelen in het zicht te houden of een advertentie altijd zichtbaar te houden.

Ik hoop dat dit artikel je geholpen heeft met het implementeren van meebewegende sidebar widgets op je WordPress website. Wanneer je nog vragen hebt kun je deze hieronder in de reacties stellen.

9 reacties Voeg ook een reactie toe

    • Ik denk dat je het ondertussen uitgezet hebt? Het is moeilijk te zeggen waarom het van de een op de andere dag opeens niet werkt. Wellicht in combinatie met een andere plugin die je toevallig die dag hebt geïnstalleerd of iets dergelijks?

  1. Hoi, een prima uitleg. Ik heb het goed kunnen installeren en het werkt. Alleen is de lettergrootte en de regelafstand in de sidebar te groot.
    Ik zou graag een een widget hebben zoals jij hebt bij Handleidingen. Hoe kan ik dat voor elkaar maken?

    • Wanneer de lettergrootte en regelafstand te groot zijn, dan zal je waarschijnlijk CSS aanpassingen moeten doen om hetzelfde te bereiken.

      Ik heb in de sidebar gewoon een lijstje gemaakt met (ul en li). Wanneer je niet precies weet hoe dit moet kun je deze in een bericht of pagina maken, naar de tekst editor gaan om de code te kopiëren en het weer in een widget te plakken.

  2. Werkt inderdaad erg goed! Ik was een ander artikel van je aan het lezen en toen viel het al op. Daarna ben ik gelijk even op je site gaan neuzen hoe die plug-in heet, omdat ik ervan uit ging dat je er wel iets over zou schrijven. Te gek hoor ik ga hem ook testen 🙂

  3. Opnieuw een erg handige tip! Hopelijk werkt het ook bij mijn theme, ik ben benieuwd.
    Niet alleen handig voor jezelf, maar ook voor je bezoekers! Zo hebben ze inderdaad nog iets te lezen zonder dat ze helemaal naar boven moeten scrollen.

    • Klopt en het is ook niet storend voor je bezoekers omdat de sidebar gewoon stil lijkt te staan. Ik heb ook weleens op een website gezien dat de sidebar haperend meebeweegt wat erg irritant is als het je eenmaal opvalt.

Geef een reactie