Call-to-action-knoppen toevoegen in WordPress (zonder code)

8 min


116

Wil je call-to-action-knoppen toevoegen aan je WordPress-berichten of -pagina’s?

Knoppen zijn een geweldige manier om conversies te stimuleren. Ze vallen sterk op, waardoor ze uitstekend zijn in het omleiden van de aandacht van de gebruiker naar een gewenste interactie.

U kunt bijvoorbeeld een call-to-action-knop gebruiken om gebruikers naar een transactiepagina zoals prijspagina, productpagina, servicepagina en anderen op uw website te navigeren.

U kunt ook call-to-action-knoppen gebruiken om speciale aanbiedingen, nieuwe producten of gelieerde links te promoten die naar partnerwebsites verwijzen.

In dit artikel laten we u zien hoe u eenvoudig mooie call-to-action-knoppen in WordPress kunt toevoegen zonder code te schrijven.

Knoppen toevoegen in WordPress stap voor stap

Opmerking: dit artikel is bedoeld voor het toevoegen van aangepaste call-to-action-knoppen in WordPress. Als je knoppen voor sociaal delen wilt toevoegen, raadpleeg dan onze gids over het toevoegen van knoppen voor sociaal delen in WordPress .

Knoppen toevoegen aan WordPress-berichten en -pagina’s (stap voor stap)

WordPress maakt het super eenvoudig om knoppen toe te voegen met een ingebouwd ‘Button’-blok.

Het is een nieuwe functie die is geïntroduceerd in WordPress 5.0 , samen met de nieuwe Gutenberg WordPress-blokeditor .

In dit artikel laten we je drie verschillende manieren zien om call-to-action-knoppen toe te voegen aan WordPress-blogposts en -pagina’s. U kunt de oplossing kiezen die het beste bij uw behoeften past.

Gebruik de onderstaande inhoudsopgave om gemakkelijk door dit artikel te navigeren.

Knoppen toevoegen aan WordPress-berichten / -pagina’s met behulp van de standaardeditor

Deze methode is eenvoudiger en wordt aanbevolen voor de meeste gebruikers. Het maakt gebruik van het ingebouwde knopblok in de nieuwe WordPress-editor. Als u nog steeds de oudere klassieke editor gebruikt, kunt u doorgaan naar de volgende sectie.

Eerst moet je een nieuw bericht maken of een bestaand bericht bewerken waaraan je een knop wilt toevoegen.

Klik op het bewerkingsscherm voor berichten op het pictogram ‘+’ om een ​​nieuw blok toe te voegen en selecteer het knopblok onder de sectie Layoutelementen.

Voeg een knopblok toe in de WordPress Block Editor

Vervolgens zou u het knoppenblok moeten kunnen zien dat is toegevoegd aan de inhoudeditor

Knopblok toegevoegd aan WordPress Post Editor

Klik gewoon op het gebied ‘Tekst toevoegen …’ en voer uw knoptekst in.

Daarna moet u de URL van de pagina die u wilt linken in het veld ‘URL plakken of typen om te zoeken’ onder de knop plakken.

Als u klaar bent, klikt u op het pictogram Toepassen.

Voer knoptekst en link in WordPress in

Als u de knop in het midden wilt weergeven, kunt u klikken op het pictogram Center uitlijnen in uw blokwerkbalk hierboven.

Lijn uw knop uit in de WordPress Block Editor

Vervolgens kunt u uw knopstijl aanpassen, de achtergrondkleur wijzigen en de tekstkleur wijzigen via het paneel met blokinstellingen aan de rechterkant.

Kies Knopstijl in WordPress-blokinstellingen

Er zijn drie knopstijlen waaruit u kunt kiezen: standaard, contour en vierkant. Je kunt ze allemaal proberen door erop te klikken en degene te kiezen die er het beste uitziet.

De sectie Kleurinstellingen bevat vijf kleurvariaties voor zowel knopachtergrond als knoptekst. Niet alleen dat, maar u kunt ook een aangepaste kleur naar keuze gebruiken door op de optie Aangepaste kleur te klikken.

Kies de aangepaste kleur van uw WordPress-knop

Als u eenmaal tevreden bent met het ontwerp van de knop, kunt u uw bericht opslaan of publiceren om een ​​live voorbeeld te zien.

Hier is hoe het eruit zag op onze demo-website.

Voorbeeld van WordPress-knop

Bonus: als u wilt zien hoe goed uw knoppen presteren, moet u MonsterInsights gebruiken . Het heeft een ingebouwde gebeurtenistracking voor aangesloten links, uitgaande links en aangepaste evenementen, zodat u kunt zien hoe goed uw knoppen presteren. Zie belangrijke marketingstatistieken die u in WordPress moet bijhouden voor meer informatie .

Een WordPress-knop maken in Classic Editor

