{"id":81124,"date":"2019-07-22T13:05:43","date_gmt":"2019-07-22T11:05:43","guid":{"rendered":"https:\/\/www.ait-themes.club\/?p=81124"},"modified":"2023-10-20T11:30:11","modified_gmt":"2023-10-20T11:30:11","slug":"how-to-add-button-in-wordpress-editor-blog","status":"publish","type":"post","link":"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/","title":{"rendered":"Hoe voeg je een knop toe in WordPress editor [tutorial]?"},"content":{"rendered":"<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_is_WordPress_button_block_so_important\"><\/span>Waarom is WordPress button block zo belangrijk?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Navigatie op de website is belangrijk voor bezoekers en klanten. We willen ze van de ene subpagina naar de andere sturen. Hen door het hele winkelproces leiden. Daarom is het belangrijk om belangrijke links correct in de pagina-inhoud te plaatsen.<\/p>\n\n\n\n<p>In principe hebben we 2 opties. Standaardlink of knop gebruiken. Er zijn verschillende meningen over wanneer de eerste of de latere optie moet worden gebruikt. Het is gebruikelijk dat er op \u00e9\u00e9n pagina meerdere acties mogelijk zijn. We moeten zeker weten welke actie primair is en welke secundair. We raden je aan om alleen een knop te gebruiken voor de primaire actie. Op die manier bereik je een grotere zichtbaarheid van deze primaire actie. Je vestigt de aandacht van bezoekers op deze actie. We kunnen het ook call-to-action-knop noemen. Maak niet te veel knoppen op \u00e9\u00e9n subpagina.<\/p>\n\n\n\n<p><a id=\"whataremain\"><\/a>Wat zijn de belangrijkste knopfuncties?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Knoppen kunnen de aandacht van bezoekers trekken - oproep tot actie<\/li><li>Ze scheiden de inhoud van pagina's of berichten en maken deze leesbaarder<\/li><li>Help met ori\u00ebntatie op de pagina. Veel bezoekers scannen de pagina alleen met hun ogen<\/li><li>Bezoekers naar andere pagina's navigeren met hyperlinks<\/li><\/ul>\n\n\n\n<p>Er zijn veel parameters die het succes van een knop bepalen. Belangrijk is bijvoorbeeld de grootte, de plaatsing of de kleur van de knop. Het is noodzakelijk om de standaard UI- en UX-principes te volgen. Groene kleuren worden gebruikt voor knoppen met een positieve actie, bijvoorbeeld om iets te kopen. Rood is voor negatieve acties, bijvoorbeeld om je af te melden voor de nieuwsbrief. Correct ontworpen knoppen be\u00efnvloeden op die manier direct de acties van bezoekers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_button_on_any_Page_or_Post_in_WordPress\"><\/span>Knop toevoegen aan een pagina of bericht in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Situation_before_WordPress_5\"><\/span>Situatie v\u00f3\u00f3r WordPress 5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Het toevoegen van knoppen was behoorlijk ingewikkeld voordat WordPress Block editor werd uitgevonden. Omdat deze functie niet van nature in WordPress aanwezig was. Je kon een thema met Page Builder of een plugin van derden gebruiken. Shortcodes maken in dit geval knoppen.<\/p>\n\n\n\n<p>In onze oudere WordPress thema's kun je een knop toevoegen met behulp van shortcodes in de visuele editor. Nadat je op Shortcode invoegen -&gt; Knop hebt geklikt, kun je verschillende instellingen opgeven in het modale venster. Tekst, tekstkleur, kleur van de knop, url, uitlijning enzovoort. Dankzij deze geavanceerde instellingen kun je vrij eenvoudig en snel een knop toevoegen zonder enige programmering.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-shortcode.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-shortcode.gif\" alt=\"Knop toevoegen via shortcodes \" class=\"wp-image-81137\"\/><\/a><figcaption>Knop toevoegen via shortcodes voor release block editor<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_use_Button_block_in_WordPress_editor\"><\/span><a id=\"howtousebuttonblock\"><\/a>Hoe gebruik je een knoppenblok in de WordPress editor?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dankzij WordPress 5 is er een tweede manier. Veel gemakkelijker. De visuele editor van WordPress bevat veel handige blokken. Om een knop op je website te maken kun je nu het WordPress Button blok in de editor gebruiken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step-by-step_guide_how_to_add_button_in_WordPress_editor\"><\/span>Stap-voor-stap handleiding voor het toevoegen van een knop in WordPress editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>1. Eerst moet je beslissen waar je de knop wilt invoegen<br>2. Knopblok kan op verschillende manieren worden toegevoegd:<br>- door te klikken op \"+\" in de bovenste balk of ergens in de block editor waar u Button block selecteert<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-add-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"800\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-add-1.png\" alt=\"Knop toevoegen door op &quot;+&quot; te klikken\" class=\"wp-image-81144\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-add-1.png 1280w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-add-1-300x188.png 300w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-add-1-1024x640.png 1024w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-add-1-768x480.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a><figcaption>Knoppenblok toevoegen door op \"+\" te klikken<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-search.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-search.gif\" alt=\"Knop toevoegen via zoekbalk\" class=\"wp-image-81136\"\/><\/a><figcaption>Knoppenblok toevoegen via zoekbalk<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-shortcut.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-shortcut.gif\" alt=\"Knoppenblok toevoegen via schuine streep\" class=\"wp-image-81138\"\/><\/a><figcaption>Knoppenblok toevoegen met schuine streep \"\/\"<\/figcaption><\/figure>\n<\/div>\n\n\n<p>- je kunt ook elk blok vinden met de zoekbalk, schrijf gewoon \"knop\".<\/p>\n\n\n\n<p>- door \"\/\" te typen, waardoor je toegang krijgt tot alle beschikbare blokken<\/p>\n\n\n\n<p>3. Het aangemaakte Button-blok kan verder worden geconfigureerd<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_button_text_and_URL_address\"><\/span>Knoptekst en URL-adres toevoegen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Zodra de WordPress Blokknop is gemaakt, kun je er tekst in typen. Onthoud dat het voor een call to action knop beter is om een korte tekst met een duidelijke boodschap te gebruiken. Je kunt tekst vet, cursief of onderstreept weergeven. Al deze wijzigingen kunnen worden gemaakt door in de werkbalk te klikken. Je kunt de knop ook uitlijnen of centreren.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-edit.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"280\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-edit.gif\" alt=\"Knop editatie\" class=\"wp-image-81135\"\/><\/a><figcaption>In een paar seconden kun je het uiterlijk van je knop volledig veranderen<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Een knop verwijst meestal naar een andere pagina of externe website. Om die reden is er recht onder de knop een invoer om het URL-adres toe te voegen. Voordeel is dat je voor het toevoegen van een URL geen tekst hoeft te selecteren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Changing_button_color\"><\/span>Kleur van knop wijzigen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Met de nieuwe editor kun je het WordPress buttonblok in een paar seconden aanpassen. Gebruik gewoon de instellingen in de zijbalk aan de rechterkant. Je kunt de achtergrondkleur van de knop of de tekstkleur in de knop wijzigen. Er zijn standaard voorgedefinieerde kleuren of je kunt je eigen kleur kiezen. Alle wijzigingen zijn direct zichtbaar om te zien of de kleurencombinatie goed is.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-color.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-color.gif\" alt=\"Kleur van knop wijzigen\" class=\"wp-image-81134\"\/><\/a><figcaption>Directe kleurverandering van knop na klikken op gekozen kleur<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Het mooie is dat als je de verkeerde combinaties kiest, bijvoorbeeld grijze achtergrond en witte tekstkleur, WordPress block editor je zal waarschuwen dat de knop niet leesbaar is op je website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Find_your_own_button_style\"><\/span>Vind je eigen knoopstijl<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-style.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"520\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-style.gif\" alt=\"Knopstijlopties\" class=\"wp-image-81139\"\/><\/a><figcaption>Wijzig de stijl van je knop rechtstreeks vanuit de werkbalk of de instellingen van de Inspector<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Om de knop supersnel en zonder enige moeite te maken of te wijzigen, kun je een van de voorbereide stijlen gebruiken. De knop kan op die manier worden gewijzigd in bijvoorbeeld afgerond, omrand of rechthoekig. Experimenteer wat het beste past bij de stijl of het ontwerp van je website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Editing_button_with_custom_CSS\"><\/span>Knop bewerken met aangepaste CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Nog meer maatwerk kan worden bereikt met behulp van aangepaste CSS klassen. Op die manier kun je je eigen CSS stijlen toevoegen en de knop in WordPress editor precies zo stylen als jij dat wilt.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-class.png\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"435\" src=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-class.png\" alt=\"Aangepaste klasse-invoer\" class=\"wp-image-81133\" srcset=\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-class.png 720w, https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/07\/gutenberg-button-class-300x181.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><figcaption>Aangepaste klasse invoegen om je knop te stylen<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Zoals we kunnen zien is er een veel eenvoudigere manier dan het gebruik van de knop shortcode. WordPress Button blok kan worden gebruikt in elk thema dat compatibel is met WordPress Block Editor. Lees meer over ons gloednieuwe Citadela WordPress thema. Het is speciaal ontworpen en ontwikkeld voor WordPress Block Editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Extra_tip_at_the_end\"><\/span><a id=\"extratipbutton\"><\/a>Extra tip aan het einde<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vergeet niet om je WordPress button block en button succes zelf te monitoren. Als je Google Analytics gebruikt, kun je een unieke URL maken. Om bezoekersklikken te volgen kun je het volgende toevoegen <a href=\"https:\/\/ga-dev-tools.appspot.com\/campaign-url-builder\/\" target=\"_blank\" rel=\"noopener\">Google UTM-parameter<\/a>. URL kan worden aangemaakt met URL builder. Door parameters toe te voegen kun je de bron van het bezoek identificeren. Dit is erg handig als je wilt weten waarvandaan bezoekers naar je winkelpagina zijn gekomen.<\/p>\n\n\n\n<p><em>Wat is het grootste probleem dat jij op dit moment hebt met WordPress button block? Laten we het bespreken in de reacties hieronder. Deel je ervaring met het gebruik van knoppen op websites.<\/em><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhoudsopgave<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Why_is_WordPress_button_block_so_important\" >Waarom is WordPress button block zo belangrijk?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Adding_button_on_any_Page_or_Post_in_WordPress\" >Knop toevoegen aan een pagina of bericht in WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Situation_before_WordPress_5\" >Situatie v\u00f3\u00f3r WordPress 5<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#How_to_use_Button_block_in_WordPress_editor\" >Hoe gebruik je een knoppenblok in de WordPress editor?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Step-by-step_guide_how_to_add_button_in_WordPress_editor\" >Stap-voor-stap handleiding voor het toevoegen van een knop in WordPress editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Add_button_text_and_URL_address\" >Knoptekst en URL-adres toevoegen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Changing_button_color\" >Kleur van knop wijzigen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Find_your_own_button_style\" >Vind je eigen knoopstijl<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Editing_button_with_custom_CSS\" >Knop bewerken met aangepaste CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.ait-themes.club\/nl\/hoe-knop-toevoegen-in-wordpress-editor-blog\/#Extra_tip_at_the_end\" >Extra tip aan het einde<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>","protected":false},"excerpt":{"rendered":"<p>Waarom is WordPress button block zo belangrijk? Navigatie op de website is belangrijk voor bezoekers en klanten. We willen ze van de ene subpagina naar de andere sturen. Hen door het hele winkelproces leiden. Daarom is het belangrijk om belangrijke links correct in de pagina-inhoud in te voegen. In principe hebben we 2 opties. Gebruik een standaardlink of -knop. [...]<\/p>","protected":false},"author":1,"featured_media":81131,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_citadela_custom_class":"","footnotes":""},"categories":[4,50],"tags":[15],"citadela-post-location":[],"class_list":["post-81124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-building-websites-in-wordpress","category-citadela-pro-documentation","tag-gutenberg-wordpress-editor"],"_links":{"self":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/81124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/comments?post=81124"}],"version-history":[{"count":2,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/81124\/revisions"}],"predecessor-version":[{"id":94320,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/posts\/81124\/revisions\/94320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/media\/81131"}],"wp:attachment":[{"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/media?parent=81124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/categories?post=81124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/tags?post=81124"},{"taxonomy":"citadela-post-location","embeddable":true,"href":"https:\/\/www.ait-themes.club\/nl\/wp-json\/wp\/v2\/citadela-post-location?post=81124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}