{"title":"Phlox Accordion","id":36677,"link":"https:\/\/env.averta.net\/en\/step\/phlox-accordion\/","parent":[37224,35059],"content":"<p>With <strong>Phlox?<\/strong><strong>Accordion Widget<\/strong>, you can create multiple section in a vertical list box. The sections or elements come with label and content.?Each section is expandable and by clicking on the section title, the content will be displayed.<img decoding=\"async\" loading=\"lazy\" class=\"wp-image-38227 size-full aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/accordion.png\" width=\"901\" height=\"635\" \/><\/p>\n<p>Follow below steps to add <strong>Phlox Accordion 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] Accordion?<\/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<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/gkTJUFvrKiA?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><\/iframe><\/div>\n<div class=\"clear\">\n<hr \/>\n<h3><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-13-at-3.31.53-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55520 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-13-at-3.31.53-PM.png\" alt=\"\" width=\"336\" height=\"905\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-13-at-3.31.53-PM.png 336w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-13-at-3.31.53-PM-111x300.png 111w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2018-06-13-at-3.31.53-PM-64x173.png 64w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/a>Access Accordion 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>Accordion<\/strong><\/li>\n<\/ol>\n<p>After adding accordion to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4>Content<\/h4>\n<\/li>\n<\/ul>\n<h4>Accordion Items<\/h4>\n<p>This section lets you add, duplicate, or remove an accordion item. After that, you can select the accordion item you want and change its <strong>Title &amp; Content<\/strong>.<\/p>\n<h4>Type<\/h4>\n<p>There are two types of accordion: Accordion (auto close other open tabs) and Toggle<\/p>\n<p>Accordion expands the sections one at a time and?when you open a new section, the previous one will be closed.<\/p>\n<p>Toggle, however, can expand all the sections without closing any of them.<\/p>\n<h4>Title HTML Tag<\/h4>\n<p>With this option, you are able to change the title from H1 to H6. It can be div or section, too.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-accordion-style.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-55521 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-accordion-style-e1528890763665.jpg\" alt=\"\" width=\"329\" height=\"1443\" \/><\/a><\/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 accordion 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=\"alignright wp-image-38225 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/accordion-options-e1485341641227.png\" width=\"524\" height=\"567\" \/>Access Accordion 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]?Accordion<\/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 accordion 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 accordion,?if you want the widget to appear with a title.<\/p>\n<h4>Type<\/h4>\n<p>This element has two types: Accordion and Toggle<\/p>\n<p>Accordion expands the sections one at a time and?when you open a new section, the previous one will be closed.<\/p>\n<div id=\"attachment_38227\" style=\"width: 294px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/accordion.png\"><img aria-describedby=\"caption-attachment-38227\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-38227\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/accordion.png\" width=\"284\" height=\"200\" \/><\/a><p id=\"caption-attachment-38227\" class=\"wp-caption-text\">Accordion<\/p><\/div>\n<div style=\"clear: both;\">\n<p>Toggle, however, can expand all the sections without closing any of them.<\/p>\n<div id=\"attachment_38231\" style=\"width: 294px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/toggle-e1485344971955.png\"><img aria-describedby=\"caption-attachment-38231\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-38231\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/toggle-e1485344971955.png\" width=\"284\" height=\"266\" \/><\/a><p id=\"caption-attachment-38231\" class=\"wp-caption-text\">Toggle<\/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 style=\"clear: both;\" \/>\n<h3>Add or Delete a Section<\/h3>\n<p>You can simply add any number of items you want. Then you are able to duplicate each item, or easily swap them with drag and drop. Also, the items can be deleted.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-38240 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/add-swap-delete-accordion-sections-1.gif\" alt=\"\" width=\"744\" height=\"476\" \/><\/p>\n<h3>Add Label and Content to a Section<\/h3>\n<p>Each section can has its specific label and content.<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-38239 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/add-content.gif\" alt=\"\" width=\"764\" height=\"356\" \/><\/p>\n<h3>Accordion 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"}