Call To Action toevoegen in WordPress

call to action

Bekijk de video in dit artikel en leer hoe je in WordPress eenvoudig een call-to-action toevoegt aan je pagina of bericht.

Een "call-to-action", of "oproep tot actie" is een handig middel om bezoekers door je website te leiden.

Bedenk bij elke pagina of bericht wat na het lezen de door jouw gewenste vervolgstap is. Wil je dat de bezoeker naar de contactpagina gaat, een aanbieding bekijkt of naar een productpagina gaat? Zorg dan in ieder geval aan het eind van de pagina voor een overtuigende call-to-action. Dat kan een knop zijn, of een opvallende paragraaf als je meer woorden nodig hebt om te overtuigen.

Hebben al jouw pagina's en berichten al een call-to-action?

In de onderstaande video* leg ik uit hoe je in WordPress  eenvoudig een call-to-action toevoegt aan je pagina of bericht. Deze methode is vooral handig als je een thema hebt dat geen uitgebreide opmaak mogelijkheden heeft, zoals het Twenty Eleven thema.

* Excuses voor de mindere geluidskwaliteit van de video.

In de video worden de volgende stukjes html-code gebruikt. Niet ingewikkeld, gewoon kopiëren en plakken!

Voorbeeld van een opvallende paragraaf als call-to-action

Type hier de tekst voor je call-to-action. De tekst kun je in het Wysiwyg-tabblad van je bericht of pagina opmaken op dezelfde manier als de gewone tekst. Dus je kunt ook eenvoudig een link toevoegen naar je contactpagina of aanbieding.

Daar gebruik je deze html-code voor:

<div style="background-color: #fffacd; border: 4px dashed #ffa500;
padding: 10px; text-align: center;">Type hier de tekst voor je call-to-action. De tekst kun je in het Wysiwyg-tabblad van je bericht of pagina opmaken op dezelfde manier als de rest van de tekst. Dus je kunt ook eenvoudig een link toevoegen naar je<a href="https://www.vlot-en-goed.nl/contact/" target="_blank">
contactpagina</a> of aanbieding.</div>

Kleuren aanpassen? Hier vind je een overzicht van veel gebruikte kleuren: http://en.wikipedia.org/wiki/Web_colors

En hier vind je een handige kleurkiezer die automatisch de bijhorende kleurcode toont:

https://www.google.nl/search?q=rgb+color+picker

Voorbeeld van een knop als call-to-action

Link naar Google

Daar gebruik je deze html-code voor:

<p style="text-align: left;"><a style="box-shadow: inset 0px 1px 0px 0px
#fce2c1; background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter: progid;
background-color: #ffc477; border-radius: 6px;
border: 2px solid #eeb44f; display: inline-block; color: #ffffff; font-family: arial; font-size: 15px;
font-weight: bold; padding: 6px 24px; text-decoration: none;"
href="http://www.google.nl">Contact</a></p>

Geen zin in gedoe met HTML- en RGB codes?

Je kunt ook de plugin Shortcodes Ultimate installeren en zonder een letter programmeercode op deze manier een knop maken:

Nog meer tips over het gebruik van links en knoppen vind je in dit artikel.

Meer leren over WordPress?

Plannen om zelf je WordPress website te maken? Ben je begonnen, maar kom je er niet uit of gaat het niet snel genoeg? Overweeg dan de 1-daagse cursus WordPress:

  • WordPress wordt stap-voor-stap eenvoudig uitgelegd
  • Deze dag bespaart je weken uitzoekwerk
  • Installatiehulp vooraf
  • Uitgebreide naslag (inclusief extra tips)
  • Kleine groep
Bekijk de cursus WordPress »

Verder lezen:


Trackbacks/Pingbacks

  1. 12 tips om meer bezoekers op je blog te krijgen - Vlot en Goed - 13 maart 2013

    […] dus voor tussenkopjes, lijstjes en maak de essentiële woorden vet. En sluit af met een duidelijke call to action. Wat is een logische vervolgstap na het lezen van het […]

Geef een reactie