Wat is een Sticky Sidebar en hoe stel je dit in?

Een sticky sidebar is een sidebar die blijft staan terwijl je scrollt. Een sticky sidebar stel je in als je content langer is dan de sidebar. De sidebar blijft dan altijd naast de content staan terwijl je scrollt. In plaats van de hele sidebar, kun je ook alleen bepaalde widgets van de sidebar sticky maken. Zoals social media buttons, contactgegevens of een inschrijfformulier voor een nieuwsbrief. Nu je weet wat een sticky sidebar is, ga ik je uitleggen hoe je een Sticky Sidebar voor een blogpagina instelt met behulp van Elementor Pro.

Een Sticky Sidebar instellen

Wanneer je gebruikt maakt van Elementor Pro, kun je een template aanmaken voor je blogpagina. In dit voorbeeld maken we een blogpagina met sidebar. Deze gaan we sticky maken.

Je kunt op twee manieren een sidebar toevoegen naast je blogartikel:

1) Sidebar inladen vanuit WordPress

Zoek de Sidebar widget en voeg deze toe aan de kolom waar je de sidebar wilt weergeven.

Kies welke sidebar je wilt tonen ( je kunt deze sidebar aanpassen via WordPress via ‘Weergave –> Widgets’).

Let op: als je op deze manier de sidebar inlaadt, kun je met Elementor alleen de hele sidebar sticky maken (dus niet de afzonderlijke elementen). Overigens zijn er wel plugins waarmee je dit wel mogelijk kunt maken, maar in dit artikel laten we je zien hoe je dit doet met Elementor. Hier gaan we straks verder op in.

Sidebar bouwen in kolom

Een andere manier om een sidebar te maken is door zelf losse widgets toe te voegen aan de kolom. Voeg bijvoorbeeld een zoekformulier, laatste artikelen en een inschrijfformulier voor de nieuwsbrief toe.

De sidebar of widgets sticky maken

Nu je sidebar is geplaatst, kun je de sidebar stick maken.

De hele sidebar sticky maken

Wanneer je een sidebar hebt ingeladen als widget, klik je op het het bewerk icoon om de widget te bewerken.

Ga naar het ‘Geavanceerd’ –> ‘Scrolling effect’. Je kunt hier instellen op welke manier je de sidebar sticky wilt maken.

Offset
Als je ook gebruikt maakt van een sticky header, moet je bij ‘offset’ de afstand (ten op zichte van de bovenkant van je scherm) invoeren in pixels. Bijvoorbeeld 120.

Stay in column
Zet ook de optie ‘Stay in column’ aan. Als je dit niet doet, blijft de widget (sidebar) ook sticky wanneer iemand helemaal naar beneden scrollt (voorbij de content van je blog of artikel). Dan valt de sidebar over de footer. Dat is niet zo mooi.

Enkele widget sticky maken

Wil je niet de hele sidebar, maar alleen één widget sticky maken? Dan bewerk je die widget en ga je op dezelfde manier als beschreven hierboven.

Je loopt hier alleen wel tegen een probleem aan: een widget is soms niet compleet zonder andere widgets. Denk aan een titel boven het contactformulier, hiervoor moet je 2 aparte widgets invoegen. Hoe maak je deze samen sticky?

Inschrijfformulier + titel sticky maken

Om het inschrijfformulier inclusief de titel sticky te maken, kun je dit als volgt doen:

• Voeg de widget ‘Inner section’  toe in de kolom (en verwijder 1 kolom. Zorg dat er 1 kolom blijft.)
• Verplaats het formulier en de titel naar de nieuwe sectie. Pas eventueel de achtergrondkleur van de sectie aan.
• Sla de nieuwe sectie op als template.

• Klik onderin op bijwerken. Laad de opnieuw de Elementor editor (de pagina die je aan het bewerken bent)
• Voeg het ‘Template’ widget toe aan de kolom
• Kies het template wat je zojuist hebt opgeslagen
• Maak de Template Widget sticky, zoals beschreven hierboven.

Stay in column alleen mogelijk met widgets

De ‘Stay in column’ optie werkt alleen als je widgets gebruikt. Wanneer je gebruik maakt van een inner section en je maakt deze sticky, dan werkt deze functie niet. Als je dus een hele sectie sticky in de kolom wilt maken, moet je het template opslaan en invoegen met de template widget.