Accordion Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
The accordion widget helps visitors find exactly the information they are looking for easily. Add it to your sites and visitors do not need to scroll through blocks of content they are not interested in. Instead, they can be shown a list of questions or titles and simply choose to open the ones they want to read more about. Create compact and easy-to-read FAQs, product highlights, or upcoming events.
To add accordion widgets:
In the left panel, click Widgets.
Click and drag the Accordion widget into your site.
To learn more about adding widgets to your site, see .
Adding the widget opens the content editor. In this menu, you can add or modify the fields of the widget.
Items. Click an item to configure the Title, Description, and Title Heading Type. Header tags are available to make your text more easily identifiable by search engines. It is recommended you select H3 for the Title Heading Type.
Show first item expanded or Only show one item expanded. The content editor also provides the option to select whether you prefer to hide the content of all items in the accordion or display only the first item when users first open the widget. In addition, you may choose whether visitors can expand only one item at a time or can view several expanded items at the same time.
Title icon. Depending on the layout you choose, your accordion widget may have a title icon. The title icon is the icon next to the item title, and may be different across all items. For example, you may want to set add a clock icon next to your event time, or a money icon next to a pricing item.
Generate FAQ Schema Markup. Enable this toggle to generate FAQ schema markup once per page. To test if your schema was generated properly and see a preview, use the .
The design editor lets you control the layout and styling of the accordion widget.
To access the design editor:
Right-click the widget, and click Edit Design.
Edit the design options of the expandable icon. The expandable icon appears on all items in the widget, and corresponds to the icon you click to expand the item.
Note
Changing the layout of the accordion widget may override some of the settings you have defined (for example, spacing between items). Check all settings after editing the widget and recreate any ones that are missing after you change the layout.
When editing the icons, take note of the type of icon you are editing. The title icon is the icon next to the item title on certain layouts.
For information about design options that are not specific to this widget (for example, layout, style, or spacing), see .
Make sure the design settings you define are correct per device. As usual, settings such as spacing (of the whole widget and individual items), width and more are defined per device. For more information, see .