Zelf buttons maken in WordPress met een HTML Class en CSS

Je kan zelf buttons maken die los staan van een WordPress thema of plugin. Bekijk in deze handleiding hoe je call-to-action buttons maakt voor je WordPress website.

Waarom buttons toevoegen aan je WordPress website

De WordPress Editor (Gutenberg) heeft eigenlijk geen mogelijkheid om buttons of knoppen toe te voegen aan je berichten of pagina’s. Er zijn veel situaties waarin je een button nodig hebt in een bericht of op een pagina. Een voorbeeld is een call-to-action knop of een demo / download-knop in plaats van een tekstlink.

3 manieren om buttons te maken

Hieronder vind je 3 manieren om buttons te maken voor je WordPress website. De laatste optie vind ik het best en deze heb ik verder uitgelegd.

Buttons maken met een thema

De meeste uitgebreide thema’s worden al geleverd met stijlvolle knoppen om zelf toe te voegen. Je kan deze buttons gebruiken. Ik ben zelf geen voorstander van deze optie, omdat je dan vastzit aan het thema. Als je een ander thema kiest, dan ben je je buttons kwijt. Hieronder een lijstje met thema’s waar buttons ingebouwd zitten en die je standaard kunt gebruiken:

Buttons maken met een plugin

Je kunt een plug-in gebruiken om buttons toe tevoegen.

Zelf buttons maken zonder een plugin

Je kan zelf call-to-action buttons maken die los staan van een WordPress thema of plugin. Zodoende ben je heel flexibel. Dit is cruciaal voor de strategie voor je website op lange termijn. Lees dit artikel als je hierover meer wilt weten:
Strategie en eisen voor je WordPress thema

Buttons maken met html in WordPress

Je kunt classes (stijlen) toevoegen in het aanvullende CSS-menu van WordPress en hiernaar verwijzen om knoppen toe te voegen. In je CSS van je thema zet je de code voor een button. In de CSS zet je ook zogenaamde classes. Een ‘class’ is een variabele of stijl voor je buttons. Hieronder leg ik uitgebreid uit hoe je dit doet. Hoe de CSS eruit ziet leer je tijdens één van de cursussen waarbij we uitgebreid ingaan op het ontwerp van je website:

Hoe maak je zelf buttons voor je WordPress website?

Een HTML-button ziet er standaard lelijk uit:



In HTML ziet dit er zo uit:
<button>Dit is een standaard button in HTML</button>

Door zelf een ‘class’ toe te voegen kun je perfecte call-to-action buttons maken. Hieronder leg ik uit hoe je dit doet. Tijdens de WordPress cursus krijg je een template uitgereikt waarbij je alleen maar hoeft te kopieren en plakken in de CSS van je WordPress thema. Dit werkt heel eenvoudig. Je hoeft allen maar ‘class=”jouw eigen stijl”‘ toe te voegen binnen de button code. Je kan de naam van de class uiteraard zelf aanpassen. Dit ziet er dan zo uit:

<button class="button jouw eigen stijl">Dit is button in je eigen stijl</button>

Je button kan er dan zo uitzien:

Voorbeelden van buttons met een class

In de buttons staan de ‘classes’ vermeld. Je kan de HTML kopieren en hoeft vervolgens alleen de naam van de class in de button te veranderen.

Variabele grootte

html van de bovenste button:


<a href="https://www.cursuswp.com/bootcamp"><button class="button bt-mini">button bt-mini</button></a>

buttons:

Variabele soort

html van de bovenste button:


<a href="https://www.cursuswp.com/bootcamp"><button class="button bt-basis">button bt-basis</button></a>

buttons:

Combinaties met HTML en CSS

Vervolgens kun je eenvoudig combinaties maken:

Buttons centreren

Vervolgens kun je ook eenvoudig een button centreren. Zoals hier:

Je kan de button in je editor centreren of de volgende code toevoegen:

HIER KOMT DE BUTTON DIE AL GEMAAKT HEBT

 


De HTML van deze gecentreerde button ziet de dan alsvolgt uit:

 

Meer voorbeelden van gecentreerde buttons:

De laatste stap:

CSS in je thema plaatsen

Alleen de codes in je HTML plaatsen werkt niet. Je moet bijbehorende CSS ook in je thema plaatsen. De HTML en CSS praten dus met elkaar. De bijbehorende CSS die je in je thema moet plaatsen vind je in de Login van je designcursus:

Voor gevorderde WordPressers

Handleiding Call to action button maken

Over de kleur van je Call-to-action button zijn duizenden onderzoeken gedaan. Welke kleur werkt goed en welke minder. Alle kleuren zijn wel onderzocht: rood, groen, oranje, blauw, etc. De effectiviteit is afhankelijk van zoveel factoren, bijvoorbeeld doelgroep en markt, dat het niet te zeggen is, welke kleur standaard voor jouw website zal werken. De vuistregel die zeker werkt is, dat je Call-to-action button er uit moet springen qua kleur. Lees meer over Call-to-action buttons en kleur in dit onderzoek:
Onderzoek beste kleur Call-to-action button

Hoe bepaal je de beste kleur voor je Call to action button


Stel je huisstijl kleur is de hex-waarde #0395ff.
Dit is de overheersende kleur op je website, bijvoorbeeld in je afbeeldingen en je links.

blauw
#0395ff

Complementaire kleur voor Call to action button

Het werkt goed om dan de complementaire kleur te gebruiken. De complementaire kleur is de kleur die aan de andere kant van de kleurencirkel staat. Je kan deze handig vinden op de site color-hex.com. Je kan hier eenvoudig je huisstijlkleur ingeven. Dit wordt dan:
https://www.color-hex.com/color/0395ff
Onder het kopje ‘Complementary Color’ vind je de complementaire kleur. Dit is ff6d03:
https://www.color-hex.com/color/ff6d03


De complementaire kleur is de hex-waarde #ff6d03.
In het CSS van je thema kun je ff6d03 aangeven.

oranje
#ff6d03

Mouse over kleur maken voor Call to action button

Het werkt goed om een kleur te gebruiken met dezelfde verzadiging. Je kan deze ook weer vinden op de site color-hex.com. Onder het kopje ‘Monochromatic Colors’ vind je de kleuren met dezelfde verzadiging. Kies dan de kleur die het dichtst bij je kleur van je button staat.


De Monochromatische kleur die het dichtst bij de oranje hex-waarde #ff6d03 staat is #e96200. Je kan dit vinden op:
https://www.color-hex.com/color/e96200
In het CSS van je thema kun je hex-kleur #e96200 aangeven als je mouse-over kleur. Dit kan er dan zo uit komen te zien in je CSS:
.bt-call-to-action:hover {background-color: #e96200;}

oranje
#e96200

Resultaat van je Call to action button met mouse over

Uiteindelijk komt je oranje button er dan zo uit te zien. Let even op de mooie mouse over:

Tip: maak buttons niet te klein | Touchscreen readiness

De links en knoppen op uw pagina zijn te klein en/of te dicht bij elkaar om gemakkelijk op een mobiel apparaat te kunnen klikken. Het gemiddelde vingertopgebied is 48 pixels breed en hoog. Tikkende doelen moeten ook voldoende ruimte hebben zodat de vinger van een gebruiker die op een link of knop drukt, niet per ongeluk een andere link of knop aanraakt. De minimale benodigde ruimte tussen de targets is 8 pixels aan alle zijden. Dit heet Touch scree readiness en is heel belangrijk voor SEO.

Handleidingen en tips over kleur en webdesign

Meer goede tips, handleidingen en informatie over kleur, ontwerp en design voor je WordPress website vind je hier: