Getting Started

The accordion element in Dorik provides an intuitive and space-efficient way to present content on your website. It's a versatile design component that allows users to reveal additional information without overwhelming the page layout. This article will provide a guide on how to add an accordion to your website.

Adding Accordion to your site

By following the simple steps below, you can easily add the Accordion element to your site.

- Click on + Add Element or Containers in an empty Container
- From the Elements option, select the Accordion element

Refer to the picture below:

Editing and Adjusting Accordion

Follow the steps and instructions below to add and edit an Accordion on your site.

The Accordion element editor has the following options:

- Accordions
- Accordion Styles
- Heading Styles
- Content Styles
- Background

The Accordion element editor:

Accordions

The Accordions on your site can be managed from the Accordions panel on the Accordion editor.

Refer to the texts under the pictures for detailed information ⬇️







Accordion Heading: Change the heading of your Accordion here.

Paragraph: Add a paragraph inside your Accordion using the built-in text editor.

Accordion Styles

This panel lets you stylize your accordions, add border & radius and change the background.

Accordion Gap: Change the gap between the accordions

Border & Radius: Add a border and adjust the radius of the accordions

Background: Add Solid or Gradient color background and edit it


Refer to the GIFs below to see the demonstration:

Heading Styles

The Heading styles option lets you style and customize the heading on your Accordion. With options like adjusting the heading size, changing the color, adjusting the padding and margin, and adding a background to it.

Refer to the Video below to see the demonstration:

Content Styles

The Content styles option lets you stylize the content on your Accordion. With options like adjusting the text size, changing the color, adjusting the padding and margin, and adding spacing.

Refer to the GIFs below to see the demonstration:

Background

With this option, you can change the background of your accordion element. You can add color, gradient, or any image of your choice.

Refer to the GIF below to see the demonstration:

Related articles

Navigation

Icon

Updated on: 05/06/2024