Skip to content

Advanced Image Card

Advanced Image Card is a card that puts an image or icon above, beside or next to text. Its one job is a single feature or content card with an optional badge and button.

How to add the Advanced Image Card module

  1. Open the Visual Builder and add a section and row.
  2. Search for "Advanced Image Card" and add the module.
  3. Upload the card image, or turn on Use Icon to show an icon instead.
  4. Enter the Title Text and Description.

Content

Content group

  • Use Icon: Off by default. Shows an icon instead of the image.
  • Select Icon: The icon to show. Used when Use Icon is on.
  • Upload Card Image: The card image. Used when Use Icon is off.
  • Open Photo in Lightbox: Off by default. Opens the image in a lightbox when clicked.
  • Image Alt Text: Alternative text for the image.
  • Use Badge: Off by default.
  • Badge Text: Default "Badge".
  • Title Text: The card title.
  • Description: The card text, as rich text.

Button group

  • Use Button: Off by default.
  • Button Text: Default "Click Here".
  • Button Link: The link URL.
  • Open Button link in new window: Off by default.

Design

Card group

  • Content Overflow: Hidden or Visible. Default is Visible.
  • Alignment: Left (default), Center or Right.
  • Content Padding: Default 25px on all sides.

Image/Icon group

  • Image/Icon Position: Top (default), Left or Right.
  • Icon Color: Default #333.
  • Icon Size: Default 45px.
  • Image Hover Animation: None (default), Zoom In, Zoom Out, and a list of named animations such as Pulse, Bounce, Shake and Tada.
  • Image Overflow: Hidden (default) or Visible.
  • Custom Image Height: On by default.
  • Image Height: Default 300px.
  • Image Width: Default auto.
  • Image Padding: Default 0px on all sides.
  • Icon Padding: Default 25px on all sides.
  • Icon Background Color: Background behind the icon.

Image/Icon Border group

Border and radius options for the image or icon.

Overlay group

  • Overlay: On by default.
  • Speed: Default 500ms.
  • Overlay Icon: The icon shown on the overlay.
  • Overlay Icon Color: Default #2EA3F2.
  • Overlay Icon Size: Default 32px.
  • Overlay Icon Opacity: Default 1.
  • Overlay Color: Default #2EA3F2.

Badge group

  • Badge Position: Right Top (default), Right Bottom, Left Top or Left Bottom.
  • Use Horizontal Position Center and Use Vertical Position Center: Off by default.
  • Badge Offset X and Badge Offset Y: Default 15px each.
  • Badge Padding: Default 5px 15px.
  • Badge Background Color: Default #ffffff.
  • Border: Border and radius options for the badge.

Badge Text, Title and Description groups

Font settings for each text.

Button group

  • Spacing Top: Default 10px.
  • Button options: Divi's standard button settings.

FAQ

Does Advanced Image Card work in Divi 4 and Divi 5?

The plugin includes a Divi 4 version and a native Divi 5 module. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.

Why is my image not showing?

When Use Icon is on, the module shows the icon and does not render the card image. Turn Use Icon off to show the image. The image also needs to be uploaded.

Where does the badge appear?

On the image, or on the icon when Use Icon is on. Set its corner in the Badge group.