Hoewel de blokeditor van Gutenberg sneller en gemakkelijker is, geven veel gebruikers nog steeds de voorkeur aan de oude klassieke WordPress-editor . Als u een van hen bent, moet u een alternatieve oplossing vinden om knoppen toe te voegen aan uw WordPress-site.

Er zijn hoofdzakelijk drie opties beschikbaar om knoppen toe te voegen in WordPress Classic Editor.

  1. Toevoegen knop in WordPress met HTML / CSS-code.
  2. Knop toevoegen in WordPress met plug-in voor shortcode voor WordPress-knoppen.
  3. Add-knop in WordPress zonder shortcodes te gebruiken.

Van de drie opties is de eerste de coderingsmethode. U moet HTML / CSS-code schrijven en deze aan uw website toevoegen waar u een knop nodig heeft. Het is niet beginnersvriendelijk.

De tweede optie is de meest gebruikte methode. Dat komt omdat de meeste plug-ins voor WordPress-knoppen shortcodes bieden voor het toevoegen van knoppen.

De derde optie is de beste omdat je hiermee eenvoudig knoppen aan je berichten en pagina’s kunt toevoegen zonder dat je de shortcode hoeft te onthouden.

Laten we eens kijken hoe u knoppen in WordPress kunt toevoegen zonder shortcodes te gebruiken.

Het eerste dat u hoeft te doen, is de plug-in Forget About Shortcode Buttons installeren en activeren . Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie .

Nadat je de plug-in hebt geactiveerd, maak je een nieuw bericht of bewerk je een bestaand bericht. In de editor ziet u een nieuwe knop in de visuele editor met de naam Knop invoegen.

Knoppictogram invoegen in de klassieke WordPress-editor

Om een ​​nieuwe knop in uw bericht in te voegen, moet u op de knop Invoegen klikken. Dit zal een pop-upvenster openen waarin u uw nieuwe knop kunt ontwerpen.

Voer knoptekst en URL in de klassieke editor in

Eerst moet u uw knoptekst en URL toevoegen. Terwijl u uw knoptekst toevoegt, ziet u een live voorbeeld in het onderstaande vak.

Vervolgens kunt u een nofollow-tag aan uw link toevoegen en de link openen in een nieuw tabblad door op de onderstaande selectievakjes te klikken.

Daarna kunt u een pictogram voor uw knop selecteren. Als u op het tabblad Pictogrammen klikt, ziet u de pictogrammen die u voor of na de tekst in uw knoppen kunt toevoegen.

Voeg een pictogram toe aan uw knop in de klassieke editor

Deze pictogrammen zijn eigenlijk pictogramlettertypen (leer hoe u pictogramlettertypen gebruikt in de WordPress-berichteditor ).

Vervolgens kunt u de tekstkleur en achtergrondkleur voor uw knop kiezen door op het pictogram Kleurvak te klikken.

Wijzig de achtergrondkleur van de knop in WordPress Classic Editor

Klik daarna op het vervolgkeuzemenu om de knopstijl te kiezen. Er zijn acht verschillende knopstijlen klaar voor gebruik.

Kies een knopstijl in de klassieke WordPress Editor

Op dezelfde manier kunt u ook de knoopmaat kiezen van extra klein tot extra groot.

Als u tevreden bent met het uiterlijk, klikt u eenvoudig op de knop Bijwerken.

U kunt uw knop zien zoals deze in uw bericht zou verschijnen, direct in de berichteditor.

U kunt de uitlijning van de knoppen ook instellen door simpelweg de knoptekst te selecteren en de werkbalkknoppen in de klassieke editor te gebruiken.

Centreer uw knop in de klassieke editor

Dubbelklikken op de knop zal het pop-upvenster Knop invoegen openen en u kunt uw knop desgewenst opnieuw bewerken.

Als u eenmaal tevreden bent met het ontwerp, kunt u uw bericht publiceren of bijwerken en het in actie zien. Dit is hoe de mooie knop verscheen op onze demo WordPress-website .

Knopvoorbeeld - Ingebouwde klassieke editor

Een click-to-call-knop toevoegen in WordPress

Naast de gebruikelijke call-to-action-knoppen, kunt u ook click-to-call-knoppen op uw website toevoegen om leads en conversies te stimuleren.

Een click-to-call-knop is een specifiek type call-to-action-knop waarmee uw gebruikers met één tik uw team kunnen bellen.

Met de tap-to-call-knoppen kunnen bezoekers van uw site direct persoonlijk met uw team praten en de informatie krijgen die ze nodig hebben. Of het nu gaat om het bespreken van een offerteaanvraag, voorverkoopinformatie of een ondersteuningsprobleem, telefoontjes zijn snel.

Nu het aantal smartphonegebruikers groeit, is het toevoegen van bel nu-knoppen tegenwoordig nog relevanter.

Als u geen zakelijk telefoonnummer heeft , kunt u overwegen om een virtueel zakelijk telefoonnummer te krijgen .

Met dat gezegd, laten we eens kijken hoe u stap voor stap click-to-call-knoppen in WordPress kunt toevoegen.

