Knoppen lijken misschien iets kleins, maar ze kunnen heel wat gewicht in de schaal leggen op uw website. Knoppen zijn een van de eenvoudigste manieren om bezoekers naar de actie te leiden waarvan je wilt dat ze die uitvoeren.
Van het leiden van mensen naar je productpagina tot het vragen om meer te lezen of je in te schrijven, een goed uitziende knop kan het verschil maken. Het goede nieuws is dat je geen codeervaardigheden nodig hebt om ze te ontwerpen.
WordPress heeft ingebouwde opties en met een beetje hulp van een blokplugin kun je nog meer controle krijgen over hoe je knoppen eruit zien en aanvoelen.
In deze post laat ik je drie eenvoudige methoden zien om stijlvolle knoppen te maken in WordPress.
We beginnen met de standaardeditor, gaan verder met een plugin die meer flexibiliteit biedt en eindigen met een bonusmethode voor het toevoegen van knoppen in tabellen. Laten we beginnen.
Maak prachtige tafels
Met blok-editor
✅Methode 1: Het standaard knoppenblok gebruiken
WordPress heeft een ingebouwd blok met knoppen dat in de meeste gevallen prima werkt. Je vindt het in de blok-editor als je op het kleine (+) pictogram klikt en zoekt naar "Knoppen".
Wanneer het knopenblok is ingevoegd, wordt aangegeven dat je tekst in de knop moet invoegen.
Zodra je het blok hebt ingevoegd, kun je één of meerdere knoppen naast elkaar toevoegen. Elke knop kan direct vanuit de rechter zijbalk worden aangepast. Je vindt opties voor:
- Knopbreedte (volledig of automatisch)
- Tekst en achtergrondkleur
- Opvullen en uitlijnen
- Randradius (voor afgeronde hoeken)
Het is een goed uitgangspunt, vooral als je een minimalistisch ontwerp aanhoudt.⚠️Maar je zult al snel tegen een limiet aanlopen als je meer stylingopties nodig hebt, zoals hover-effecten, kleurverlopen of responsieve spatiëring.
🛠️ Pro Tip: Wil je een perfect afgeronde knop? Stel de randradius in op 100 voor een knop in pilstijl.
✅Methode 2: Het knoppenblok van Ultimate Blocks gebruiken
Als je meer controle wilt zonder CSS te schrijven, Ultieme Blokken is een fantastische Gutenberg-plugin om te proberen. Het voegt een verbeterde Knoppen Blok die is gebouwd met maatwerk in het achterhoofd.
Het installeren van Ultimate Blocks is een eenvoudige taak.
-
Navigeer naar Plugins
-
Klik op Plugins toevoegen
-
Zoeken naar "Tableberg".
-
Klik op Installeerdan Activeer
Na het installeren en activeren van Ultimate Blocks, het blok "Knoppen (Ultimate Blocks)" toevoegen.
Om de knoppen van Ultimate Blocks in te voegen, klik je op het kleine (+) pictogram en zoek je naar "Button (Improved)".
Je merkt meteen het verschil als je de knop Ultimate Blocks toevoegt. Dit is wat je kunt aanpassen in de blokinstellingen:
-
Knop Motivering en oriëntatie
-
Knopgrootte
-
Knop Breedte
-
Ondersteuning voor pictogrammen (voor of na tekst) met diverse andere opties
-
Animatie-ondersteuning
In het gedeelte Knopstijlen krijg je de volgende aanpassingen:
-
Kleurenoptie voor normale en hover-status
-
Knop Rand
-
Knop Styling
-
Aanpasbare opvulling, regelafstand en marge in de instellingen voor dimensies
-
Aangepaste CSS-optie
Alle standaard button block functionaliteiten zijn inbegrepen bij het Button blok van Ultimate Blocks. Hieronder ziet u een door Ultimate Blocks op maat ontworpen knop, die wel functioneel is.
Dit blok is geweldig voor marketeers, bloggers en iedereen die wil dat zijn call-to-action-knoppen opvallen. Je krijgt flexibiliteit op ontwerpniveau zonder ook maar één regel code te schrijven.
🎯 Pro Tip: Gebruik contrasterende hoverkleuren om een bevredigende visuele reactie te creëren wanneer gebruikers interageren met je knoppen.
Bonus: Knoppen toevoegen in een tabel
Soms heb je knoppen nodig binnen een lay-outZoals een prijstabel of een functievergelijking. Dat is waar een blokgebaseerde tabel plugin zoals Tafelberg schijnt.
Beste Deal |
||
 |
 |
 |
Apple AirPods Pro 2e generatie |
SAMSUNG Galaxy Buds 2 Pro |
Google Pixel Buds Pro |
|
|
|
Met Tableberg werkt elke tabelcel als een mini-canvas. Dat betekent dat je het speciale Button-blok kunt laten vallen in een cel. Je zit niet meer vast aan gewone tekst: je kunt CTA-knoppen zoals "Nu kopen", "Details bekijken" of "Gratis proberen" rechtstreeks in je prijsrijen invoegen.
De knopfuncties van de Tableberg zijn hetzelfde als de knop van de Ultimate Blocks.
Wil je het uiterlijk van de knop in de tabel aanpassen? Geen probleem. Je kunt de randradius en opvulling aanpassen en zelfs pictogrammen toevoegen, allemaal vanuit de blokeditor.
🛠️ Pro Tip: Combineer je knop met een sterrenbeoordeling of een lint in dezelfde rij voor extra visuele impact en betere conversies.
Laatste gedachten!
Voor het ontwerpen van mooie knoppen in WordPress heb je geen aangepaste CSS of hulp van een ontwikkelaar nodig. Met het eigen blok Knoppen, de verbeterde versie van Ultimate Blocks en de flexibiliteit van tools zoals Tableberg, kun je volledig interactieve lay-outs maken die er geweldig uitzien en werken op alle apparaten.
Geen gewone links of verouderde shortcodes meer. Nu heb je volledige controle, rechtstreeks in de editor.
Lees meer!
