{"id":953,"date":"2023-01-02T10:00:00","date_gmt":"2023-01-02T09:00:00","guid":{"rendered":"https:\/\/rankify.pro\/?p=953"},"modified":"2023-11-13T08:59:08","modified_gmt":"2023-11-13T07:59:08","slug":"adding-a-button-to-a-table-in-gutenberg-wordpress","status":"publish","type":"post","link":"https:\/\/rankify.pro\/seo-tools\/adding-a-button-to-a-table-in-gutenberg-wordpress\/","title":{"rendered":"Adding a button to a table in Gutenberg, WordPress"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Adding a button to a table in Gutenberg, WordPress (without plugins)<\/h1>\n\n\n\n<p>Here is a little tutorial on how to add buttons to your Gutenberg Tables in WordPress. <\/p>\n\n\n\n<p>You can see an example below. <\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th><\/th><th>Software A<\/th><th>Software B<\/th><th>Software C<\/th><th>Software D<\/th><th>Software E<\/th><\/tr><\/thead><tbody><tr><td>Review <\/td><td>Review link<\/td><td>Review link<\/td><td>Review link<\/td><td>Review link<\/td><td>Review link<\/td><\/tr><tr><td>Rating<\/td><td>\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50\u2b50\u2b50<\/td><\/tr><tr><td>Price<\/td><td>$100<\/td><td>$150<\/td><td>$120<\/td><td>$100<\/td><td>$110<\/td><\/tr><tr><td>Pros<\/td><td>Good, smart<\/td><td>Good, fast<\/td><td>Good, nice<\/td><td>Good, design<\/td><td>Good, easy<\/td><\/tr><tr><td>Link<\/td><td>777<div class=\"wp-block-button has-custom-font-size has-small-font-size\"><\/div><div class=\"wp-block-button has-custom-font-size has-small-font-size\"><\/div><\/td><td><div class=\"wp-block-button has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link has-luminous-vivid-orange-background-color has-background wp-element-button\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\" href=\"#1234\"><strong>Software B<\/strong><\/a><\/div><div class=\"wp-block-button has-custom-font-size has-small-font-size\"><\/div><\/td><td><div class=\"wp-block-button has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link has-vivid-red-background-color has-background wp-element-button\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\"><strong>Software C<\/strong><\/a><\/div><\/td><td><div class=\"wp-block-button has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link has-ast-global-color-0-background-color has-background wp-element-button\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\"><strong>Software D<\/strong><\/a><\/div><\/td><td><div class=\"wp-block-button has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link has-ast-global-color-3-background-color has-background wp-element-button\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\"><strong>Software E<\/strong><\/a><\/div><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<iframe loading=\"lazy\" width=\"720\" height=\"460\" src=\"https:\/\/www.youtube.com\/embed\/qHDbTIbcjRg?si=tcCYL-vzyApQukkA\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">How to add a button in your affiliate tables, in 5 steps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: design your button, outside the table<\/h3>\n\n\n\n<p>I explained the steps carefully in the video. But Step 1 is to add a new button to your page, outside the table. But before you insert it into the table, you have to design the button. I would recommend the following steps: <\/p>\n\n\n\n<ol>\n<li>Make the text Bold<\/li>\n\n\n\n<li>Add the URL you want it to link to<\/li>\n\n\n\n<li>Go to the block options: <\/li>\n\n\n\n<li>Add a background color that stands out<\/li>\n\n\n\n<li>Change Typography to S-size (which is small, and make the button fit the table better)<\/li>\n\n\n\n<li>Go to Dimensions, and change the padding to 1 (bottom and top, left, and right)<\/li>\n\n\n\n<li>Go to Radius and change the radius to 5px, to make it look like the button below<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size has-small-font-size\"><a class=\"wp-block-button__link has-vivid-red-background-color has-background wp-element-button\" href=\"#\" style=\"border-radius:5px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\"><strong>Software A<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Copy the HTML of the button<\/h3>\n\n\n\n<p>Once you have the button designed to your liking, you need to copy the HTML of the button. You do this by selecting the button, and clicking on the 3 dots in the menu that appears. Once you clicked the 3 dots, you see more options and select Edit as HTML. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large shadowbox\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/rankify.pro\/wp-content\/uploads\/buttons-gutenberg-table-step2-1024x569.png\" alt=\"\" class=\"wp-image-957\" srcset=\"https:\/\/rankify.pro\/wp-content\/uploads\/buttons-gutenberg-table-step2-1024x569.png 1024w, https:\/\/rankify.pro\/wp-content\/uploads\/buttons-gutenberg-table-step2-300x167.png 300w, https:\/\/rankify.pro\/wp-content\/uploads\/buttons-gutenberg-table-step2-768x427.png 768w, https:\/\/rankify.pro\/wp-content\/uploads\/buttons-gutenberg-table-step2.png 1033w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>When the HTML appears, select all the HTML, and Copy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Paste the HTML into the right place in the table. <\/h3>\n\n\n\n<p>Once you have the HTML copied from the button, you need to insert it into the Table. <\/p>\n\n\n\n<p>The only way I figured to do this, is by editing the HTML of the table. But to find the place you need to add this particular HTML code, I normally add an easy to find number or name. In my case, I use the number <strong>777 <\/strong><\/p>\n\n\n\n<p>When you edit the HTML of the table, you simple do Ctrl+F and search for 777. <\/p>\n\n\n\n<p>Select the number, and replace it with the HTML you just copied. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding a button to a table in Gutenberg, WordPress (without plugins) Here is a little tutorial on how to add buttons to your Gutenberg Tables in WordPress. You can see an example below. Software A Software B Software C Software D Software E Review Review link Review link Review link Review link Review link Rating [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":959,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Trick: How to add buttons to Gutenberg Table in WordPress without Plugin!","_seopress_titles_desc":"Here is a short tutorial to make your Gutenberg tables stand out with nice colorful buttons, without using Plugins!","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress.png",1920,1080,false],"thumbnail":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress-150x150.png",150,150,true],"medium":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress-300x169.png",300,169,true],"medium_large":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress-768x432.png",768,432,true],"large":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress-1024x576.png",1024,576,true],"1536x1536":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress-1536x864.png",1536,864,true],"2048x2048":["https:\/\/rankify.pro\/wp-content\/uploads\/how-to-add-buttons-to-tables-gutenberg-wordpress.png",1920,1080,false]},"uagb_author_info":{"display_name":"Marco","author_link":"https:\/\/rankify.pro\/author\/marco\/"},"uagb_comment_info":0,"uagb_excerpt":"Adding a button to a table in Gutenberg, WordPress (without plugins) Here is a little tutorial on how to add buttons to your Gutenberg Tables in WordPress. You can see an example below. Software A Software B Software C Software D Software E Review Review link Review link Review link Review link Review link Rating&hellip;","_links":{"self":[{"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/posts\/953"}],"collection":[{"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/comments?post=953"}],"version-history":[{"count":0,"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/posts\/953\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/media\/959"}],"wp:attachment":[{"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/categories?post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rankify.pro\/wp-json\/wp\/v2\/tags?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}