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.
IN DEZE HANDLEIDING
- Waarom buttons toevoegen aan je WordPress website
- 3 manieren om buttons te maken
- Buttons maken met html in WordPress
- Hoe maak je zelf buttons voor je WordPress website?
- Voorbeelden van buttons met een class
- Combinaties met HTML en CSS
- Buttons centreren
- CSS in je thema plaatsen
- Voor gevorderde WordPressers
- Handleiding Call to action button maken
- Hoe bepaal je de beste kleur voor je Call to action button
- Complementaire kleur voor Call to action button
- Mouse over kleur maken voor Call to action button
- Resultaat van je Call to action button met mouse over
- Tip: maak buttons niet te klein | Touchscreen readiness
- Handleidingen en tips over kleur en webdesign
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:
- Enfold | WordPress thema
- The7 | WordPress thema Handleiding
- Kalium | WordPress thema review
- Flatsome | WordPress thema review
- X theme | Beste WordPress thema 2018
Buttons maken met een plugin
Je kunt een plug-in gebruiken om buttons toe tevoegen.
- Divi wordpress thema page builder elegant themes handleiding review
- WP Bakery Builder (voorheen Visual composer) | WordPress Plugin
- Elementor WordPress page builder | Uitgebreide handleiding en review
- WP Beaver Builder | training webpagina bouwen met WordPress 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:
- WordPress Pop-up Bootcamp | spoedcursus op maat
- WordPress Bootcamp spoedcursus
- Cursus WordPress Design en Vormgeving
- Maatcursus WordPress voor ontwerpers
- Online WordPress cursus volgen op afstand vanuit huis
- Cursus WordPress op maat voor beginners & gevorderden
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:
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.
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
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
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
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
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
Uiteindelijk komt je oranje button er dan zo uit te zien. Let even op de mooie mouse over:
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: