Note
This information is specific to the Editor 2.0, formerly known as the All-Flex Editor. To identify your current editor version, see How to Identify the Editor Version Your Site Uses .
The Advanced Accordion widget provides additional design flexibility by allowing you to customize each accordion item individually. Each accordion section can expand when clicked, allowing site visitors to quickly access information and scroll past what they do not need. The Advanced Accordion can be used to compactly display content such as FAQs, product highlights, or upcoming events.
To add the Advanced Accordion widget:
-
In the side panel, click Widgets.
-
Search for Advanced Accordion, then drag and drop it into the desired place on the canvas.
To manage the accordion content, click the widget to open the floating menu and select Manage Accordion Content. From here, you can complete the following actions:
-
Add a new item. Add a new accordion item by clicking Add Item.
-
Rename. Click the three dot icon and select Rename, then type a new name.
-
Duplicate. Click the three dot icon and select Duplicate. The duplicated item is titled Copy.
-
Delete. Click the three dot icon and select Delete.
To add widgets to accordion items, expand the desired accordion item, then drag and drop any widget into the desired place. Each accordion item can have different widgets and layouts.
The Advanced Accordion is unique because you can edit each accordion item separately and add different widgets to each item.
Following are the available design settings:
Layout
-
Show one expanded item at a time. Each time a site visitor clicks to expand an accordion item, any other previously expanded items will collapse.
-
Show first item expanded. The first accordion item is expanded by default.
-
Text direction. Set the text direction to either right or left.
Item
The settings in the Item section apply to all accordion items. By default, the Theme styles are applied first, but can be overriden by any selections you make in this section.
-
Title text. You can customize font, font weight, size, color, format and alignment. If necessary, click Reset to Site Theme Style to reset all title text settings.
-
Toggle icon. The toggle icon is the plus sign that site visitors click to expand an accordion item. You can customize the color and size of the toggle icon. You can also customize the area around the toggle by selecting a background color or image, and then setting the padding and corner radius.
-
Header. The header is the portion of the accordion item that is visible before it is expanded. You can customize it by selecting a background color or image, and then configuring the border.
Frame
The frame is the area in between and around the accordion items and it controls the containers under the items. You can customize the background, alignment, spacing, size, and animation.