Overview of the Accordion Slider module

This page shows you how to add the Accordion Slider module to your page and explains every setting in its Content, Design and Advanced tabs, including each accordion item, with screenshots. The Accordion Slider module shows images as vertical panels: the active panel opens wide with its title, description and button, while the others stay as narrow strips. For more details, view the demo.

How to add the Accordion Slider module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Accordion Slider in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Use Add New Accordion Item to add items. Click an item in the list to open its own settings; drag items to change their order.

Image

• Disable Lazy Loading: Whether or not to lazy load the slide images. Applies to all slides.

Slider

• Collapsed Width: Increase or decrease the slide custom width when it collapsed.
• Space Between Slides: Increase or decrease the slide custom gap when it collapsed.
• Autoplay: This controls the auto play the slider.
• Enable Linear Transition: Choose whether or not to enable linear transition between slides.
• Transition Duration: Specify the duration of transition for each slide in miliseconds.

Accordion Item settings

Each accordion item has its own settings. Click an item in the list to open them.

Content

• Slide Image: Upload the image for accordion slide.
• Title: Define the title which will appear in the active state.
• Description: Define the content which will appear in the active state.
• Show Icon: Choose whether or not use the button.

Button

• Show Button: Choose whether or not show the button.
• Button Text: Input the text to be used for the Read More Button.
• Button Link URL: Input the destination URL for the button to open when clicked.
• Button Link Target: Choose whether or not your link opens in a new window.

Design tab settings

The Design tab lets you style each part of the module:

• Icon: styling options for the icon.
• Title: styling options for the title.
• Description: styling options for the description.
• Accordion Item: styling options for the accordion item.
• Text, Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.