Skip to content
StoreDocsSupport
Get Divi Torque

Modules

Image Accordion

Line up image panels that expand on hover or click. Each panel has its own image, title, text, and optional button.

Image Accordion lines up image panels that expand when a visitor hovers or clicks. Each panel has its own image, title, text, and optional button. Use it to present services, steps, or portfolio pieces in a compact space. This module works in Divi 5.

Divi Image Accordion module with four panels and the first panel expanded

How to add the Image Accordion module

  1. Add a section and row, then add the Image Accordion module.
  2. Add an Image Accordion Panel for each panel and set its image.
  3. Choose the direction and whether panels expand on hover or click.

Content

Layout & Behaviour

Open the Image Accordion settings, go to the Content tab, and open the Layout & Behaviour group.

  • Direction: Horizontal (default) or Vertical.
  • Expand On: Hover (default) or Click.
  • Stack On: Never, Tablet and below, or Phone only (default). Below that size the panels stack and all content is shown.
  • Show Panel Content: Always, or Only when expanded (default). This controls the body text and button.
  • Content Position: Top, Center, or Bottom (default) of the panel.

Panel settings

Open an Image Accordion Panel and go to the Content tab, Panel group.

  • Panel Image with Image Alt Text.
  • Title, Body, and Button Text with its link. Leave Button Text empty for no button.
  • Expanded By Default: Marks the panel that starts open. If several panels are set, the first one wins.

Design

Panels

  • Height: Default 420px.
  • Gap Between Panels: Default 8px.
  • Expanded Size: How much larger the expanded panel is than a collapsed one. Range 1 to 8, default 3.
  • Transition Speed: Default 450ms. Visitors who ask their device for reduced motion do not get the transition.
  • Transition Easing: Ease (default), Ease In, Ease Out, Ease In Out, Linear, or Smooth.

Overlay

  • Overlay Color: A tint over every panel image so titles stay readable. Default rgba(0,0,0,0.35).
  • Expanded Overlay Color: The tint on the expanded panel. Default rgba(0,0,0,0.55).

Panel Title and Panel Body

Font settings for the panel text.

Panel settings

In the Design tab of each panel, the Image group has Image Fit (Cover by default, or Contain) and Focal Point X and Focal Point Y (both default 50%). Focal Point controls which part of the image stays visible as the panel narrows. The Title, Body, and Button groups style the panel text and button.

Tip

Keep the panel count low, and set Stack On to Phone only so narrow screens get readable full-width panels instead of thin slivers.