Image Accordion

Create engaging, interactive, and beautiful image accordions using the following steps.

How to add module on page

1. Insert DP Image Accordion module on a page.
2. Then click Add New Image.
3. It will open Accordion settings in the Content tab of the individual accordion settings.

Follow the below steps to customize the content of the Individual Image Accordion.

Content Customizations for Individual Accordion

1. Add Background for Default Accordion: Go to the Accordion settings >> Accordion >> Accordion Background >> Choose Image, Color or Gradient from the options.
2. Add Background for Active Accordion: Go to the Accordion settings >> Active Accordion >> Accordion Background >> Choose Image, Color or Gradient from the options.
3. How to add Title & Description to the Image Accordion: Go to the Content settings >> Title / Description >> Input the text.
4. Show Icon on the Image Accordion: Content >> Icon >> Choose an icon.
5. How to display Button on the Image Accordion: Go to the Content >> Show Button >> YES >> Button Text >> Enter your desired text.
6. Add Button Link & Open in a New Tab: Go to the Link settings >> Button Link URL >> Add the Link >> Button Link Target >> In The New Tab >> To open the button link in a new tab.
7. To customize accordion’s content on the individual level, move to the design tab.

Design Customization for Individual Accordion

1. How to change text alignment: Go to the Text settings >> Text Alignment >> change alignment as required.
2. How to change text theme: Text >> Text Color >> select Dark / Light.
3. Style Title: Go to the Title settings >> apply text customizations as needed.
4. Style Description: Go to the Description settings >> apply text customizations as needed.
5. How to change icon size, and color: Go to the Icon settings >> use Icon Font Size / Icon Color >> to change size / color.
6. How to apply icon shape and shape background color: Go to the Icon >> Style Icon >> YES. Use Shape >> to choose shape as Circle / Square / Hexagon. Use Shape Background >> to change shape background with color.
7. How to change Button alignment: Go to the Button settings >> Button Alignment >> choose alignment as required.
8. How to apply custom styling (Size, Text Font, and more) to the button: Go to Button >> Use Custom Styles For Button >> YES.
9. Apply Margin and Padding: Go to the Spacing >> Margin / Padding >> input the values.
10. Add Rounded Corners: Go to the Border settings >> Rounded Corners >> Input the values.
11. Add Border Styles to the Image Accordion: Go to the Border >> Border Styles >> Choose Border Styles as the requirement.
12. Apply a Box Shadow to the individual accordion: Go to the Box Shadow settings >> Choose Box Shadow as required.
13. How to apply animation effects to the accordion: Go to the Animation settings >> Accordion Content Animation >> Choose an animation effect.
14. Save the customization and move to the Primary Settings of the Module.

Configuration settings for each Accordion (Trigger type, Accordion Orientation, Content Alignment, and more)

Once applied all the customization to the image accordion in the individual settings, tweak the Configuration settings option to make the accordion suitable for your design needs.

1. Choose Accordion Trigger Type: Go to the Configuration settings >> Accordion Trigger >> Select >> Hover / Click.
2. Select Accordion Orientation: Go to the Configuration settings >> Accordion Orientation >> Select >> Horizontal / Vertical.
3. Change Content Alignment: Go to the Configuration settings >> Content Alignment >> Select >> Top Left / Top Right / Top Center / Center / Bottom Left / Bottom Right / Bottom Center.
4. How to change Active Accordion Image Size: Configuration >> Active Accordion Image Size >> Input the value or move the slider.
5. How to set the number of Default Active Accordion: Configuration >> Default Active Accordion >> Input the value or move the slide
6. How to set the duration to smoothen the active accordion appearance: Configuration >> Transition Duration >> Input the value or move the slide

Design Customizations for each Accordion (Only Applicable if not customized at Individual Level)

1. How to change text alignment: Go to the Text settings >> Text Alignment >> change alignment as required.
2. How to change text theme: Text >> Text Color >> select Dark / Light.
3. Style Title: Go to the Title settings >> apply text customizations as needed.
4. Style Description: Go to the Description settings >> apply text customizations as needed.
5. How to change icon size, and color: Go to the Icon settings >> use Icon Font Size / Icon Color >> to change size / color.
6. How to change Button alignment: Go to the Button settings >> Button Alignment >> choose alignment as required.
7. How to apply custom styling (Size, Text Font, and more) to the button: Go to Button >> Use Custom Styles For Button >> YES.