{"id":2872,"date":"2025-05-30T09:01:59","date_gmt":"2025-05-30T09:01:59","guid":{"rendered":"https:\/\/www.radiustheme.com\/docs\/claddons\/?post_type=docs&p=2872"},"modified":"2025-05-30T09:02:00","modified_gmt":"2025-05-30T09:02:00","password":"","slug":"header-button","status":"publish","type":"docs","link":"https:\/\/www.radiustheme.com\/docs\/claddons\/docs\/elementor-addons\/header-button\/","title":{"rendered":"Header Button"},"content":{"rendered":"\n

This Elementor widget allows you to include buttons like \u2018Compare<\/strong>,\u2019 \u2018Favourites<\/strong>,\u2019 \u2018Chat<\/strong>,\u2019 \u2018My Account<\/strong>,\u2019 and more at the top of a page to ensure easy navigation. Let\u2019s explore its settings.<\/p>\n\n\n\n

The \u2018Content<\/strong>\u2019 tab on the left-hand side has these settings: General<\/strong>, Content Visibility<\/strong>, Compare<\/strong>, Favourites<\/strong>, Profile<\/strong>, Chat Option<\/strong>, and Add listing button<\/strong>.<\/p>\n\n\n\n

General<\/h5>\n\n\n\n

It has the following options:<\/p>\n\n\n\n

1)<\/strong> Content spacing<\/strong>: This box control element lets you set the spacing around icons.\u00a0<\/p>\n\n\n\n

2) Icon Border Radius<\/strong>: This box control UI element allows you to set the border radius (rounding of corners) for an icon.<\/p>\n\n\n\n

3) Icon Border Size<\/strong>: You can increase and decrease icon border size using this slider control.<\/p>\n\n\n\n

4)<\/strong> Icon Size<\/strong>: This slider control allows you to expand or reduce the size of the header button icon.<\/p>\n\n\n\n

5)<\/strong> Icon Gap<\/strong>: Use it to enlarge or shrink the gap between header buttons.<\/p>\n\n\n\n

\"General<\/figure>\n\n\n\n
Content Visibility<\/h5>\n\n\n\n

The \u201cContent Visibility<\/strong>\u201d setting has options to enable you to display or hide several header buttons such as \u2018Comapre<\/strong>,\u2019 \u2018Chat<\/strong>,\u2019 \u201cAdd Listing<\/strong>\u201d button, and so on.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
Compare<\/h5>\n\n\n\n

The \u2018Compare<\/strong>\u2019 setting has a \u201cCart Icon<\/strong>\u201d option to change the \u2018Compare<\/strong>\u2019 button icon.<\/p>\n\n\n\n

\"Compare<\/figure>\n\n\n\n
Favourites<\/h5>\n\n\n\n

This one has a similar option to the \u2018Compare<\/strong>\u2019 setting to replace \u2018Favorites<\/strong>\u2019 button icon.<\/p>\n\n\n\n

\"Favorites<\/figure>\n\n\n\n
Profile<\/h5>\n\n\n\n

Similar to the \u2018Compare<\/strong>\u2019 and \u2018Favourites<\/strong>\u2019 settings, this one also has a setting to change the profile button icon.<\/p>\n\n\n\n

\"Profile<\/figure>\n\n\n\n
Chat Option<\/h5>\n\n\n\n

The \u201cChat Option<\/strong>\u201d also has a UI section to help you add a chat icon for the chat button.<\/p>\n\n\n\n

\"Chat<\/figure>\n\n\n\n
Add listing button<\/h5>\n\n\n\n

\u201cAdd listing button<\/strong>\u201d has several options to customize the add listing button according to your preferences. Here are those options:<\/p>\n\n\n\n

1.1)<\/strong> Button text<\/strong>: This field allows you to write the \u201cAdd listing button<\/strong>\u201d text.<\/p>\n\n\n\n

1.2)<\/strong> Add Listing Icon<\/strong>: With this UI section, you can change \u201cAdd listing button<\/strong>\u201d icon.<\/p>\n\n\n\n

1.3)<\/strong> Button width<\/strong>: This slider control lets you control the width of \u201cAdd listing button<\/strong>.\u201d<\/p>\n\n\n\n

1.4)<\/strong> Button Height<\/strong>: You can increase or decrease the height of \u201cAdd listing button<\/strong>\u201d with this slider control.<\/p>\n\n\n\n

Style<\/h5>\n\n\n\n

This tab helps you work on the design of the \u201cAdd listing button<\/strong>\u201d icon and the button itself. This tab has two primary settings\u2014one for the icon and another for the button. Let\u2019s explore these.<\/p>\n\n\n\n

Icon style<\/em><\/h6>\n\n\n\n

This setting enables you to change icon color, icon background color, its border type, border width, border color, icon count color, icon hover background color, and more.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
Button style<\/em><\/h6>\n\n\n\n

You can change the button text and background color using this setting. Note that you can even change the button hover background and text color with it.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

This Elementor widget allows you to include buttons like \u2018Compare,\u2019 \u2018Favourites,\u2019 \u2018Chat,\u2019 \u2018My Account,\u2019 and more at the top of a page to ensure easy navigation. Let\u2019s explore its settings. The \u2018Content\u2019 tab on the left-hand side has these settings: General, Content Visibility, Compare, Favourites, Profile, Chat Option, and Add listing button. General It has […]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_rtrb_font_attr":"","footnotes":""},"doc_category":[57],"doc_tag":[],"class_list":["post-2872","docs","type-docs","status-publish","hentry","doc_category-elementor-addons"],"year_month":"2026-08","word_count":416,"total_views":"2","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"ahai","author_nicename":"ahai","author_url":"https:\/\/www.radiustheme.com\/docs\/claddons\/author\/ahai\/"},"doc_category_info":[{"term_name":"Elementor Addons","term_url":"https:\/\/www.radiustheme.com\/docs\/claddons\/docs-category\/elementor-addons\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/docs\/2872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/comments?post=2872"}],"version-history":[{"count":1,"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/docs\/2872\/revisions"}],"predecessor-version":[{"id":2881,"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/docs\/2872\/revisions\/2881"}],"wp:attachment":[{"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/media?parent=2872"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/doc_category?post=2872"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.radiustheme.com\/docs\/claddons\/wp-json\/wp\/v2\/doc_tag?post=2872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}