5.1. Accordion

Accordion is an advanced widget in landing page design that allows you to organize content in an expandable/collapsible format. This feature helps users view information in a clean and organized manner without cluttering the interface.

1. Add an Accordion to your landing page:

• Click on Widgets in the sidebar of the editor.

• Select Accordion from the Advanced section.

• Choose the Accordion element and drag it onto your landing page.

2. Accordion Editor

2.1. Content Editor

To add content to Accordion items:

1. Select the Accordion element.

2. Click on Content in the quick setup bar to open the Accordion content editor.

3. Click on the item where you want to add content, then drag the necessary elements such as Text, Image, Button... into the content area of the Accordion element.

To manage and add items in Accordion:

1. Select the Accordion element.

2. Click on Content in the quick setup bar to open the Accordion content editor.

3. Hover over the item you want to edit and click the Settings icon .
4. Choose the action you want to perform on the Accordion item: Collapse, Duplicate, Rename, or Delete.

Tip:

• Click +Add at the end of the Accordion list to add a new empty item.

• You can change the order of the items. Click and hold the item you want to move, then drag it to the desired position.

To choose how the Accordion expands and collapses:

1. Select the Accordion element.

2. Click on Content in the quick setup bar to open the Accordion content editor.

3. Choose an option in the Choose the default state:

   • All items closed: Visitors will see the Accordion items initially closed and can select the item they want to open for more details.

   • First items opened: Visitors will see the content of the first item, while the other items remain closed.

   • First items opened: Visitors will see the content of all items as soon as the page loads.

4. Click the toggle button Allow multiple open items:

   • On: Visitors can open multiple items at once.

   • Off: Visitors can only open one item at a time.

5. Apply transition effects:

   • Yes: Visitors can see a transition effect (fast/slow) when selecting different items.

   • No

Note: The option to allow multiple items to open in the Accordion will not be available if you select Open all items as the default state.

2.2. Design Editor

You can customize every part of the Accordion to match the design of your page. Customize the titles of the items, the content container of each item, or the entire space of an item (including both the title and the container).

To design the Accordion:

1. Select the Accordion element.

2. Click on Design in the quick setup bar to open the Accordion design editor.

3. Edit the Accordion as desired in the Design popup.

Detailed guide for the sections in the Design popup:

1. Align: Helps you align the Accordion element within its container. See details here.
2. Size: Allows you to adjust the size of the Accordion element on the webpage. See details here.
3. Display on: Enables you to control how the Accordion element is displayed on different devices (Desktop and Mobile).
4. Style - Background: Allows you to customize the background color of the Accordion element to your preference. - Box shadow: Lets you add a shadow around the Accordion element.
5. General - Header: Allows you to customize the background color of the header part of the Accordion items, adjust the icon (type, position, color, size...), and the title (font, color, size...). - Collapse: Lets you customize the background color of the displayed content section.
6. Boder: Lets you add and customize the border around the Accordion. You can also adjust the border radius. See details here.

2.3. Advanced Editor

You can set up advanced features for the Accordion to create a unique experience that suits the specific needs of your project.

To set up advanced Accordion settings:

1. Select the Accordion element.

2. Click on Advanced in the quick setup bar to open the Accordion advanced editor.

3. Set up the Accordion as desired in the Advanced popup.

• Animation: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details here.
• Desktop/Mobile sync design: Allows you to set synchronization options for the design between desktop and mobile. See details here.
• Position type: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details here.
• Custom advance: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details here.