Een aangepaste knop toevoegen aan WordPress

Een van de belangrijkste elementen op een landingspagina is de call-to-action (CTA)-knop. Dit is het element waarop bezoekers klikken om een bron te downloaden, zich aan te melden voor je e-maillijst of een consult in te plannen. Als je hem goed ontwerpt, stimuleert hij de conversies aanzienlijk — ontwerp je hem slecht, dan scrollen gebruikers er misschien zo langs voordat ze je pagina verlaten.

Uiteindelijk kan het weten hoe je een knop toevoegt in WordPress — een die opvalt tussen de generieke knoppen op andere pagina’s — het verschil maken tussen een nieuwe klant en een verloren klant. Maar dat is makkelijker gezegd dan gedaan. Hoewel WordPress aanpassingsmogelijkheden voor knoppen biedt in de Gutenberg-editor, zijn deze beperkt. Gebruikers raken vaak in de war door de verwarrende kleurinstellingen en het gebrek aan animatieopties. Als je je CTA-knop wat spannender wilt maken, kom je met de Gutenberg-editor niet ver. 

Om de beperkingen van WordPress-knoppen te omzeilen, heb je twee opties: Een zwaar blok of plug-in van derden installeren, of een gratis, lichtgewicht serverloze widget gebruiken die je paginasnelheid en themacode beschermt. Deze gids legt uit hoe elke optie werkt, zodat je kunt bepalen welke het beste is voor je website.

Watch on youtube

How to Add a Custom Button to Wordpress

Optie 1: Installeer een speciale WordPress-knopplug-in of gebruik aangepaste CSS

Als je leert hoe je WordPress gebruikt, grijp je misschien naar plug-ins van derden of CSS-code om knoppen aan te passen. Je vindt beschikbare plug-ins via het WordPress-beheerdashboard of voegt je eigen CSS toe met de WordPress-editor. 

Voordat je deze opties verkent, moet je rekening houden met mogelijke nadelen:

• Sommige plug-ins gebruiken overmatig veel JavaScript en CSS, wat de laadtijden van pagina’s kan vertragen en je Core Web Vitals-score kan schaden. 
• Ontwikkelaars houden plug-ins niet altijd up-to-date. Dit kan in de toekomst tot prestatieproblemen leiden. Het geeft je ook weer iets extra’s om in de gaten te houden.
• Onjuiste aangepaste CSS kan de huidige algemene knopinstellingen van je website overschrijven, wat invloed heeft op het uiterlijk van andere knoppen op je hele site. Het kan ook de mobiele responsiviteit van je site beïnvloeden.

Laten we beginnen met de makkelijkste optie: een plug-in van derden. Volg deze stappen om er een te vinden en te installeren op je site:

1. Klik op de optie Plugins in je WordPress-beheerdashboard. Typ de functie die je nodig hebt in de zoekbalk. In dit voorbeeld hebben we “custom CTA button WordPress” ingevoerd.

2. Kies een plug-in uit de lijst en klik erop om meer te weten te komen over de functies. De beste WordPress-plug-ins zijn up-to-date, compatibel met je WordPress-thema en hebben positieve gebruikersbeoordelingen. Klik op Nu installeren wanneer je een optie vindt die je bevalt.

3. Wanneer de plug-in klaar is met installeren, klik je op de knop Activeren. Volg de instructies van de ontwikkelaar om je aangepaste knop te maken. 

Als je handig bent met CSS, kun je je eigen aangepaste CTA-knop coderen. Volg daarvoor deze stappen:

1. Klik op Weergave > Editor in je WordPress-beheerdashboard. Als je een klassiek thema of een thema van derden gebruikt, klik je op Weergave > Aanpassen. 

2. Klik op Stijlen > ⋮ > Aanvullende CSS. Bij klassieke thema’s en thema’s van derden klik je op Aanvullende CSS.

3. Typ de aangepaste CSS-code van je knop in het tekstvak.

In plaats van je eigen knop te coderen, kun je een alternatief voor aangepaste CSS in WordPress proberen: de Jotform Knop-widget. We verkennen die optie in de volgende sectie.

Optie 2: Voeg een gratis, aanpasbare knop-widget toe (aanbevolen)

Met de Jotform Knop-widget kun je een CTA-knop maken met unieke kleurverlopen, pictogrammen en hover-effecten. Deze optie heeft geen invloed op de CSS van je site en vermindert de laadsnelheid niet, omdat hij werkt via een betrouwbare gehoste embed.

Om hem te gebruiken, configureer je je knop in Jotform en embed je de aangepaste knop in WordPress met een aangepast HTML-blok. Hij wordt direct bijgewerkt met een vlekkeloze, responsieve en zelfstandige knop die aan je eisen voldoet. Volg deze stappen om het uit te proberen:

1. Ga naar de Jotform Knop-widget en vul de basisinformatie over je knop in. Klik op Doorgaan.

2. Voeg kleuren, pictogrammen en andere stijlopties toe. Je kunt de hoekstijl, opvulling, tekstgrootte en lettertypen aanpassen, of een slagschaduw toevoegen voor extra nadruk. Klik op Doorgaan wanneer je klaar bent.

3. Bekijk en selecteer je lay-outopties en klik vervolgens op Gratis uitproberen op je website.

4. Volg de instructies om een gratis account bij Jotform aan te maken, kopieer vervolgens de embedcode en plak deze in een aangepast HTML-blok op je WordPress-website. Zorg ervoor dat je de pagina en de sectie kiest waar je de knop wilt laten verschijnen.

Jotforms gratis, no-code WordPress call-to-action-alternatief geeft je volledige controle over het uiterlijk en de functionaliteit van je knop. Of je nu tekst, kleuren en hoekradius wilt aanpassen of een hover-animatie wilt toevoegen, Jotform is er klaar voor. 

Geef je WordPress-site een boost met slimme, serverloze widgets

Jotform biedt veel meer dan aangepast knopontwerp. Doorzoek onze directory met gratis websitewidgets om andere tools te vinden die conversies maximaliseren, pagina-overbelasting elimineren en de database van je site lichtgewicht houden voor bliksemsnelle laadsnelheden. Een paar van onze meest geliefde widgets zijn

• Google Reviews Widget: Toont de Google-reviews van je merk volgens jouw voorkeuren
• Aftelklok Widget: Laat bezoekers zien hoeveel tijd ze nog hebben om een bepaalde actie uit te voeren, zoals aanmelden voor een evenement
• FAQ Widget: Biedt een doorzoekbare FAQ-tool met mediarijke antwoorden en aangepaste styling
• WordPress-formulieren: Hiermee kun je aangepaste formulieren maken en in je website embedden

Als maker, blogger of marketeer ligt je focus op het produceren van uitzonderlijke content en het optimaliseren van funnels, niet op het sleutelen aan CSS of plug-ins. Met Jotforms gratis, off-server tools zet je binnen enkele minuten premium, goed converterende functies in, zodat je je weer kunt richten op waar je het beste in bent. Ga vandaag nog aan de slag met Jotform.