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 page builder plugin

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

• Divi wordpress thema page builder review en test
• WP Beaver Builder training pagina’s bouwen met WP plugin
• WP Bakery Builder WP Plugin Handleiding Nederlands
• Elementor WordPress page builder handleiding en review

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:

• Online WordPress cursus volgen op afstand vanuit huis
• WordPress Pop-up Bootcamp spoedcursus op maat
• Cursus WordPress op maat beginners & gevorderden
• WordPress Designcursus ontwerp en vormgevingstraining
• Designcursus WordPress voor ontwerpers en vormgevers
• WordPress Bootcamp all-in one spoedcursus

Hoe maak je zelf buttons voor je WordPress website?

Een HTML-button ziet er standaard lelijk 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 />

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. De bijbehorende CSS-code die je in je thema moet plaatsen vind je verderop in deze handleiding.

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

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

Combinaties met HTML en CSS

Vervolgens kun je eenvoudig combinaties maken:

Buttons centreren

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

button bt-mini bt-basis

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

<code>

HIER KOMT DE BUTTON DIE AL GEMAAKT HEBT

button bt-mini bt-basis

Meer voorbeelden van gecentreerde buttons:

button bt-klein bt-design

button bt-normal bt-bootcamp

button bt-big bt-maat

button bt-jumbo bt-basis

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:

Ga naar Login

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

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

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.

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:
Meld je aan voor een WordPress

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 WordPress site RGB Hex kleur codes
• Kleur kiezen WordPress webdesign rgb hex kleurencirkel
• Beste kleurentools webdesign gereedschap voor ontwerpers
• Kleurendatabase namen kleurenoverzicht rgb hex css
• Verloop kleurverloop voorbeelden gradient webdesign
• Kleur betekenis psychologie huisstijl ontwerp vormgeving
• Sanzo Wada kleurenpalet Japans boek kleurencombinaties
• Alle Pantone PMS kleuren kleurenoverzicht kleurenwaaier

CSS code voor een button

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

Meer voorbeelden van buttons met CSS vind je hier:
Voorbeelden buttons met CSS

Voorbeeld van een systeem voor Gutenberg buttons

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.

Hoe een pagina koppelen in html met een button / knop

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>