Overview #
The Image Accordion Module allows you to display multiple images in an interactive accordion layout. Each accordion item can include an image, icon, title, subtitle, description, button, lightbox, or link, making it ideal for portfolios, galleries, service sections, and feature highlights.
The module is fully compatible with the Divi Builder and provides advanced controls for layout, design, animations, and interactions.
How to Use #
- Enable the Divi Builder on your page.
- Add the Image Accordion Module.
- Open the Content tab.
- Click Add New Item to create an Image Accordion Child Item.
- Configure images, text, icons, buttons, or links for each item.
- Adjust design and animation settings from the Design and Advanced tabs.
Module Structure #
The Image Accordion Module is composed of multiple Image Accordion Child Items.
- Each child item represents a single accordion panel.
- Child items are managed individually.
- Global settings affect the entire accordion layout.
Image Accordion Child Item Settings #
Content Tab (Child Item) #
Image #
Configure the background image for the accordion item.
Options include:
- Image upload
- Parallax effect (On / Off)
- Background image size
(Cover, Fit, Actual Size, Stretch to Fill, Custom Size) - Background image position
(Top / Center / Bottom combinations) - Background image repeat
- Background image blend mode
Content Area #
Title #
Add a title for the accordion item.
Controls:
- Font style and weight
- Text alignment
- Text color and size
- Letter spacing and line height
- Text shadow
- Title HTML tag
Subtitle #
Add a subtitle below the title.
Controls:
- Same typography and styling options as the title
- Subtitle HTML tag
Description #
Add descriptive text for the accordion item.
Controls:
- Full typography options
- Color and spacing controls
Icon #
Add an icon or image icon to the accordion item.
Options:
- Enable icon (On / Off)
- Use image as icon (On / Off)
- Icon selection from the icon library
Button #
Options:
- Button text
- Button link URL
- Link target (same window / new tab)
- Button icon (On / Off)
- Button width (Full / Partial)
- Button alignment
- Hover effects (On / Off)
Lightbox #
Display the accordion image in a lightbox popup.
Options:
- Enable lightbox (On / Off)
- Lightbox icon selection
- Icon color
- Icon size
Item Link #
Make the entire accordion item clickable.
Options:
- Enable item link (On / Off)
- Link URL
- Open link in the same window
- Link icon settings (icon, color, size)
Item Order #
Control the order and identification of accordion items.
Options:
- Enable custom order
- Admin label
Child Item Design Tab #
Design options that apply only to individual accordion items.
Icon Design #
- Icon background
- Icon color and size
- Rounded corners
- Border styles, width, and color
Title Text #
- Font style and weight
- Text alignment
- Text color and size
- Letter spacing
- Line height
- Text shadow
Subtitle Text #
- Font style and weight
- Text alignment
- Text color and size
- Letter spacing
- Line height
- Text shadow
Description Text #
- Font style and weight
- Text alignment
- Text color and size
- Letter spacing
- Line height
- Text shadow
Button Design #
- Background color
- Margin and padding
- Font, weight, and style
- Text color, size, spacing, and line height
- Text shadow
- Border styles and rounded corners
Lightbox Design #
- Background color
- Rounded corners
- Border styles
Item Link Design #
- Background color
- Border styles
Spacing (Child Item) #
- Content margin and padding
- Icon margin and padding
- Lightbox margin and padding
- Item link margin and padding
Accordion Settings (Global) #
Located under the Content tab of the main module.
Options:
- Accordion type
- Event type (Click / Hover)
- Active item on load
- Active item order
- Close item on click outside (On / Off)
- Accordion container height
Animation Settings (Global) #
Options:
- Enable animation (On / Off)
- Animation types:
- Slide Left / Right
- Slide Up / Down
- Fade
- Animation duration (milliseconds)
- Animation delay (milliseconds)
- Enable stagger effect
Design Tab (Global Module Level) #
These settings affect the entire accordion layout.
Overlay #
- Default overlay
- Active item overlay
Items #
- Item gap
- Rounded corners
- Border styles, width, and color
- Box shadow
Content #
- Content alignment
- Vertical alignment
- Content background
- Border styles and color
- Box shadow
Spacing & Layout #
- Margin and padding
- Border settings
- Box shadow
- Transform
- Animation
Advanced Settings #
The Image Accordion Module includes all default Divi Advanced controls:
- CSS ID & Classes – Assign custom identifiers for styling or scripting
- Custom CSS – Apply custom styles to module elements
- Conditions – Display the module based on specific rules
- Visibility – Control display across devices and user states
- Transitions – Apply smooth visual transitions
- Position – Adjust relative, absolute, or fixed positioning
- Scroll Effects – Add scroll-based motion and animation effects
These options behave exactly like native Divi modules.
Best Use Cases #
- Image galleries
- Portfolio layouts
- Services and feature sections
- Visual storytelling
- Interactive content displays
Summary #
The Image Accordion Module helps you create interactive and visually engaging accordion layouts with full control over individual items and global styling—while maintaining a seamless and familiar Divi Builder experience.
