{"id":104395,"date":"2023-02-13T17:16:27","date_gmt":"2023-02-13T11:46:27","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=104395"},"modified":"2023-07-18T10:25:03","modified_gmt":"2023-07-18T04:55:03","slug":"tabs-tours-elementor-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/tabs-tours-elementor-widget-settings-overview\/","title":{"rendered":"Tabs\/Tours Elementor Widget Settings Overview"},"content":{"rendered":"\n<p>The Tabs widget is a very useful widget when you want to display a large amount of content in a limited space by splitting the content into multiple tabs.<\/p>\n\n\n\n<p>This gives a better user experience by allowing users to get content in a more organized way.<\/p>\n\n\n\n<p>One of the most common uses of tabs can be seen on E-commerce websites where you will see product details, other specifications, reviews etc. in various tabs making it very easy for readers to consume the information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Check the Live Widget Demo<\/h3>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/tabs-tours?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor plugin<\/a> installed and activated.<\/li>\n\n\n\n<li>Make sure the Tabs\/Tours widget is activated, to verify this visit Plus Settings \u2192 and Search of Tabs and activate.<\/li>\n\n\n\n<li>This is a Freemium widget to unlock the extra features, you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Tabs\/Tours Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate-1024x481.png\" alt=\"tabs activate\" class=\"wp-image-104397\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate-1024x481.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate-300x141.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate-768x361.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate-1536x722.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate-600x282.png 600w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-activate.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multiple content sources<\/strong> &#8211; You can add content to your tabs from multiple sources <strong>Content<\/strong> (Free) and <strong>Page template<\/strong> (Pro). With the content option, you can also use shortcodes to display content in your tabs.<\/li>\n\n\n\n<li><strong>Add description and hint<\/strong> (Pro) &#8211; You can easily add some description and hint to your tab titles.<\/li>\n\n\n\n<li><strong>Easily add multiple icons to tabs<\/strong> (Free) &#8211;&nbsp; You can add different inner and outer icons for the tab titles.<\/li>\n\n\n\n<li><strong>Unique ID <\/strong>(Pro) &#8211; You can add a unique id for each tab item to create anchor links directly to the tab item easily.<\/li>\n\n\n\n<li><strong>Adjust tab title position<\/strong> (Free) &#8211; You can easily adjust the tab title position.<\/li>\n\n\n\n<li><strong>Multiple layouts for tabs<\/strong> (Free) &#8211; There are two layout options for your tabs to choose from <strong>Horizontal<\/strong> and <strong>Vertical<\/strong>.<\/li>\n\n\n\n<li><strong>Add swipe or slide effect<\/strong> (Pro) &#8211; You can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/swipe-or-slide-effect-on-elementor-tabs\/\" target=\"_blank\" rel=\"noreferrer noopener\">add beautiful swipe or slide effects (horizontal tabs) to your tab<\/a> titles, so you can easily navigate a long list of tabs.&nbsp;<\/li>\n\n\n\n<li><strong>Active Tab <\/strong>(Pro) &#8211; This option allows you to <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/openclose-specific-tab-by-default-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">keep all tabs closed or make any specific tab active by default<\/a>.<\/li>\n\n\n\n<li><strong>On Hover Tab <\/strong>(Pro) &#8211; Easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-tab-on-hover\/\" target=\"_blank\" rel=\"noreferrer noopener\">open your tabs when someone hovers<\/a> over the title of the tab.<\/li>\n\n\n\n<li><strong>Close tab on second click<\/strong> (Pro) &#8211; With this option, you can make your tabs close on the second click.<\/li>\n\n\n\n<li><strong>Add arrow indicator<\/strong> (Pro) &#8211; You can add an arrow indicator to your hover and active mode tabs.<\/li>\n\n\n\n<li><strong>Carousel Connection ID<\/strong> (Pro) &#8211; You can make a <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-a-carousel-with-tabs-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">connection between your tab and the Carousel Anything<\/a> widget with a unique ID. So when a user clicks on a tab item the slider will also change.<\/li>\n\n\n\n<li><strong>Split Tabs in columns<\/strong> (Pro) &#8211; <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/divide-elementor-tabs-into-multiple-columns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Easily split your tab titles into columns<\/a>.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Autoplay<\/strong> (Pro)- Make your <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-tabs-autoplay\/\" target=\"_blank\" rel=\"noreferrer noopener\">tabs play automatically<\/a> from one item to another.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to add content in Elementor Tabs Widget?<\/h2>\n\n\n\n<p>To add content in The Plus Addons for Elementor Tabs\/Tours widget, drag and drop the widget on the page and go to the tab you want to add the content to.<\/p>\n\n\n\n<p>In the <strong>Title<\/strong> field, you can add the title for the tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"299\" height=\"915\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-title.png\" alt=\"tabs title\" class=\"wp-image-104398\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-title.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-title-98x300.png 98w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>For the content, you can choose two sources: <strong>Content<\/strong> (Free) and <strong>Elementor Page Template<\/strong> (Pro).<\/p>\n\n\n\n<p>With the content option, you can directly write the content in the editor or use shortcodes to display the content.<\/p>\n\n\n\n<p>Now with the <strong>Page template<\/strong> option, you can create truly unique layouts for your tab content using the Elementor page builder. In this option, you have to choose a previously created Elementor template from the dropdown list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"546\" height=\"909\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-elementor-template.png\" alt=\"tabs elementor template\" class=\"wp-image-104399\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-elementor-template.png 546w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-elementor-template-180x300.png 180w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><\/figure>\n\n\n\n<p>By using the template method, you get to utilize the power Elementor page builder within your tab content. This way you can show almost any type of content like images, galleries, videos, blog posts, carousels, WooCommerce products etc.<\/p>\n\n\n\n<p>Or you can choose <strong>Shortcode<\/strong> from the <strong>Templates<\/strong> dropdown to use Elementor template shortcodes as well.<\/p>\n\n\n\n<p>When you select an Elementor template you will see a <strong>Backend Visibility<\/strong> toggle, by default, it is turned off to provide a smooth editing experience but you can turn it on to see your template in the backend once done you can turn it off.<\/p>\n\n\n\n<p>Then there are options to add a <strong>Description<\/strong> (Pro) and <strong>Hint<\/strong> (Pro) to the tab title.<\/p>\n\n\n\n<p>You can easily add multiple icons to the tab title. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-icons-to-elementor-tabs\/\" target=\"_blank\" rel=\"noreferrer noopener\">You can learn more about the process here<\/a>.<\/p>\n\n\n\n<p>A unique id can be used to link to a tab item, when you want to send a user directly to a particular tab content. This is most useful for vertical tab content. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/vertical-tabs-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about the process here<\/a>.<\/p>\n\n\n\n<p>Lastly from the <strong>+ Add Item<\/strong> button, you can add more tabs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Powerful Layout options<\/h2>\n\n\n\n<p>These options of The Plus Addons for Elementor Tabs\/Tours widget will make your tabs very unique.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout<\/strong> &#8211; Multiple layout options, Horizontal and Vertical.<\/li>\n\n\n\n<li><strong>Navigation Position<\/strong> &#8211; Place your tab title on top or bottom for horizontal tabs and right or left for vertical tabs.<\/li>\n\n\n\n<li><strong>Swiper Effect<\/strong> &#8211; For a long list of tabs you can add a swipe or slide effect to the tab title for easy navigation.<\/li>\n\n\n\n<li><strong>Default Active Tab<\/strong> &#8211; Set a specific tab as an active tab or keep all closed by default.<\/li>\n\n\n\n<li><strong>On Hover Tab<\/strong> &#8211; Open tabs on hover.<\/li>\n\n\n\n<li><strong>On Second Click Closed<\/strong> &#8211; Close the tab when someone clicks on the tab title for the second time.<\/li>\n\n\n\n<li><strong>Arrow<\/strong> &#8211; You can add an additional arrow icon for the tab titles on hover as well as to mark the active tab.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding Extra Options<\/h2>\n\n\n\n<p>There are some extra options to make your tabs even more powerful. We have covered a dedicated doc on each one of them so that you can understand them in depth.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/connect-a-carousel-with-tabs-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Carousel Connection ID<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/divide-elementor-tabs-into-multiple-columns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tab Columns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-tabs-autoplay\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tab Autoplay<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to style Elementor Tabs Widget in WordPress?<\/h2>\n\n\n\n<p>To style The Plus Addons for Elementor Tabs\/Tours widget, you will find all the styling options under the Style tab.<\/p>\n\n\n\n<p><strong>Icon<\/strong> (Free) &#8211; From this tab, you can control the outer icon styling, such as size, colour, active colour and spacing. You can also make your icons full width from here so they can sit on top of the tab title.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"911\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-style.png\" alt=\"tabs style\" class=\"wp-image-104400\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-style.png 268w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-style-88x300.png 88w\" sizes=\"(max-width: 268px) 100vw, 268px\" \/><\/figure>\n\n\n\n<p><strong>Outer Icon<\/strong> (Pro) &#8211; You can control the size, colour, active colour and mobile visibility of the outer icon from this tab.<\/p>\n\n\n\n<p><strong>Tab Title Bar<\/strong> (Free) &#8211; From this tab, you can control your tab&#8217;s title, like its typography, colour, nav alignment, nav width, etc. You can also make all your titles the same width or hide them altogether.<\/p>\n\n\n\n<p><strong>Tab Description<\/strong> (Pro) &#8211; If you are using a description for your tab titles, you can style them from here. Control their typography, colour, width, margin and you can use word break to maintain the design as well.<\/p>\n\n\n\n<p><strong>Tab Hint<\/strong> (Pro) &#8211; For your tab hint styling, use this tab and manage its position, typography, colour, background colour, border etc.<\/p>\n\n\n\n<p><strong>Underline<\/strong> (Pro) &#8211; You can add beautiful underline borders to your tab title and style it from here.<\/p>\n\n\n\n<p><strong>Tab Title Bar Background<\/strong> (Free) &#8211; From this tab, you can control everything style related to the individual tab title background, such as nav inner padding, margin, gap between nav, background colour, border, box shadow (pro) etc.<\/p>\n\n\n\n<p><strong>Arrow Style<\/strong> (Pro) &#8211; To style the additional arrow of your tab title use this section.<\/p>\n\n\n\n<p><strong>Navigation Area Background<\/strong> (Pro) &#8211; From here, you can style the overall background of the navigation area. You will find all the necessary styling options like background, margin, padding, border etc. to make a beautiful navigation background.<\/p>\n\n\n\n<p><strong>Content<\/strong> (Free) &#8211; This tab is for styling the tab content typography and colour.<\/p>\n\n\n\n<p><strong>Content Background<\/strong> (Free) &#8211; In order to style the tab content area background use this tab, and control its padding, margin, background, border etc.<\/p>\n\n\n\n<p><strong>Extra Options<\/strong> (Freemium) &#8211; Under this tab, you find some interesting styling options for your tabs like zoom and opacity of tab title for both normal and active states. You will find some additional responsive options for both mobile and tabs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"911\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-extra-options-style.png\" alt=\"tabs extra options style\" class=\"wp-image-104401\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-extra-options-style.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/tabs-extra-options-style-98x300.png 98w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>&nbsp;&#8211;<strong>Tab Navigation Responsive<\/strong> &#8211; All the options are for mobile only.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>Full width<\/em><\/strong>: If you have a small number of tabs you can make the tab titles take the full width of the screen.&nbsp;<\/li>\n\n\n\n<li><strong><em>One by one<\/em><\/strong>: You can align tab titles one after another vertically. You can also control the spacing between the titles from here.<\/li>\n\n\n\n<li><strong><em>Force Accordion<\/em><\/strong>: With this option, you can turn your tabs into an accordion on mobile, you\u2019ll also find all the styling options for the accordion.<\/li>\n<\/ul>\n\n\n\n<p>&#8211; <strong>Force All Close in Tablet<\/strong> &#8211; This will make all tabs closed by default on tablet devices only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tab-closed-tablet.gif\" alt=\"tab closed tablet\" class=\"wp-image-104402\"\/><\/figure>\n\n\n\n<p>&#8211; <strong>Force All Close in Mobile<\/strong> &#8211; This will make all tabs closed by default on mobile devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"881\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/tab-closed-mobile.gif\" alt=\"tab closed mobile\" class=\"wp-image-104403\"\/><\/figure>\n\n\n\n<p>&#8211; <strong>Description Field Show on Active Tab<\/strong> &#8211; If you are using descriptions for your tab title, by default, it will show on all titles, with this option, you can make it visible for the active tab title only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1589\" height=\"868\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/active-tab-desc.gif\" alt=\"active tab desc\" class=\"wp-image-104404\"\/><\/figure>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/on-scroll-view-animation\/\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tut<\/a><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\">orial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":104406,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,544],"class_list":["post-104395","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-tabs-tours"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104395"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104395\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104406"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104395"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}