Weet je niet zeker hoe je een terug-naar-boven-knop in WordPress toevoegt? Helaas bevatten de meeste WordPress-thema’s de knop niet standaard. Maar er zijn een paar methoden die je kunt gebruiken om de knop op je website te krijgen.
En het is de moeite waard. Als je website lange pagina’s bevat waar gebruikers ver weg scrollen van je navigatiemenu of call-to-action, kan het gebruikers helpen om met minimale inspanning terug te keren naar de hoofdfocus van de pagina.
De meest voorkomende manieren om een terug-naar-boven-knop in WordPress toe te voegen, zijn het gebruik van een plug-in, het toevoegen van aangepaste code of het insluiten van een no-code-widget. Plug-ins en ingesloten widgets vereisen geen programmeerkennis, dus zijn ze de voorkeursmethoden als je niet bekend bent met HTML, CSS of JavaScript. Met aangepaste code heb je volledige controle over je knop, maar het is geen geweldige oplossing voor beginners.
In deze gids verkennen we hoe je een terug-naar-boven-knop in WordPress toevoegt met behulp van deze methoden, plus de voor- en nadelen van elk.
Een terug-naar-boven-knop toevoegen met een WordPress-plug-in
WordPress biedt een verscheidenheid aan plug-ins om de functionaliteit van je website te verbeteren. In de directory vind je WordPress terug-naar-boven-plug-ins van meerdere ontwikkelaars — het is de meest voorkomende manier om de knop toe te voegen.
Beschikbare opties in een terug-naar-boven WordPress-plug-in
Veel van deze plug-ins bieden aanpassingsopties waarmee je de plaatsing van de knop en het ontwerp kunt kiezen. Bepaal bij het zoeken naar de juiste terug-naar-boven-knop-plug-in voor je website welke instellingen voor jou het belangrijkst zijn. Een paar om te overwegen zijn
- Knoppositie: Dit bepaalt waar de knop op je pagina verschijnt. Plug-ins kunnen je opties geven om de knop rechts, links of in het midden te plaatsen. Sommige bieden meer gedetailleerde controle.
- Pictogram of label: Plug-ins kunnen een enkel pictogram bieden of je een menu met opties geven om uit te kiezen. Sommige laten je ook de pictogramkleur aanpassen.
- Zichtbaarheid op mobiel of desktop: Knoppen kunnen anders worden weergegeven op pc en mobiele apparaten. Controleer de zichtbaarheidsopties van de plug-in om te begrijpen hoe ze zullen verschijnen.
- Soepel scrollen: Sommige knoppen bieden scrollopties in plaats van direct naar de bovenkant van de pagina te springen. Dit is handig als je wilt dat gebruikers meer controle hebben over de paginanavigatie.
- Scroll-offset of -drempel: Deze instelling bepaalt hoeveel ruimte er is tussen de elementen aan de bovenkant van de pagina en de scrollpositie. Idealiter verbergt het klikken op de terug-naar-boven-knop geen inhoud van menu’s of headers.
Sommige plug-ins bieden meer aanpassingsmogelijkheden dan andere. Hoewel je misschien geen terug-naar-boven-knop met veel stijlopties nodig hebt, mag de knop die je kiest niet misplaatst aanvoelen op je website. Je wilt dat deze netjes aansluit bij de andere elementen op de pagina.
Hoe je een terug-naar-boven-knop in WordPress toevoegt
Zodra je een plug-in selecteert die aan je behoeften voldoet, installeer je deze met behulp van deze stappen:
- Log in op het beheerdersdashboard van je website.
- Klik op Plug-ins.
- Zoek de plug-in in de WordPress Plug-in Directory. Je kunt het zoekvak gebruiken om de naam te typen.
- Klik op de plug-in.
- Klik op Installeren en activeren. (Als je een betaalde plug-in installeert, klik je op Kopen en activeren.)
Nadat je het programma hebt geïnstalleerd, ga je naar het menu Instellingen om het uiterlijk en het scrollgedrag van de terug-naar-boven-knop te configureren.
Populaire WordPress terug-naar-boven-plug-ins
Er zijn honderden plug-ins die een scroll-naar-boven-knop in WordPress toevoegen. Een paar opties zijn
- WPFront Scroll Top: Deze plug-in biedt tientallen vooraf gestileerde scroll-naar-boven-knoppen waaruit je kunt kiezen. Je kunt er ook de grootte, plaatsing en het scrollgedrag van de knop mee instellen.
- Smooth Scroll Page Up/Down Buttons: Als de pagina’s van je site lange documenten bevatten, kan deze plug-in helpen. Het biedt een WordPress-functie voor soepel scrollen naar boven, waarmee gebruikers tussen afzonderlijke tekstdocumenten of naar het begin van de pagina kunnen scrollen.
- Nicescrollr: Met deze plug-in kun je een terug-naar-boven-knop toevoegen en meerdere instellingen beheren, waaronder knopgrootte en scrollsnelheid.
Hoewel plug-ins eenvoudig te installeren zijn, voegen ze een nieuwe afhankelijkheid toe die je moet onderhouden. Het is belangrijk om op de hoogte te blijven van updates voor de plug-in, omdat deze beveiligingspatches kunnen introduceren.
Een terug-naar-boven-knop in WordPress toevoegen met aangepaste code
Een aangepaste terug-naar-boven-knop in WordPress geeft je volledige controle over het uiterlijk en gedrag ervan. Je zit niet vast aan de instellingsopties die een plug-in biedt en je kunt de knop aanpassen zodat deze perfect aan je eisen voldoet. Het is een solide alternatief voor wie een op maat gemaakt ontwerp wil of de paginabloat die plug-ins kunnen veroorzaken liever vermijdt.
Het maken van je eigen knop vereist echter expertise. Je moet vertrouwd zijn met het bewerken van WordPress-thema’s en ervaring hebben met aangepaste HTML, CSS of JavaScript.
Om je eigen knop te ontwikkelen, voeg je je code toe aan een aangepast HTML-blok, een themaaanpassingsgebied of een codefragment-workflow. Zodra deze op je site is geïmplementeerd, test je de nieuwe knop zorgvuldig om er zeker van te zijn dat deze geen bugs introduceert.
Voor- en nadelen van een aangepaste knop
Een op maat gemaakte terug-naar-boven-knop biedt veel flexibiliteit. Je kunt het pictogram en de kleur aanpassen zodat deze natuurlijk aansluiten bij je website, en je kunt de zichtbaarheid ervan aanpassen. Je kunt de knop bijvoorbeeld zo ontwerpen dat deze alleen verschijnt wanneer een gebruiker een bepaald punt op de pagina bereikt. Of je kunt een zwevende terug-naar-boven-knop in WordPress toevoegen die blijft zweven terwijl een gebruiker scrollt.
De belangrijkste nadelen van het maken van een aangepaste knop zijn de technische installatie en het testen. Het kost tijd om code te schrijven die aansluit bij je website en niet interfereert met het WordPress-thema.
Testen is ook essentieel voor de ontwikkeling van een aangepaste knop. Plan om de prestaties van de knop te testen op meerdere apparaten, waaronder pc’s, tablets en smartphones. Het is ook een goed idee om de knop op meerdere platforms uit te proberen, zoals iOS, Windows en Android.
Eenvoudigere no-code-methode: Gebruik de Back to Top Widget van Jotform
Er is een alternatief voor plug-ins en aangepaste knoppen: de Back to Top Widget van Jotform. Het is een no-code-oplossing die je binnen enkele minuten aan je website kunt toevoegen.
In tegenstelling tot plug-ins voegt onze Back to Top Widget geen paginabloat toe en vereist deze geen regelmatige updates. Er is absoluut geen programmering vereist en het heeft geen invloed op de functionaliteit van je WordPress-thema.
De Jotform Back to Top Widget is ook volledig aanpasbaar. Je kunt de pictogramstijl, kleuren, grootte en hoekradius aanpassen. Er zijn opties om de plaatsing en zichtbaarheid van de knop tijdens het scrollen te wijzigen. En het werkt op alle apparaten, inclusief mobiele schermen.
Hoe je de Jotform Back to Top Widget installeert
Het integreren van de widget in je website is eenvoudig. Begin met het navigeren naar onze Back to Top Widget-pagina en volg daarna deze stappen:
- Geef je widget een naam door het veld “Naamloos” in de werkbalk te bewerken.
- Voer je gewenste positie- en scrollinstellingen in en klik vervolgens op Doorgaan.
- Knoppositie: Kies Links of Rechts.
- Label tonen: Schakel in of uit. Voer de tekst in die je op de knop wilt weergeven.
- Tonen na scrollen: Gebruik de schuifregelaar om aan te geven hoeveel pixels de gebruiker moet scrollen voordat de knop verschijnt.
- Scrollanimatie: Selecteer Soepel of Direct.
- Voer je stijlvoorkeuren voor de knop in en klik op Doorgaan.
- Knopgrootte: Gebruik de schuifregelaar om de breedte en hoogte van de knop in te stellen.
- Pictogramgrootte: Gebruik de schuifregelaar om de grootte van het pijlpictogram in te stellen.
- Pictogram: Kies een pijlpictogramstijl voor de knop (Pijl omhoog, Chevron omhoog of Vette pijl omhoog).
- Hoekradius: Selecteer Vierkante hoeken, Afgeronde hoeken of Ronde hoeken.
- Knopkleuren: Voer je gewenste hexkleurcode in voor de achtergrond- en tekstkleur.
- Slagschaduw: Schakel een zachte schaduw onder de knop in of uit.
- Stel de weergaveregels in en klik op Probeer het gratis uit op je website.
- Afstand tot onderkant: Gebruik de schuifregelaar om te bepalen hoe ver de knop van de onderrand staat.
- Afstand tot zijkant: Gebruik de schuifregelaar om te bepalen hoe ver de knop van de zijrand staat.
- Tonen op desktop: In- of uitschakelen.
- Tonen op mobiel: In- of uitschakelen.
- Kopieer de insluitcode en plak deze in je WordPress HTML-editor.
Tijdens het aanpassen van de knop kun je op het pc- of smartphonepictogram in de rechteronderhoek klikken om te zien hoe deze eruit komt te zien.
Voordelen van het gebruik van Jotform-tools op je WordPress-website
Of je nu een ervaren webdesigner bent of net leert hoe je WordPress gebruikt, Jotform heeft tal van handige tools die je website ondersteunen.
We bieden verschillende gratis Website Widgets die je kunt aanpassen om de recensies van je organisatie van externe sites weer te geven, waaronder Google, Facebook en Tripadvisor — perfect voor website-eigenaren die testimonials willen tonen maar terughoudend zijn om zich vast te leggen op de betaalde plug-in-tools die via WordPress beschikbaar zijn.
Je kunt ook profiteren van de aangepaste WordPress-formulierinsluit-plug-in van Jotform. Hiermee kun je formulierinzendingen verzamelen van gebruikers die je site bezoeken. We bieden meer dan 20.000 gratis aangepaste WordPress-formuliersjablonen die veelvoorkomende gebruikssituaties dekken, waaronder contactgegevens, betalingsgegevens en aanmeldingen. Je kunt je formulier in WordPress insluiten met slechts enkele stappen.
Het beste van alles is dat Jotform een gratis abonnement biedt dat onbeperkte WordPress-widgets en maximaal vijf formulieren ondersteunt. Door te upgraden naar een betaald abonnement verhoog je het aantal formulieren dat je kunt gebruiken, verwijder je de Jotform-branding en krijg je extra opslagruimte.
Voeg een terug-naar-boven-knop toe zonder je WordPress-workflow te vertragen
Een terug-naar-boven-knop verbetert de gebruikerservaring bij het scrollen door lange content. Het ondersteunt ook betrokkenheid en conversies op e-commercepagina’s en landingspagina’s. Maar hoewel het toevoegen van een knop mogelijk is met plug-ins of aangepaste code, is de eenvoudigste no-code-oplossing de widget van Jotform.
Om te zien hoe de Back to Top Widget van Jotform een verzorgde scroll-naar-boven-knop toevoegt aan je WordPress-site, probeer het vandaag nog uit.
Veelgestelde vragen over WordPress terug-naar-boven-knoppen
Er zijn verschillende plug-ins in de WordPress Directory die terug-naar-boven-knoppen ondersteunen. Deze tools bieden aanpassingsopties en vereisen geen programmering. Als je echter de paginabloat wilt minimaliseren en meer controle over de functionaliteit van de knop wilt hebben, kan het coderen van je eigen terug-knop een betere optie zijn. En voor een eenvoudiger alternatief kun je de Back to Top Widget van Jotform gebruiken, die geen programmeerervaring of doorlopend onderhoud vereist.
Om een terug-naar-boven-knop te maken in WordPress Elementor, open je je pagina in de Elementor-editor. Voeg een CSS-ID toe bovenaan de pagina en voeg vervolgens een Button-widget in. Koppel de knop aan de CSS-ID via het tabblad Content. Je kunt het uiterlijk van de knop aanpassen op het tabblad Style.
Dit artikel is bedoeld voor WordPress-website-eigenaren, contentmanagers, kleine bedrijfsteams, webdesigners en iedereen die een aanpasbare terug-naar-boven-knop wil toevoegen aan lange WordPress-pagina’s zonder de prestaties of workflow van de site te verstoren.
Verstuur Opmerking: