{"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&p=850"},"modified":"2023-09-09T14:39:02","modified_gmt":"2023-09-09T14:39:02","slug":"button","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/cozystay\/ptkb\/button\/","title":{"rendered":"Button"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

When editing a page with Elementor, you will find the “Button (CS)<\/strong>” element in the left panel. With this element, you can easily add buttons that inherit the theme’s built-in styles and customize them.\"\"<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Content Tab<\/h6>
  1. Text<\/strong>: Enter the button’s text.<\/li>
  2. 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\u00a0rel=nofollow<\/em> to the link.<\/li>
  3. Alignment<\/strong>: Align the button to the left, center, right, or justified in relation to its column.<\/li>
  4. Popup Box<\/strong>: Enable a popup after clicking the button. More details can be found in this tutorial<\/a>.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
    Style Tab<\/h6>
    1. Button Style<\/strong>: Solid, Outline, Underline<\/li>
    2. Button Shape<\/strong>: Default, Square, Rounded, Pill<\/li>
    3. Button Size<\/strong>: Small, Medium, Large, Extra Large<\/li>
    4. Button Color<\/strong>: Default, Primary, Secondary, Black, White, Custom<\/li><\/ol>

      When selecting “Default<\/strong>” as Button Shape<\/em><\/strong> or Button Color<\/em><\/strong>, the related style will be inherited from the global settings (Customizer > Colors & Styles > Buttons).<\/p>

      When the Button Color<\/strong><\/em> is set to “Primary”<\/strong> or “Secondary”<\/strong>, it inherits the Primary Color<\/strong> or the Secondary Color<\/strong> set in Customizer > Colors & Styles > General Colors.<\/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 Customizer<\/b> > Colors & Styles<\/b> section, and make sure that the color of these buttons is set to “Default” or “Primary” or “Secondary”.<\/p>

      If the button color is set to “Custom”, 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

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\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
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t
      Button in “Section Title” Element<\/h6>\n

      Sometimes when you click a button to edit, and you will find that you are actually locate a “Section Title<\/strong>” element.<\/p>\n

      In this case, please scroll down in the left panel and find “Button Text<\/strong>” and “Link<\/strong>“. And you will find the style options of the button in the Style<\/strong> tab<\/strong>. Please refer to the video below:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t
      <\/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":[8],"class_list":["post-850","ptkb","type-ptkb","status-publish","hentry","ptkb_category-cs-elements"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/types\/ptkb"}],"version-history":[{"count":5,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/850\/revisions"}],"predecessor-version":[{"id":1370,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/850\/revisions\/1370"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"ptkb_category","embeddable":true,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb_category?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}