How to Use the Accordion Element on Your Website

Der Accordion Element is a great way to organize and present information in a structured and user-friendly way. It is commonly used for FAQs (Frequently Asked Questions), product details, or collapsible content sections to enhance readability and improve user experience.

1. Hinzufügen des Akkordeon-Elements

1. Open the Elements Panel on the left.
2. Find Akkordeon under "Basic Elements."
3. Click, hold, and drag it to your desired section.

2. Customizing the Accordion

Adding & Editing Content

• Click inside each accordion item to add or edit text.
• Hinzufügen any element (e.g., text, images, buttons, or even columns) inside the accordion.
• To rename an accordion tab, click on the default text and type your own question or title.

Adding More Accordion Sections

• Klicken Sie auf das Duplikat button to create additional sections.
• To rearrange the order, use the up/down arrows on each section.
• Delete unnecessary sections by clicking the Löschen button.

3. Accordion Settings & Behavior

Expand/Collapse Settings

• Collapsible Mode: Allows users to close all sections.
• Auto Expand: Controls if the first section opens automatically.
• Transition Duration: Adjusts how quickly sections open and close.

Adding Icons

• Select an icon for expanding/collapsing (e.g., plus/minus).
• Adjust size, spacing, and alignment for better visibility.

4. Styling the Accordion

Typography & Colors

• Change font size, weight, and color for titles.
• Customize the background color of each section.
• Hinzufügen borders, shadows, and hover effects for an interactive look.

Hover & Active Styles

• Set a hover color for when users place their cursor over an item.
• Define an active color for the currently open section.
• Adjust border styling to separate each item visually.

5. Making It Responsive

• Check the Tablet & Mobile Views to ensure proper display.
• Adjust font size, spacing, and padding for mobile optimization.
• Make sure accordion content doesn’t overlap or look crowded on smaller screens.

Why Use Accordions?

• Organized layout – Presents large amounts of information neatly.
• Improves user experience – Helps visitors find answers quickly.
• Saves space – Keeps content hidden until needed.
• Fully customizable – Adjust colors, icons, and styles to fit your design.

Accordions are one of the best ways to create an engaging, easy-to-navigate website while keeping the design clean and structured.