Een back to top button, ook wel scrol naar boven knop genoemd in het Nederlands, is een eenvoudige manier om de gebruikerservaring op je website te verbeteren.
Er zijn namelijk bezoekers die het super fijn vinden om direct weer naar boven te kunnen richting het menu zonder zelf terug te hoeven scrollen.
Er bestaan WordPress thema’s, Astra bijvoorbeeld, waarbij de back to top functionaliteit eenvoudig ingeschakeld kan worden. Er bestaan echter ook genoeg thema’s waar dit niet bij kan.
Wanneer je een WordPress thema gebruikt die deze functionaliteit niet heeft, kun je als je Elementor gebruikt vrij eenvoudig een back to top button maken. In dit artikel zal ik je vertellen hoe je dit kunt doen met de gratis of pro versie van Elementor.
Inhoudsopgave: Elementor back to top button
Video: Back to top knop maken met Elementor
In onderstaande video kun je over mijn schouder meekijken hoe ik stap voor stap een back to top knop integreer in pagina’s die gemaakt zijn in Elementor.
Het is zowel mogelijk met de gratis versie van Elementor als de betaalde Elementor pro versie.
Wil je de uitleg liever in tekstvorm lezen? Dat is geen enkel probleem. Lees hieronder op je gemak verder.
Back to top button maken in Elementor zonder extra plugin
Een ‘back to top’ knop is een simpele handige functionaliteit die je aan je website kunt toevoegen. Meer handige functionaliteiten kun je ook zien in de Elementor handleiding. Hieronder zal ik je laten zien hoe je dit zonder extra plugin kunt instellen met behulp van Elementor.
Het nadeel van de methode die ik hieronder ga beschrijven is dat je met de gratis versie van Elementor dit per pagina zal moeten instellen. Heb je echter Elementor Pro, wat nog veel meer handige functies heeft, dan hoef je het maar eenmalig in te stellen met behulp van de thema bouwer.
In dit artikel ga ik het op een pagina zelf instellen. Open dus een lange pagina van je website waarbij je een back to top button wil maken. Klik vervolgens op de sectie die de top van je pagina aangeeft.
Wanneer je dit gedaan hebt verschijnen er aan de linkerzijde opties. Ga hier naar Geavanceerd en vul een CSS ID in. Zelf vul ik altijd simpelweg ’top’ in, maar het mag van alles zijn.
We kunnen nu onderaan de pagina een nieuw element toevoegen. Eigenlijk maakt de precieze locatie niet uit, aangezien we dit nog op een speciale manier gaan aanpassen.
Je kunt hier voor een pictogram (icoon) of knop (button) kiezen. Het verschil tussen beide? Bij een knop kun je eventueel ook nog tekst toevoegen.
Eenmaal een pictogram of knop toegevoegd kun je een pictogram uitkiezen die je wil gebruiken als back to top button. Bij Link is het ook heel belangrijk om de CSS ID in te vullen die je hebt gekozen met daarvoor een #. Aangezien mijn CSS ID top is, heb ik hier #top ingevuld.
Wanneer je nu op jouw back to top knop klikt, zal je zien dat het al werkt en je naar de top van je website wordt gebracht. Eventueel kun je bij de optie Stijl ook nog de kleur en grootte aanpassen van je pictogram.
Heb je alles naar wens ingesteld? Mooi, dan gaan we nu de locatie aanpassen.
Locatie back to top button aanpassen
Op dit moment zal de scrol naar boven knop er ongeveer als volgt uitzien op je website.
Dit is natuurlijk niet de bedoeling. Je wil dat de knop meebeweegt tijdens het scrollen naar beneden en altijd zichtbaar blijft, in plaats van alleen helemaal onderaan de pagina.
Om dit te wijzigen gaan we naar het geavanceerde gedeelte van het pictogram of knop element.
Je kunt de opties dan als volgt instellen:
- Bij Breedte gaan we voor de optie ‘Inline (auto), zodat we niet meer de volledige breedte op de website nodig hebben.
- De optie Positie kun je van standaard aanpassen naar ‘Vast’.
- Horizontale oriëntatie kun je van links aanpassen naar ‘rechts’. De uitlijning kun je op 20 pixels zetten (of wat je zelf wil), zodat het niet helemaal in de hoek van het scherm staat.
- Verticale oriëntatie kun je van boven aanpassen naar ‘onder’. De uitlijning kun je wederom op 20 pixels zetten om het uit de hoek van je scherm te krijgen.
De back to top knop zal nu altijd netjes rechts onderin het scherm staan.
Controleer ook altijd of alles goed staat voor tablet en mobiel. Elementor heeft hier een handige responsive modus voor waar je kunt komen via een knop linksonder op de pagina.
Indien iets niet goed staat kun je met de instellingen spelen voor het desbetreffende apparaat, zodat het daar ook goed op wordt weergegeven.
Back to top knop later laten verschijnen
De manier waarop alles ingesteld staat, zal ervoor zorgen dat de knop altijd direct zichtbaar is. Dit kun je best gek vinden, want dan is de knop ook al zichtbaar wanneer het eigenlijk nog geen functie heeft.
Je kunt hier een trucje voor gebruiken. Wanneer je bij de geavanceerde instellingen bent van je pictogram of knop, kun je naar Bewegingseffecten gaan.
Hier kun je bij Inkomende animatie kiezen voor ‘Fade in’. De animatieduur kun je gewoon op normaal laten staan.
Tot slot hebben we dan ook nog de optie Vertraging animatie (ms). Dit is de optie die ons goed helpt. We kunnen hier bijvoorbeeld een vertraging van 2000 milliseconden invoeren, zodat de back to top button pas na 2 seconden zichtbaar wordt. Uiteraard kun je dit cijfer naar wens aanpassen.
Je geeft op deze manier de bezoeker al de mogelijkheid om te scrollen door je website voordat het zichtbaar wordt, waardoor de knop nuttiger lijkt voor je bezoeker.
Hieronder beschrijf ik ook nog hoe je dit allemaal iets eenvoudiger en minder vaak met Elementor Pro kunt doen. Overweeg je Elementor Pro te kopen? Bekijk dan het artikel Elementor pro kopen: Is het de moeite waard?
Back to top button in Elementor Pro
Wil je een back to top button maken en heb je Elementor Pro? Je hoeft dan niet op alle pagina’s zelf de knop toe te voegen.
Je kunt namelijk prima de thema bouwer van Elementor Pro gebruiken om dit in te stellen.
Het is in dit geval wel belangrijk dat je de templates in de thema bouwer al gebruikt, want anders zal het design van je website veranderen als je een template kiest. Zo kun je als je een Header hebt hier een CSS ID meegeven zoals ik eerder hierboven beschreven heb. Vervolgens zou je in de Footer je back to top button kunnen maken.
Wanneer je de back to top enkel op berichten of pagina’s wil hebben staan, kun je ‘Single post’ of ‘Single Page’ aanpassen en dezelfde stappen doorlopen als in de handleiding hierboven. Mocht je overigens nog op zoek zijn naar mooie templates (designs) voor je pagina’s, bekijk dan zeker ook het Elementor Templates artikel.
Het werkt dus precies hetzelfde als in de gratis variant, maar je hoeft het op deze manier nooit op iedere pagina van je website door te voeren.
Is er een alternatief?
Het doel van een back to top button is om bezoekers weer bovenaan je website te krijgen. Natuurlijk gaan deze bezoekers niet opnieuw je artikel lezen. Een bezoeker wil eerder richting je menu om verder te navigeren door je website.
In plaats van een back to top button kun je daarom ook overwegen om te gaan voor een sticky header in Elementor. Je header blijft dan bovenaan de pagina plakken, waardoor je altijd bij het menu terecht kan komen. Ben je benieuwd hoe je dit kunt realiseren, bekijk dan het artikel ‘Hoe je een sticky header in elementor kunt maken‘.
