Home / WordPress / Hoe maak je sticky sidebar widgets in WordPress

Hoe maak je sticky sidebar widgets in WordPress

Sticky sidebar widgets maken 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.


WordPress Hulp Nodig? Join Het WP Lab

Het WordPress Lab Mockup

Heb je vragen aan de hand van dit artikel of wil je verder op weg geholpen worden met je website?

Sluit je aan bij Het WordPress lab, een community voor WordPress-liefhebbers waarin ik antwoord geef op jouw WordPress vragen en je toegang krijgt tot al mijn WordPress cursussen.

«
»

9 reacties op “Hoe maak je sticky sidebar widgets in WordPress”

  1. Frank avatar

    Sinds vandaag werkt de sticky sidebar van onze website niet meer. Hij gaat dwars door de teksten heen. De website werkt alleen niet in chrome. Zou u kunnen zeggen
    wat er fout gaat en of ik dit kan verhelpen.

    website: https://www.azboekingen-entertainment.com/

    1. Maikel van de Weerd avatar

      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?

  2. Astrid avatar
    Astrid

    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?

    1. Maikel van de Weerd avatar

      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.

  3. Sander avatar

    Top bedankt voor de tip, heb de plugin er gelijk op gezet

  4. Tessa avatar
    Tessa

    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 🙂

    1. Maikel van de Weerd avatar

      Haha, ik dacht ik schrijf er meteen iets over en zo te horen is dat ook al de verwachting. 😉

  5. Rosalinde avatar
    Rosalinde

    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.

    1. Maikel van de Weerd avatar

      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.