Add an Accordion Widget

Overview

The accordion widget is a great way to help visitors find exactly the information they are looking for easily. Add it to your sites and visitors won’t need to scroll through blocks of content they aren’t 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. Creating compact and easy-to-read FAQs, product highlights or upcoming events lists has never been easier!

Guide

1. Drag & drop the accordion widget anywhere on your page. To learn more about adding widgets to your website, see Adding Widgets.

2. Adding the widget will open content editing menu. In this menu, you can add or modify the fields of the widget.

The content editing menu also provides the option to choose 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.

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.

3. The design editing menu lets you control the layout and styling of the accordion widget.

In the design editing menu of your Accordion widget you can:

• Change the layout

• Edit the text style and/or color of the Title, Description

• Edit design options of the Expandable Icon

• Edit design options of the whole widget in Frame Style

• Edit the Spacing of the widget

Considerations

• Changing the layout of the accordion widget may override some of the settings you have defined (e.g. spacing between items). Please double check all the settings after editing the widget and recreate any ones that are missing after you’ve changed 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.

The expandable icon appears on all items in the widget, and corresponds to the icon you click to expand the item.

• 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.