Sticky social media buttons maken met Elementor

Inhoud van dit artikel:

Sticky social media buttons op je website plaatsen? Je wilt bijvoorbeeld dat de social media deelknoppen zichtbaar blijven bij het scrollen. Dit maakt de kans groter dat je bezoeker gebruik maakt van deze knoppen. In dit artikel leg ik je uit hoe je de social media knoppen sticky maakt.

Social media deelknoppen toevoegen

Om te te beginnen voeg je eerst de social media knoppen toen aan de pagina of het single (blog) template. In dit artikel lees je hoe je social media buttons toevoegt.

Social media buttons sticky maken

Als je de deelknoppen hebt toegevoegd met behulp van de ‘Share buttons widget’, maak je de widget sticky. Dit werkt als volgt:

  • Ga naar het tabblad ‘Geavanceerd’
  • Open de tab ‘Bewegings effecten’

Je ziet in het voorbeeld hieronder dat de bewegingseffecten voor Sticky uit staan.

sticky social media buttons elementor

Top of bottom sticky

Je kunt vervolgens kiezen om de buttons ‘Top’ of ‘Bottom’ sticky te maken. Kies één van de twee en scroll de pagina heen en weer. Je ziet dat het sticky effect direct wordt toegepast.

sticky opties social media buttons elementor

Sticky in- of uitschakelen voor mobiel

Wil je de buttons liever niet sticky op mobiele apparaten? Dan kun je deze gewoon wegklikken in het vak ‘Sticky on’.

Offset instellen

Met de offset stel je in op welke hoogte (in px) op het beeldscherm de buttons sticky moeten zijn. Als je bijvoorbeeld de buttons ‘Top’ sticky maakt, dan wil je niet dat ze over de header vallen. Het is handig om hier dan de offset in te stellen, zodat de buttons onder de header sticky blijven.

Stay in column

Met de optie ‘Stay in column’ zorg je ervoor dat de social media buttons in dezelfde kolom blijven en dus niet over andere content op die pagina valt (bijvoorbeeld over de footer).

Stel de opties naar wens in en test of het werkt.

Sticky social media buttons maken in de sidebar? Dit werkt bijna op dezelfde manier. Check deze blog over een sticky sidebar maken.

2 reacties

  1. Goedendag, is het mogelijk om een eigen sticky te maken voor het menu, bijvoorbeeld met een CSS code?
    Ben benieuwd of dit kan.

    Met een beleefde groet.
    J. de Boer
    Overigens geeft u heel mooi en helder uitleg op uw website

Reacties zijn gesloten.

Deze vind je misschien ook interessant:

Header aanpassen in WordPress met Elementor in 6 stappen

Als ik ergens een hekel aan heb, dan is het geklooi met een header aanpassen in WordPress. Hoewel de meeste (betaalde) thema’s wel veel opties

Berichten op verschillende pagina’s plaatsen in WordPress

Om berichten op verschillende pagina’s te plaatsen, maken wij gebruik van Elementor Pro. Hiermee kun je alle berichten of pagina’s op verschillende pagina’s plaatsen binnen

Call to action block maken met Elementor

Een goede website heeft duidelijk call to actions (CTA) op de website staan. Met een call to action block stimuleer je de bezoeker om een