Hoe voeg je een knop toe in WordPress editor [tutorial]?

Waarom is WordPress button block zo belangrijk?

Navigatie op de website is belangrijk voor bezoekers en klanten. We willen ze van de ene subpagina naar de andere sturen. Hen door het hele winkelproces leiden. Daarom is het belangrijk om belangrijke links correct in de pagina-inhoud te plaatsen.

In principe hebben we 2 opties. Standaardlink of knop gebruiken. Er zijn verschillende meningen over wanneer de eerste of de latere optie moet worden gebruikt. Het is gebruikelijk dat er op één pagina meerdere acties mogelijk zijn. We moeten zeker weten welke actie primair is en welke secundair. We raden je aan om alleen een knop te gebruiken voor de primaire actie. Op die manier bereik je een grotere zichtbaarheid van deze primaire actie. Je vestigt de aandacht van bezoekers op deze actie. We kunnen het ook call-to-action-knop noemen. Maak niet te veel knoppen op één subpagina.

Wat zijn de belangrijkste knopfuncties?

• Knoppen kunnen de aandacht van bezoekers trekken - oproep tot actie
• Ze scheiden de inhoud van pagina's of berichten en maken deze leesbaarder
• Help met oriëntatie op de pagina. Veel bezoekers scannen de pagina alleen met hun ogen
• Bezoekers naar andere pagina's navigeren met hyperlinks

Er zijn veel parameters die het succes van een knop bepalen. Belangrijk is bijvoorbeeld de grootte, de plaatsing of de kleur van de knop. Het is noodzakelijk om de standaard UI- en UX-principes te volgen. Groene kleuren worden gebruikt voor knoppen met een positieve actie, bijvoorbeeld om iets te kopen. Rood is voor negatieve acties, bijvoorbeeld om je af te melden voor de nieuwsbrief. Correct ontworpen knoppen beïnvloeden op die manier direct de acties van bezoekers.

Knop toevoegen aan een pagina of bericht in WordPress

Situatie vóór WordPress 5

Het toevoegen van knoppen was behoorlijk ingewikkeld voordat WordPress Block editor werd uitgevonden. Omdat deze functie niet van nature in WordPress aanwezig was. Je kon een thema met Page Builder of een plugin van derden gebruiken. Shortcodes maken in dit geval knoppen.

In onze oudere WordPress thema's kun je een knop toevoegen met behulp van shortcodes in de visuele editor. Nadat je op Shortcode invoegen -> Knop hebt geklikt, kun je verschillende instellingen opgeven in het modale venster. Tekst, tekstkleur, kleur van de knop, url, uitlijning enzovoort. Dankzij deze geavanceerde instellingen kun je vrij eenvoudig en snel een knop toevoegen zonder enige programmering.

Hoe gebruik je een knoppenblok in de WordPress editor?

Dankzij WordPress 5 is er een tweede manier. Veel gemakkelijker. De visuele editor van WordPress bevat veel handige blokken. Om een knop op je website te maken kun je nu het WordPress Button blok in de editor gebruiken.

Stap-voor-stap handleiding voor het toevoegen van een knop in WordPress editor

1. Eerst moet je beslissen waar je de knop wilt invoegen
2. Knopblok kan op verschillende manieren worden toegevoegd:
- door te klikken op "+" in de bovenste balk of ergens in de block editor waar u Button block selecteert

- je kunt ook elk blok vinden met de zoekbalk, schrijf gewoon "knop".

- door "/" te typen, waardoor je toegang krijgt tot alle beschikbare blokken

3. Het aangemaakte Button-blok kan verder worden geconfigureerd

Knoptekst en URL-adres toevoegen

Zodra de WordPress Blokknop is gemaakt, kun je er tekst in typen. Onthoud dat het voor een call to action knop beter is om een korte tekst met een duidelijke boodschap te gebruiken. Je kunt tekst vet, cursief of onderstreept weergeven. Al deze wijzigingen kunnen worden gemaakt door in de werkbalk te klikken. Je kunt de knop ook uitlijnen of centreren.

Een knop verwijst meestal naar een andere pagina of externe website. Om die reden is er recht onder de knop een invoer om het URL-adres toe te voegen. Voordeel is dat je voor het toevoegen van een URL geen tekst hoeft te selecteren.

Kleur van knop wijzigen

Met de nieuwe editor kun je het WordPress buttonblok in een paar seconden aanpassen. Gebruik gewoon de instellingen in de zijbalk aan de rechterkant. Je kunt de achtergrondkleur van de knop of de tekstkleur in de knop wijzigen. Er zijn standaard voorgedefinieerde kleuren of je kunt je eigen kleur kiezen. Alle wijzigingen zijn direct zichtbaar om te zien of de kleurencombinatie goed is.

Het mooie is dat als je de verkeerde combinaties kiest, bijvoorbeeld grijze achtergrond en witte tekstkleur, WordPress block editor je zal waarschuwen dat de knop niet leesbaar is op je website.

Vind je eigen knoopstijl

Om de knop supersnel en zonder enige moeite te maken of te wijzigen, kun je een van de voorbereide stijlen gebruiken. De knop kan op die manier worden gewijzigd in bijvoorbeeld afgerond, omrand of rechthoekig. Experimenteer wat het beste past bij de stijl of het ontwerp van je website.

Knop bewerken met aangepaste CSS

Nog meer maatwerk kan worden bereikt met behulp van aangepaste CSS klassen. Op die manier kun je je eigen CSS stijlen toevoegen en de knop in WordPress editor precies zo stylen als jij dat wilt.

Zoals we kunnen zien is er een veel eenvoudigere manier dan het gebruik van de knop shortcode. WordPress Button blok kan worden gebruikt in elk thema dat compatibel is met WordPress Block Editor. Lees meer over ons gloednieuwe Citadela WordPress thema. Het is speciaal ontworpen en ontwikkeld voor WordPress Block Editor.

Extra tip aan het einde

Vergeet niet om je WordPress button block en button succes zelf te monitoren. Als je Google Analytics gebruikt, kun je een unieke URL maken. Om bezoekersklikken te volgen kun je het volgende toevoegen Google UTM-parameter. URL kan worden aangemaakt met URL builder. Door parameters toe te voegen kun je de bron van het bezoek identificeren. Dit is erg handig als je wilt weten waarvandaan bezoekers naar je winkelpagina zijn gekomen.

Wat is het grootste probleem dat jij op dit moment hebt met WordPress button block? Laten we het bespreken in de reacties hieronder. Deel je ervaring met het gebruik van knoppen op websites.