Het eerste dat u hoeft te doen, is de WP Call Button- plug-in installeren en activeren . Voor gedetailleerde instructies kunt u onze stapsgewijze handleiding raadplegen over het installeren van een WordPress-plug-in .

Na activering moet u de pagina Instellingen »WP Call Button bezoeken om de plug-in-instellingen te configureren en uw click-to-call-knop te ontwerpen.

Sticky Call Button-instellingen in WordPress

In eerste instantie ziet u de Sticky Call Button-instellingen. De sticky call-knop is een conversie-geoptimaliseerde functie die de call-knop samen met gebruikers verplaatst terwijl ze op uw site browsen.

U kunt beginnen door de status van de knop Nu bellen te activeren. Klik gewoon op de schakelaar om dat te activeren.

Daarna moet u uw telefoonnummer invoeren. WP Call Button heeft een smart phone nummerveld met uw landcode. Selecteer eenvoudig uw land en voer uw zakelijke telefoonnummer in.

Als u geen zakelijk nummer heeft, kunt u er een krijgen van Nextiva . Het is een vertrouwde zakelijke VoIP-provider .

Vervolgens kunt u de tekst van uw belknop bewerken, de positie en kleur van de belknop kiezen.

U kunt ook selecteren waar u de sticky call-knop op uw website wilt weergeven. Standaard wordt de belknop op alle pagina’s en op alle apparaten weergegeven. U kunt ervoor kiezen om de knop op bepaalde pagina’s weer te geven of te verbergen en alleen op mobiele apparaten weer te geven.

Nadat u alle opties heeft bekeken, kunt u onderaan op de knop Wijzigingen opslaan klikken. Daarna kunt u uw website bezoeken en de sticky call now-knop in actie zien.

WordPress Click to Call-knop

Afgezien van de plakkerige belknoppen, kunt u met deze plug-in ook statische belknoppen toevoegen aan uw WordPress-pagina’s, berichten en zijbalken .

Als u de nieuwe WordPress-blokeditor gebruikt , kunt u eenvoudig de knop Nu bellen aan uw pagina’s toevoegen met behulp van het WP Call Button-blok.

Maak een nieuwe pagina of bewerk een bestaande pagina en voeg het WP Call Button-blok toe aan uw pagina-editor.

WP Call Button Block toevoegen in WordPress

Daarna kunt u de knoptekst, knopkleur, tekstkleur en lettergrootte aanpassen en het telefoonpictogram weergeven of verbergen.

De belknop aanpassen in de WordPress Page Editor

Als u eenmaal tevreden bent met het ontwerp, kunt u uw pagina publiceren of bijwerken.

Als u de klassieke WordPress-editor gebruikt , moet u de statische oproepknopgenerator gebruiken om een ​​shortcode te krijgen. Ga naar Instellingen »WP-belknop en klik bovenaan op het menu Statische belknop.

Statische oproepknoppen in WordPress-instellingen

Pas eenvoudig de knopopties aan en kopieer vervolgens de shortcode. Daarna kunt u de shortcode in elke post of pagina op uw website gebruiken.

Met de plug-in WP Call Button kun je ook de belknop toevoegen aan je WordPress-zijbalk en andere widget-klaar gebieden.

Ga gewoon naar Uiterlijk »Widegts en sleep de WP Call Button-widget naar een widget-gereed gebied waar u de belknop wilt laten zien.

Widget met zijbalk voor WordPress-belknop

Nu kunt u een titel en beschrijving toevoegen en de belknop aanpassen vanuit het gedeelte Geavanceerde instellingen. Als u klaar bent, slaat u uw widget op.

Dat is het! Als u een meer gedetailleerde zelfstudie wilt zien, kunt u onze stapsgewijze handleiding raadplegen over het toevoegen van een click-to-call-knop in WordPress .

Bonustip voor het toevoegen van aangepaste knoppen in WordPress

Als u volledig aangepaste call-to-action-knoppen in WordPress wilt toevoegen, bent u waarschijnlijk op zoek naar een oplossing waarmee u ook aangepaste secties en aangepaste knoppen kunt toevoegen in de koptekst van uw website, menu’s en andere gebieden.

In dat geval raden we aan om een plug-in voor WordPress-paginabuilder met slepen en neerzetten te gebruiken, zoals Beaver Builder of Divi .

Deze paginabouwers helpen u bij het maken van aangepaste bestemmingspagina’s met mooie call-to-action-knoppen, precies zoals u dat wilt.

Wat u ook doet, het is belangrijk dat u bijhoudt hoe uw knoppen presteren, want gissen is niet de beste strategie voor bedrijfsgroei.

We raden aan om MonsterInsights te gebruiken . Het heeft een ingebouwde gebeurtenistracking voor aangesloten links, uitgaande links en aangepaste evenementen, zodat u kunt zien hoe goed uw knoppen presteren. 


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format