{"id":850,"date":"2022-12-04T08:43:37","date_gmt":"2022-12-04T08:43:37","guid":{"rendered":"https:\/\/loftocean.com\/doc\/patiotime\/?post_type=ptkb&#038;p=850"},"modified":"2023-02-13T09:43:10","modified_gmt":"2023-02-13T09:43:10","slug":"button","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/patiotime\/ptkb\/button\/","title":{"rendered":"Button"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"850\" class=\"elementor elementor-850\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-31af623 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"31af623\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2a7f57e\" data-id=\"2a7f57e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d116427 elementor-widget elementor-widget-text-editor\" data-id=\"d116427\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When editing a page with Elementor, you will find the &#8220;<strong>Button (PT)<\/strong>&#8221; element in the left panel. With this element, you can easily add buttons that inherit the theme&#8217;s built-in styles and customize them.<\/p><p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-891\" src=\"https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button.png\" alt=\"\" width=\"302\" height=\"502\" srcset=\"https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button.png 604w, https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button-181x300.png 181w, https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button-600x996.png 600w, https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button-550x913.png 550w, https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button-370x614.png 370w, https:\/\/loftocean.com\/doc\/patiotime\/wp-content\/uploads\/sites\/6\/2022\/12\/pt-button-255x423.png 255w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/p><h6>Content Tab<\/h6><ol><li><strong>Text<\/strong>: Enter the button&#8217;s text.<\/li><li><strong>Link<\/strong>: Set the URL for the button\u2019s link. Click the cog to set the link to either open in a new window or to add\u00a0<em>rel=nofollow<\/em> to the link.<\/li><li><strong>Alignment<\/strong>: Align the button to the left, center, right, or justified in relation to its column.<\/li><li><strong>Popup Box<\/strong>: Enable a popup after clicking the button. More details can be found in <a href=\"https:\/\/loftocean.com\/doc\/patiotime\/ptkb\/popup-box\/#enable-popup-after-button-click\">this tutorial<\/a>.<\/li><\/ol><h6>Style Tab<\/h6><ol><li><strong>Button Style<\/strong>: Solid, Outline, Underline<\/li><li><strong>Button Shape<\/strong>: Default, Square, Rounded, Pill<\/li><li><strong>Button Size<\/strong>: Small, Medium, Large, Extra Large<\/li><li><strong>Button Color<\/strong>: Default, Primary, Secondary, Black, White, Custom<\/li><\/ol><p>When selecting &#8220;<strong>Default<\/strong>&#8221; as <strong><em>Button Shape<\/em><\/strong> or <strong><em>Button Color<\/em><\/strong>, the related style will be inherited from the global settings (Customizer &gt; Colors &amp; Styles &gt; Buttons).<\/p><p>When the <em><strong>Button Color<\/strong><\/em> is set to &#8220;<strong>Primary&#8221;<\/strong> or &#8220;<strong>Secondary&#8221;<\/strong>, it inherits the <strong>Primary Color<\/strong> or the <strong>Secondary Color<\/strong> set in Customizer &gt; Colors &amp; Styles &gt; General Colors.<\/p><p>Therefore, if you would like to change the colors of several buttons on your website at the same time, you can check and change the relevant global settings in the <b>Customizer<\/b> &gt; <b>Colors &amp; Styles<\/b> section, and make sure that the color of these buttons is set to &#8220;Default&#8221; or &#8220;Primary&#8221; or &#8220;Secondary&#8221;.<\/p><p>If the button color is set to &#8220;Custom&#8221;, it will no longer be affected by the global settings.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-232abf3 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"232abf3\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22a8638 elementor-widget elementor-widget-text-editor\" data-id=\"22a8638\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h6>Button in &#8220;Section Title&#8221; Element<\/h6><p>Sometimes when you click a button to edit, and you will find that you are actually locate a &#8220;<strong>Section Title<\/strong>&#8221; element.<\/p><p>In this case, please scroll down in the left panel and find &#8220;<strong>Button Text<\/strong>&#8221; and &#8220;<strong>Link<\/strong>&#8220;. And you will find the style options of the button in the <strong>Style<\/strong> <strong>tab<\/strong>.<\/p><p>Please watch the following video tutorial:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e12460b elementor-widget elementor-widget-video\" data-id=\"e12460b\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/yp2Q0S1-Pmw&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"menu_order":0,"template":"","ptkb_category":[7],"class_list":["post-850","ptkb","type-ptkb","status-publish","hentry","ptkb_category-pt-elements"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/types\/ptkb"}],"version-history":[{"count":5,"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb\/850\/revisions"}],"predecessor-version":[{"id":895,"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb\/850\/revisions\/895"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"ptkb_category","embeddable":true,"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb_category?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}