{"id":165,"date":"2016-01-29T07:51:54","date_gmt":"2016-01-29T07:51:54","guid":{"rendered":"http:\/\/loftocean.com\/curious-doc\/?page_id=165"},"modified":"2016-03-14T03:10:51","modified_gmt":"2016-03-14T03:10:51","slug":"button","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftbuilder\/modules\/button\/","title":{"rendered":"Button"},"content":{"rendered":"<p>When you add a button, it inherits the default button style you have set in <strong>Plugin Settings<\/strong>, We have talked about how to set up the default type of all buttons in <a href=\"http:\/\/loftocean.com\/doc\/loftbuilder\/plugin-settings\/overall\/default-button-style\/\" target=\"_blank\">this chapter<\/a>. You can always change a button&#8217;s styles when editing it.<\/p>\n<p>You can add multiple buttons as a group in one button module, and each button in the group can have different styles.<\/p>\n<h5>Editing a Button Module<\/h5>\n<ol>\n<li>Move your cursor onto the button module to show the <strong>Module Toolbar<\/strong>, click the <strong><i class=\"fa fa-pencil\"><\/i> (Edit)<\/strong> button.<\/li>\n<li>The first button in the group now is highlighted, which means you are editing this one. To edit another button in the group, just click on that button to switch on its editing mode. And you can see the <strong>Button Editing Tools<\/strong>:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-921\" src=\"http:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/button-module-editing-tools-chart.png\" alt=\"button-module-editing-tools-chart\" width=\"1730\" height=\"430\" srcset=\"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/button-module-editing-tools-chart.png 1730w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/button-module-editing-tools-chart-300x75.png 300w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/button-module-editing-tools-chart-768x191.png 768w, https:\/\/loftocean.com\/doc\/loftbuilder\/wp-content\/uploads\/sites\/2\/2016\/01\/button-module-editing-tools-chart-1024x255.png 1024w\" sizes=\"auto, (max-width: 1730px) 100vw, 1730px\" \/><\/p>\n<ol>\n<li><strong>Button Style<\/strong> &#8211; Solid \/ Border.<\/li>\n<li><strong>Button Shape<\/strong> &#8211; Rectangle \/ Rounded Corner \/ Pill. Click to select one.<\/li>\n<li><strong>Rounded Corner Size<\/strong> &#8211; Set the corner size when you choose <strong>Rounded Corner<\/strong> shape.<\/li>\n<li><strong>Button Color<\/strong> &#8211; Click the open the color picker.<\/li>\n<li><strong>Button Size<\/strong> &#8211; Choose from 3 sizes.<\/li>\n<li><strong>Button Link<\/strong> &#8211; Edit link url of this button.<\/li>\n<li><strong>Add Button<\/strong> &#8211; Click to add another button after the current one.<\/li>\n<li><strong>Remove Button<\/strong> &#8211; Click to remove the current button.<\/li>\n<li><strong>Button Text<\/strong> &#8211; Click on the button and type the button text.<\/li>\n<\/ol>\n<\/li>\n<li>Click on anywhere outside of the module to exit the <strong>Module Edit Mode<\/strong>.<\/li>\n<li>You can turn off the <strong>Content Edit Mode<\/strong> to see the page preview.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>When you add a button, it inherits the default button style you have set in Plugin Settings, We have talked about how to set up the default type of all buttons in this chapter. You can always change a button&#8217;s styles when editing it. You can add multiple buttons as a group in one button [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":152,"menu_order":60,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-165","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":4,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/165\/revisions"}],"predecessor-version":[{"id":923,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/165\/revisions\/923"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/152"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/media?parent=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}