Overview

Long web pages and endless scrolling can quickly overwhelm visitors, causing them to leave before they find the information they need. The Accordion Widget solves this problem by allowing you to compress large blocks of content into a series of clickable titles that expand only when needed.

This essential organizational tool is perfect for:

• Saving Screen Space: Neatly tuck away detailed content like product specifications, pricing breakdowns, or long terms and conditions, keeping your page clean and focused.

• Instant Answers (FAQs): Create compact, easy-to-read Frequently Asked Questions (FAQs) sections, allowing visitors to instantly find the answers they need without scrolling through blocks of text.

• Enhanced Presentation: Use unique Title Icons (like a clock for events or a money symbol for pricing) to visually hint at the content inside each item, further improving clarity and engagement.

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.