{"id":8198,"date":"2019-06-06T07:46:22","date_gmt":"2019-06-06T07:46:22","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8198"},"modified":"2023-01-24T17:54:39","modified_gmt":"2023-01-24T17:54:39","slug":"jetelements-button-widget-how-to-add-a-button-widget-to-your-website","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/","title":{"rendered":"How to Add a Button Widget with Custom Text and Links"},"content":{"rendered":"\n<p>The navigation on the page is made by using buttons as they open the hidden information and lead you to the different parts of the website.<\/p>\n\n\n\n<p>The Button widget from JetElements allows you to add buttons with custom text and links to any content block on the website. Also, you can apply hover effects to it and add attributes to the links.<\/p>\n\n\n\n<p>Reading this tutorial, you will learn how to add a <strong>Button<\/strong> widget to your site and customize it. So, let\u2019s begin!<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/button-example.png\" alt=\"Buttons example\" class=\"wp-image-21071\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Add the Button widget to the page<\/strong><\/p>\n\n\n\n<p>Firstly, open the page to which you want to add a <strong>Button <\/strong>widget and click on the &#8220;<strong>Edit with Elementor<\/strong>&#8221; button to proceed. Secondly, drag-n-drop the widget to the needed section.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/button-widget-2.png\" alt=\"Button widget\" class=\"wp-image-21073\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Set the content<\/strong><\/p>\n\n\n\n<p>Open the <strong>Content<\/strong> left-side menu tab and unfold the <strong>Content <\/strong>section. You can add <strong>Button Icon<\/strong> and <strong>Button Label Text<\/strong> for the <strong>Normal <\/strong>state of the button and when the user <strong>Hovers <\/strong>a pointer over it. In the <strong>Button Link<\/strong> field, you can add a link to the page the button will lead. <\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/button-content.png\" alt=\"Button Content section\" class=\"wp-image-21070\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Get along with the settings<\/strong><\/p>\n\n\n\n<p>Go to the <strong>Settings<\/strong> section. You can select the <strong>Hover Effect<\/strong>, which is simply an animation effect that is triggered once you hover over the button. The sides of your button will change each other with this animation effect.<\/p>\n\n\n\n<p>Also, you can enable or disable the <strong>Icon<\/strong>. And if you decide to use the icon, you can change its <strong>Position<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/button-settings-1.png\" alt=\"Button Settings section\" class=\"wp-image-21072\"\/><\/div>\n\n\n\n<p>Finally, manage the <strong>Style <\/strong>settings block. Here you\u2019re able to change the settings for every single element of this button. The last step here is to click on the &#8220;<strong>Publish<\/strong>&#8221; or &#8220;<strong>Update<\/strong>&#8221; button and preview the result.<\/p>\n\n\n\n<p>These easy steps are all you have to do to add a button to your website. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains how to add a Button widget with custom text and links to any content on your website using the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[518],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Embed Buttons to Elementor page | Crocoblock<\/title>\n<meta name=\"description\" content=\"Check how to add Buttons and customize them with text and links using JetElements plugin for Elementor. Use plugin&#039;s opportunities easily!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Embed Buttons to Elementor page | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Check how to add Buttons and customize them with text and links using JetElements plugin for Elementor. Use plugin&#039;s opportunities easily!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-24T17:54:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/button-example.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/\",\"name\":\"JetElements: How to Embed Buttons to Elementor page | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-06T07:46:22+00:00\",\"dateModified\":\"2023-01-24T17:54:39+00:00\",\"description\":\"Check how to add Buttons and customize them with text and links using JetElements plugin for Elementor. Use plugin's opportunities easily!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Button Widget with Custom Text and Links\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Embed Buttons to Elementor page | Crocoblock","description":"Check how to add Buttons and customize them with text and links using JetElements plugin for Elementor. Use plugin's opportunities easily!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Embed Buttons to Elementor page | Crocoblock","og_description":"Check how to add Buttons and customize them with text and links using JetElements plugin for Elementor. Use plugin's opportunities easily!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/","og_site_name":"Help Center","article_modified_time":"2023-01-24T17:54:39+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/button-example.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/","name":"JetElements: How to Embed Buttons to Elementor page | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-06T07:46:22+00:00","dateModified":"2023-01-24T17:54:39+00:00","description":"Check how to add Buttons and customize them with text and links using JetElements plugin for Elementor. Use plugin's opportunities easily!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-button-widget-how-to-add-a-button-widget-to-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add a Button Widget with Custom Text and Links"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8198"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8198"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8198"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}