{"id":13441,"date":"2019-08-18T10:23:46","date_gmt":"2019-08-18T08:23:46","guid":{"rendered":"https:\/\/premiumaddons.com\/?post_type=docs&#038;p=13441"},"modified":"2024-02-29T13:53:21","modified_gmt":"2024-02-29T11:53:21","slug":"tabs-widget-tutorial","status":"publish","type":"docs","link":"https:\/\/premiumaddons.com\/docs\/tabs-widget-tutorial\/","title":{"rendered":"Elementor Tabs Widget Tutorial"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Intro<\/strong><\/h3>\n\n\n\n<p>Premium Tabs Widget for Elementor Page Builder allows you to add any information you want in separate tabs. You can add as many tabs as you need. Tabs saves space on your webpage, and also encourage interactions from your visitors. Tabs content can be added directly using text editor, or you can use an existing Elementor template. <\/p>\n\n\n\n<p>Click here to check <a href=\"https:\/\/premiumaddons.com\/tabs-widget-for-elementor-page-builder-2\/\">Premium Tabs Widget demo<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requirements: <\/h3>\n\n\n\n<ul><li>You will need <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/pro\/\" target=\"_blank\">Premium Addons PRO<\/a> plugin installed and activated on your website.<\/li><li>Also, make sure that this widget\/addon is enabled so you can find it in the Elementor editor. Check <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/plugin-settings\/\" target=\"_blank\">this article<\/a> to know how to do that. <\/li><li>Premium Addons works only with <a rel=\"noreferrer noopener\" href=\"https:\/\/bit.ly\/Get-Elementor\" target=\"_blank\">Elementor Page Builder<\/a> plugin so you will need to have it installed and activated as well.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center has-medium-font-size\">Elementor Tabs Widget<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYxMiUyRmVsZW1lbnRvci10YWJzLXdpZGdldC5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Tabs Widget\" class=\"wp-image-25158\"  \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\"><strong>Key Features<\/strong> &#8211; Elementor Tabs Widget<\/h3>\n\n\n\n<ul>\n<li>Tabs<\/li>\n\n\n\n<li>Additional Settings<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"> 1. Tabs<\/h4>\n\n\n\n<p>In the Tabs settings you can add new tabs by clicking on the Add item button. For each tab you can then:<\/p>\n\n\n\n<ul>\n<li><strong>Enable Icon:<\/strong> Enable or disable the tab icon.<\/li>\n\n\n\n<li><strong>Icon Type:<\/strong> Select the icon types that match your needs.\n<ul>\n<li><strong>Icon:<\/strong> Select one of many Font Awesome icons.<\/li>\n\n\n\n<li><strong>Image:<\/strong> Use a custom image in the table header.<\/li>\n\n\n\n<li><strong>Lottie Animation:<\/strong> You can add any Lottie animation.\n<ul>\n<li><strong>Animation JSON URL:<\/strong>&nbsp;Insert the JSON URL.<\/li>\n\n\n\n<li><strong>Loop:<\/strong>&nbsp;Enable it will make the animation run forever.<\/li>\n\n\n\n<li><strong>Reverse:&nbsp;<\/strong>Enable it will make the animation run backward.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Title:<\/strong> Select a title that will be displayed at the top of the tab.<\/li>\n\n\n\n<li><strong>Content to Show:<\/strong> Add content to the tab either by:\n<ul>\n<li>Selecting an existing <strong>Elementor template<\/strong>.\n<ul>\n<li>You can use&nbsp;<strong>Elementor Live Templates<\/strong>&nbsp;feature to create\/edit Elementor template on the same page. For more information, please check Elementor templates article from&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/how-to-create-elementor-template-to-be-used-with-premium-addons\/\" target=\"_blank\">here<\/a>.<\/li>\n\n\n\n<li>You can also select an existing Elemntor templates.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Using a Rich <strong>Text Editor<\/strong>. You can choose between editing the content visually, or with text and code. You can also include media such as images from the WordPress media library.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Custom Navigation Element Selector:<\/strong> Use this to add an element selector to be used to navigate to this tab. For example #tab-1. Please refer to this <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/elementor-tabs-custom-navigation\/\" data-type=\"docs\" data-id=\"25154\" target=\"_blank\">article<\/a> for information about this option.<\/li>\n\n\n\n<li><strong>Default Tab Index:<\/strong> Set to -1 if you don&#8217;t any tab to be active by default.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYxMiUyRmVsZW1lbnRvci1pY29uLWJveC13aWRnZXQtZWxlbWVudG9yLXRlbXBsYXRlcy5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Template as a Content to Show in Tabs Widget for Elementor \" class=\"wp-image-25199\"  \/><figcaption class=\"wp-element-caption\">Elementor Template as a Content to SHow in Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjAlMkYxMiUyRmVsZW1lbnRvci1pY29uLWJveC13aWRnZXQtdGV4dC1lZGl0b3IuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Text Editor as a Content to Show in Elementor Tabs Widget\" class=\"wp-image-25200\"  \/><figcaption class=\"wp-element-caption\">Text Editor as a Content to Show in Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"> 2. Additional Settings<\/h4>\n\n\n\n<ul>\n<li><strong>Tabs Type:<\/strong> Select between Horizontal and Vertical tabs.<\/li>\n\n\n\n<li><strong>Tabs Layout: <\/strong>Select between auto and fixed width tabs.<\/li>\n\n\n\n<li><strong>Tabs Style:<\/strong> Select the tabs style between 4 tabs styles:\n<ul>\n<li>Arrow Pointer<\/li>\n\n\n\n<li>Circled<\/li>\n\n\n\n<li>Flipped<\/li>\n\n\n\n<li>Folded<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwOCUyRnRhYnMtd2lkZ2V0LWFkZGl0aW9uYWwtc2V0dGluZ3MtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Tabs Widget Additional Settings in Tabs Widget for Elementor \" class=\"wp-image-16410\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Tabs Widget Additional Settings for Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnRhYnMtZGVtby0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Tabs Widget Arrow Pointer Horizontal Style \" class=\"wp-image-13771\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Arrow Pointer Horizontal Style <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlMS12ZXJ0aWNhbC1kZW1vLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Arrow Pointer Vertical Style in Tabs Widget for Elementor \" class=\"wp-image-14129\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Arrow Pointer Vertical Style<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlMi1kZW1vLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Tabs Widget Circled Horizontal Style\" class=\"wp-image-14120\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Circled Horizontal Style<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLTMtdmVydGljYWwtZGVtby0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Tabs Widget for Elementor Flipped Vertical Style\" class=\"wp-image-14127\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Flipped Vertical Style<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlNC1kZW1vLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Tabs Widget Folded Horizontal Style\" class=\"wp-image-14123\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Folded Horizontal Style<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Carousel Tabs:<\/strong> Enable\/disable showing Tabs panels in a carousel. You will be able to control the following option if the Carousel is enabled.<\/li>\n\n\n\n<li><strong>Apply Carousel Tabs On<\/strong>: Enable or disable carousel tabs on desktop, tablet or mobile devices.<\/li>\n\n\n\n<li><strong>Tabs To Show:<\/strong> Select how many tabs to show.<\/li>\n\n\n\n<li><strong>Slides&#8217; Spacing<\/strong>: Use this option to change carousel tabs width in pixels (px).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"499\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDQ5OSIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNDk5IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwOCUyRmVsZW1lbnRvci10YWJzLXdpZGdldC1jYXJvdXNlbC1vcHRpb25fMS5naWYiIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI0OTkiIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Elementor Tabs Widget Carousel Option\" class=\"wp-image-28984\"\/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Carousel Option<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Accordion On Small Screens:<\/strong> Enable this option to improve responsive behavior by changing the tabs layout to act as an accordtion.<\/li>\n\n\n\n<li><strong>Apply Accrodion On:<\/strong> Enable or disable accordion tabs on tablet or mobile devices.<\/li>\n\n\n\n<li><strong>Animation Duration:<\/strong> <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1025\" height=\"491\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI1IDQ5MSIgd2lkdGg9IjEwMjUiIGhlaWdodD0iNDkxIiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjElMkYwOCUyRmFjY29yZGlvbi1vbi1zbWFsbC1zY3JlZW5zLXRhYnMtd2lkZ2V0LmdpZiIgZGF0YS13PSIxMDI1IiBkYXRhLWg9IjQ5MSIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Tabs Widget Accordion Effect on Small Screen\" class=\"wp-image-28892\"\/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Accordion Effect on Small Screen<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. Tab<\/h4>\n\n\n\n<p>In this setting you can edit the styles of the normal, hover and active tabs by selecting the buttons at the top of the settings.<\/p>\n\n\n\n<ul>\n<li><strong>Background Color:<\/strong> Select the background color for the tabs.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong><g class=\"gr_ gr_45 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep\" id=\"45\" data-gr-id=\"45\">Select <\/g>between the following border types, as well as the width of the border on each side of the tab:\n<ul>\n<li>None<\/li>\n\n\n\n<li>Solid<\/li>\n\n\n\n<li>Double<\/li>\n\n\n\n<li>Dotted<\/li>\n\n\n\n<li>Dashed<\/li>\n\n\n\n<li>Groove<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border radius:<\/strong> Can be declared using pixels, % or em. The higher the number, the more circular corners. You can also select the border color from the color picker.<\/li>\n\n\n\n<li><strong>Box Shadow: <\/strong>You can add a shadow around the tab with this option. Adjust the color and the following settings:\n<ul>\n<li>Horizontal Position<\/li>\n\n\n\n<li>Vertical P<g class=\"gr_ gr_8 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"8\" data-gr-id=\"8\">osition<\/g><\/li>\n\n\n\n<li>Blur<\/li>\n\n\n\n<li>Spread<\/li>\n\n\n\n<li>Position: Outline or Inset <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the space between the tabs. <\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the space between the tab title and the edge of the tab.  <\/li>\n\n\n\n<li>The margin and padding can be declared using pixels, % or em. You can link the values together, or only change the value for one side of the tab. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLXRhYi1zZXR0aW5ncy0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Tabs Widget for Elementor Tabs Customization Options\" class=\"wp-image-13651\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Elementor Tabs Widget Tabs Customization Options<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Icon<\/h4>\n\n\n\n<ul>\n<li><strong>Color:<\/strong> The color of the icon in the tab.<\/li>\n\n\n\n<li><strong>Hover Color:<\/strong> The color of the icon on mouse hover.<\/li>\n\n\n\n<li><strong>Active Color:<\/strong> The color of the icon in the active tab.<\/li>\n\n\n\n<li><strong>Size:<\/strong> Select the icon size.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Select the border type, color, size, and radius.<\/li>\n\n\n\n<li><strong>Icon Shadow:<\/strong> Add a shadow behind the icon. You can choose the color, position <g class=\"gr_ gr_20 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep\" id=\"20\" data-gr-id=\"20\">and<\/g> effect.<\/li>\n\n\n\n<li><strong>Margin and Padding:<\/strong> Adjust the margin and padding in pixels, em or %.  Margin is the space between the icon and the text and the container. Padding is the space between the icon and the border.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLWljb24tMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Icon Customization Options for Elementor Tabs Widget\" class=\"wp-image-13653\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Icon Customization Options for Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Title<\/h4>\n\n\n\n<ul>\n<li><strong>Color:<\/strong> Select the text color of the tab titles.<\/li>\n\n\n\n<li><strong>Hover Color: <\/strong>Select the text color of the tab titles on mouse hover.<\/li>\n\n\n\n<li><strong>Active Color:<\/strong> Select the text color of the title for the active tab.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Adjust the font settings.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select <g class=\"gr_ gr_12 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"12\" data-gr-id=\"12\">borde<\/g> type, color, size, and radius.<\/li>\n\n\n\n<li><strong>Shadow:<\/strong> Add a shadow behind the text.  You can choose the color, position, and effect.<\/li>\n\n\n\n<li><strong>Margin and padding:<\/strong> Adjust the margin and padding in pixels, em or %. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLXRpdGxlLTEtMTAyNHg1OTcuanBnIiBkYXRhLXc9IjEwMjQiIGRhdGEtaD0iNTk3IiBkYXRhLWJpcD0iIj48L3N2Zz4=\" data-spai=\"1\" alt=\"Tabs Title Styling Settings for Elementor Tabs Widget\" class=\"wp-image-13718\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Tabs Title Styling Settings for Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">4. Description<\/h4>\n\n\n\n<p>In the Description section you can add styles for the tab content:<\/p>\n\n\n\n<ul>\n<li><strong>Color:<\/strong> Select a text color for the tab description.<\/li>\n\n\n\n<li><strong>Typography: <\/strong>Adjust the font settings. <\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Select a background color for the description.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select <g class=\"gr_ gr_21 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"21\" data-gr-id=\"21\">borde<\/g> type, color, and size.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Select border-radius.<\/li>\n\n\n\n<li><strong>Shadow:<\/strong> Add a shadow behind the text. You can choose the color, position, and effect. <\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a box shadow around the tab description.  You can choose the color, position, and effect. <\/li>\n\n\n\n<li><strong>Margin and Padding:<\/strong> Adjust the margin and padding in pixels, em or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLWRlc2NyaXB0aW9uLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Tabs Description Styling Settings for Elementor Tabs Widget\" class=\"wp-image-13722\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Tabs Description Styling Settings for Elementor Tabs Widget<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">5. Container<\/h4>\n\n\n\n<p>The container settings are applied to the container around the tabs and the tab content. <\/p>\n\n\n\n<ul>\n<li><strong>Background Color:<\/strong> Select a background color for the container.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select border type, color,  and size.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Select border-radius.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a shadow around the container.<\/li>\n\n\n\n<li><strong>Margin and Padding:<\/strong> Adjust the margin and padding in pixels, em or %. -Margin is the space between the container and the rest of the page content. Padding is the space between the container edge and the tab.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNiUyRnN0eWxlLWNvbnRhaW5lci0xMDI0eDU5Ny5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Container Customization Settings for Elementor Tabs Widget\" class=\"wp-image-13726\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Container Customization Settings for Elementor Tabs Widget<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Intro Premium Tabs Widget for Elementor Page Builder allows you to add any information you want in separate tabs. You can add as many tabs as you need. Tabs saves space on your webpage, and also encourage interactions from your visitors. Tabs content can be added directly using text editor, or you can use an [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"Most powerful Elementor tabs widget. It contains the options needed to create a horizontal or vertical tabs. It has the option to change it to accordion","_seopress_robots_index":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"docs_category":[530],"docs_tag":[],"_links":{"self":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/13441"}],"collection":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/comments?post=13441"}],"version-history":[{"count":2,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/13441\/revisions"}],"predecessor-version":[{"id":72675,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/13441\/revisions\/72675"}],"wp:attachment":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/media?parent=13441"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_category?post=13441"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_tag?post=13441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}