{"title":"Phlox Tabs","id":36662,"link":"https:\/\/env.averta.net\/en\/step\/phlox-tabs\/","parent":[37224,35059],"content":"<p><strong>Phlox Tabs Widget<\/strong> allows you to show your content in multiple horizontal tabs?to?improve the UI?and save some space in your website&#8217;s pages, posts, and widget areas. Importing information inside tabs is simple and it is does not require coding. The content you add into the responsive tabs widget can be texts or multimedia. Also, you are able to add widgets into the tabs, it is specially useful when you want to add some widgets on the sidebar of your website.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-38289 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Phlox-Tabs.png\" alt=\"\" width=\"894\" height=\"585\" \/><\/p>\n<p>Follow below steps to add <strong>Phlox Tabs Widget<\/strong>?to a widget area or in a page content:<\/p>\n<ol>\n<li>Go to your <strong>WordPress admin panel<\/strong><\/li>\n<li>Click on the <b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Then click on the <strong>Widgets<\/strong><\/li>\n<li>Find <strong>[Phlox] Tabs?<\/strong>among the available widgets and add it to your desired <strong><a href=\"https:\/\/env.averta.net\/en\/step\/adding-widgets-to-different-widget-areas\/?b=36406,36406\" title=\"Adding Widgets to Different Widget Areas\">Widget Area<\/a><\/strong><\/li>\n<\/ol>\n<div class=\"clear\">\n<hr \/>\n<h3>Access Tabs Options in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; General?<\/strong>section<\/li>\n<li>Choose <strong>Tabs<\/strong><\/li>\n<\/ol>\n<p>After adding tabs to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4>Content<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55645 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-content-elementor.png\" alt=\"\" width=\"323\" height=\"798\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-content-elementor.png 323w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-content-elementor-121x300.png 121w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-content-elementor-70x173.png 70w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/a><\/h4>\n<\/li>\n<\/ul>\n<h4>Tabs Items<\/h4>\n<p>This section lets you add, duplicate, or remove an tab item. After that, you can select the tab item you want and change its <strong>Title &amp; Content<\/strong>.<\/p>\n<h4>Skin<\/h4>\n<p>You can add?<strong>Border<\/strong> to your tabs or you can create them with?<strong>No Border<\/strong><\/p>\n<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-style-elementor.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-55646 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-style-elementor.jpg\" alt=\"\" width=\"322\" height=\"1431\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-style-elementor.jpg 322w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tabs-style-elementor-39x173.jpg 39w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/a>&nbsp;<\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Title Bar<\/h4>\n<p>You can change many options on this section. When you hover over title bar, your <strong>Mouse Curser<\/strong> can be?<strong>Default<\/strong>, <strong>Pointer<\/strong>, <strong>Zoom<\/strong>, and <strong>Help<\/strong>.<\/p>\n<p><strong>Paddings<\/strong>, <strong>Margins<\/strong>, and <strong>Border Radius<\/strong> can be changed. Also, you can set different paddings and margins on mobile and tablet.<\/p>\n<p><strong>Box Shadow<\/strong> and<strong> Border Type<\/strong> of title bar has different settings. This section lets you change these on <strong>Normal<\/strong>, <strong>Hover<\/strong>, or <strong>Selected<\/strong> mode. <strong>Width<\/strong> and <strong>Color<\/strong> are editable and <strong>Background Type<\/strong> can be <strong>Classic<\/strong> or <strong>Gradient<\/strong>.<\/p>\n<h4>Title<\/h4>\n<p>You can change the <strong>Color<\/strong> and <strong>Typography<\/strong>?of the title on <strong>Normal<\/strong> or <strong>Hover<\/strong>.<\/p>\n<h4>Content<\/h4>\n<p>Many options are available here that let you change <strong>Typography<\/strong>, <strong>Color<\/strong>, <strong>Paddings<\/strong>, <strong>Margins<\/strong>, <strong>Border Radius<\/strong>, <strong>Size<\/strong> and <strong>Position<\/strong> of tab content. Besides, you can set a <strong>Background<\/strong> for your content.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-38269 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Tabs-Options.png\" alt=\"\" width=\"427\" height=\"498\" \/>Access Tabs Options in SiteOrigin Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top right hand of the WordPress editor and find<strong>?<a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Page Builder<\/a><\/strong>,?beside text tab<\/li>\n<li>Click?the?<strong>Add Widget<\/strong><\/li>\n<li>Click the?<strong>Phlox?<\/strong>and choose?<strong>[Phlox]?Tabs<\/strong><\/li>\n<li>Click the?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder<\/strong><\/li>\n<\/ol>\n<p>After adding tabs to your post or page, you are able to customize it by available options:<\/p>\n<h4>Title<\/h4>\n<p>Add a title to the whole tabs widget,?if you want the widget to appear with a title.<\/p>\n<h4>Style<\/h4>\n<p>Tabs can be displayed with or without border.<\/p>\n<div class=\"mceTemp\"><\/div>\n<div id=\"attachment_38290\" style=\"width: 316px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Phlox-Tabs-1.png\"><img aria-describedby=\"caption-attachment-38290\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-38290\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Phlox-Tabs-1.png\" width=\"306\" height=\"200\" \/><\/a><p id=\"caption-attachment-38290\" class=\"wp-caption-text\">Bordered<\/p><\/div>\n<div style=\"clear: both;\">\n<div id=\"attachment_38291\" style=\"width: 317px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/tabs-wo-boundary.png\"><img aria-describedby=\"caption-attachment-38291\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-38291\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/tabs-wo-boundary.png\" width=\"307\" height=\"200\" \/><\/a><p id=\"caption-attachment-38291\" class=\"wp-caption-text\">No Border<\/p><\/div>\n<div style=\"clear: both;\">\n<h4>Extra Class Name<\/h4>\n<p>In this field, you can add a class name that you have written?on your CSS file before.<\/p>\n<hr \/>\n<h3>Add or Delete a?Tab<\/h3>\n<p>You can simply add any number of tabs you want. Then you are able to duplicate each section, or easily swap them with drag and drop. Also, the tabs can be deleted.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-38272 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/add-or-delete-tabs-1.gif\" alt=\"\" width=\"748\" height=\"472\" \/><\/p>\n<h3>Add Label and Content to the Tabs<\/h3>\n<p>Each section can has its specific label and content.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-38273 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Add-lable-and-content-to-a-tab-section.gif\" alt=\"\" width=\"748\" height=\"356\" \/><\/p>\n<h3>Tab Label<\/h3>\n<p>Here you can choose a label or title for the section.<\/p>\n<h4>Content<\/h4>\n<p>In the textbox, you can write the content you want to show when you click the?label.<\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Here<\/a> you can find the common?styles of widgets in Page Builder.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","type":"solution"}