{"id":5790,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-button-widget\/"},"modified":"2022-06-09T12:22:24","modified_gmt":"2022-06-09T12:22:24","slug":"landing-page-button-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/landing-pages\/builder\/button\/","title":{"rendered":"Landing Page Button Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Button widget<\/strong> helps you add a CTA button to your landing page. You can configure multiple actions for the button clicks.<\/p>\n<blockquote class=\"elevio-box-success\"><p>For example, you can use this button:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>To <strong>redirect&nbsp;<\/strong>the clicks to:\n<ul style=\"list-style-type: circle;\">\n<li style=\"margin-left: 20px;\">an external web URL, or<\/li>\n<li style=\"margin-left: 20px;\">another landing page, or<\/li>\n<li style=\"margin-left: 20px;\">an Email address.<\/li>\n<\/ul>\n<\/li>\n<li>Open a <strong>pop-up<\/strong> window as a click action.<\/li>\n<li>To <strong>confirm an opt-in<\/strong> request and redirect to a thank you page.<\/li>\n<li>As a <strong>Call&nbsp;<\/strong>button (Clicks redirected to call the specified phone number).<\/li>\n<li>As an <strong>SMS&nbsp;<\/strong>button (Clicks redirected to send an SMS to the specified phone number).<\/li>\n<li>To <strong>download&nbsp;<\/strong>a file on the button click.<\/li>\n<\/ul>\n<\/blockquote>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use a Button Widget in a Landing Page<\/h2>\n<h3>Step 1<\/h3>\n<h3>Navigate to the landing page builder<\/h3>\n<p>Use the <strong>Main Menu&nbsp;<\/strong>on the left to create a <strong>landing page<\/strong> and subsequently <a href=\"\/hc\/landing-pages\/builder\/create\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to the landing page builder<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2<\/h3>\n<h3>Add a clickable Button to your landing page<\/h3>\n<p>The blank area on the left is the <strong>Workarea<\/strong> where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as <a href=\"\/hc\/landing-pages\/builder\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>widgets<\/strong><\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1725\" title=\"Landing page builder campaign\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-builder-campaign.png\" alt=\"Landing page builders campaign area\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>In order to add a clickable button to your landing page, drag and drop the <strong>Button&nbsp;<\/strong>widget to the <strong>work area&nbsp;<\/strong><em>(as highlighted in the screenshot below)<\/em>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1726\" title=\"Landing page button widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-button-widget.png\" alt=\"Landing page builders button widget\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Configure the click action for the Button<\/h3>\n<p>As you drop the button widget into the work area, the widget settings are displayed on the right <em>(as highlighted in the screenshot below)<\/em>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1727\" title=\"Landing page button settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-button-settings.png\" alt=\"Landing page builder button settings\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, use the fields:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Button text<\/strong> &#8211; to add\/edit the text that appears on the clickable button.<\/li>\n<li><strong>Button action<\/strong> &#8211; <a href=\"\/hc\/landing-pages\/builder\/cta-button\/\" target=\"_blank\" rel=\"noopener noreferrer\">to specify the action that you want to trigger with the click of this button<\/a>.<\/li>\n<\/ul>\n<p>Based on the option you select in this field, the subsequent field gathers the required information relevant to that action.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Style the Button Widget<\/h3>\n<p>You can edit the appearance of your button using the <strong>Style&nbsp;<\/strong>tab <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1728\" title=\"Landing page button style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-creator-button-style.png\" alt=\"Landing page creator button styling\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, the different design options available are:<\/p>\n<h4>4.1 Button Font settings and Background color<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Button Background color<\/strong> to change the color of the button background<\/li>\n<li><strong>Border size and color<\/strong> &#8211; to change the color of the button border (use the sizing bar to adjust the thickness of the border)<\/li>\n<li><strong>Border Style<\/strong> to change the type of button border \u2013 solid, dotted, etc.,<\/li>\n<li><strong>Rounded corners<\/strong> sizing bar to add rounded corners to the button.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.2 Button text style<\/h4>\n<p>The different options available under this section help you edit the font style, color, font family, and font-weight of the button text.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>4.3 Button Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Button width<\/strong> to adjust the width of the button<\/li>\n<li><strong>Button Position<\/strong> to change the alignment of the button in the design<\/li>\n<li><strong>Padding&nbsp;<\/strong>to enter in the desired padding measurements.<strong>&nbsp;<\/strong> Padding refers to the gap between the text entered in the button and the button boundary.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1729 size-full\" title=\"Landing page button padding\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingpage-creator-button-padding.png\" alt=\"Landing page creator button styling options\" width=\"556\" height=\"381\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<\/li>\n<\/ul>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added a custom CTA button to your landing page!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add text to a landing page using the <a href=\"\/hc\/landing-pages\/builder\/text\/\" target=\"_blank\" rel=\"noopener noreferrer\">Text Widget<\/a>!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The button widget helps you add a CTA button to your landing page. You can configure multiple actions for the button clicks.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[349],"ht-kb-tag":[],"class_list":["post-5790","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-landing-page-builder-en_in"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb\/5790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/comments?post=5790"}],"version-history":[{"count":4,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb\/5790\/revisions"}],"predecessor-version":[{"id":9631,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb\/5790\/revisions\/9631"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/media?parent=5790"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb-category?post=5790"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/wp-json\/wp\/v2\/ht-kb-tag?post=5790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}