Stijlvolle knoppen ontwerpen in WordPress (zonder codering)

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:

  1. Knopbreedte (volledig of automatisch)
  2. Tekst en achtergrondkleur
  3. Opvullen en uitlijnen
  4. Randradius (voor afgeronde hoeken)

✅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.


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

4.5/5

SAMSUNG Galaxy Buds 2 Pro

5/5

Google Pixel Buds Pro

4.5/5
  • Vormfactor: In oor
  • Geluidsbeheersing: Actieve ruisonderdrukking
  • Gewicht61,4 gram
  • Levensduur batterij: Tot 30 uur
  • Vormfactor: In oor
  • Geluidsbeheersing: Actieve ruisonderdrukking
  • Gewicht61,4 gram
  • Levensduur batterij: Tot 30 uur
  • Vormfactor: In oor
  • Geluidsbeheersing: Actieve ruisonderdrukking
  • Gewicht61,4 gram
  • Levensduur batterij: Tot 30 uur

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.


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!



Het Tableberg-team

Bouw prachtige WordPress tabellen - visueel!

Zeg maar dag tegen saaie tabellen. Met Tableberg kun je responsieve, interactieve tabellen maken met behulp van de Block Editor - geen code nodig.

Tableberg-interface
🚀 Koop de Beste Tabel Blok Plugin met 30% UIT!
Dit is de standaardtekst voor de meldingsbalk