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.
IN DEZE HANDLEIDING:
- 1 Waarom buttons toevoegen aan je WordPress website
- 2 3 manieren om buttons te maken
- 3 Buttons maken met html in WordPress
- 4 Hoe maak je zelf buttons voor je WordPress website?
- 5 Voorbeelden van buttons met een class
- 6 Combinaties met HTML en CSS
- 7 Buttons centreren
- 8 CSS in je thema plaatsen
- 9 Voor gevorderde WordPressers
- 10 Handleidingen en tips over kleur en webdesign
- 11 CSS code voor een button
- 12 Meer voorbeelden van buttons met CSS
- 13 Voorbeeld van een systeem voor Gutenberg buttons
- 14 Hoe een pagina koppelen in html met een button / knop
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.
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:
- Flatsome | WordPress thema review test Envato template UX-themes
- Enfold | WordPress thema review test Envato template Kriesi
- OceanWP wordpress thema template review
- The7 | WordPress thema review handleiding Envato template
- X theme | WordPress thema review test gratis betaald Pro template
- Kalium | WordPress thema review test Envato template
Buttons maken met een page builder plugin
Je kunt een plug-in gebruiken om buttons toe tevoegen.
- WP Bakery Builder WordPress Plugin (Visual composer) Handleiding Nederlands
- WP Beaver Builder training webpagina bouwen WordPress plugin
- Elementor WordPress page builder Uitgebreide handleiding en review
- Divi wordpress thema page builder review test elegant themes template
Zelf buttons maken zonder een plugin met html
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:
- WordPress Bootcamp all-in one spoedcursus
- Online WordPress cursus volgen op afstand vanuit huis
- Cursus WordPress op maat beginners & gevorderden
- Designcursus WordPress voor ontwerpers en vormgevers
- WordPress Pop-up Bootcamp spoedcursus op maat
- WordPress Designcursus ontwerp en vormgevingstraining
Een HTML-button ziet er standaard lelijk uit:
In HTML ziet dit er zo uit:
<button>Dit is een standaard button in HTML</button><br />
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><br />
Je button kan er dan zo uitzien:
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. De bijbehorende CSS-code die je in je thema moet plaatsen vind je verderop in deze handleiding.
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:
<code>
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 is de stijlen in je thema plaatsen.
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.
#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.
#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;}
#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:
- 50 Kleurenschema's RGB & Hex kleuren & kleurcodes WordPress
- Kleur kiezen WordPress webdesign rgb hex kleurencirkel
- Beste kleurentools webdesign gereedschap voor ontwerpers
- Kleurendatabase namen kleurenoverzicht rgb hex css
- Verloop kleurverloop voorbeelden gradient webdesign ontwerp
- Kleur betekenis psychologie huisstijl ontwerp vormgeving
- Sanzo Wada kleurensysteem Japans boek kleurencombinaties
- Alle Pantone PMS kleuren kleurenoverzicht online kleurenwaaier
De CSS voor de button moet je in je thema plaatsen. Je kan deze uiteraard aanpassen.
.button {
background-color: #0cb5d7;
border: none;
color: #fefefe;
padding: 15px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
line-height: 140%;
margin: 12px 2px 14px 0px;
cursor: pointer;
border-radius: 30px;
}
.bt-big {
font-size: 18px;
padding: 16px 30px;
}
Meer voorbeelden van buttons met CSS vind je hier:
Voorbeelden buttons met CSS

Hieronder vind je eenvoorbeeld van een systeem voor Gutenberg buttons zoals ik dat eigenlijk altijd voor opdrachtgevers van WordPress websites maak:

In de WordPress Gutenberg editor kun je deze stijlen aangeven bij Extra CSS-classes zoals hieronder:

Tijdens een design-training leg ik uit hoe je dit doet.
Om in HTML een pagina aan een andere pagina te koppelen met behulp van knoppen kunnen we HTML Anchor tags gebruiken.
waar we de HTML-knop moeten aangeven/schrijven tussen de begin- en eindtags van de Anchor-tag.
<a href='anderepagina.html'>
<button>mijnknop</button>
</a>