Skip to content

Divi Card

Card is part of Divi Conkit Pro. It combines an image, heading, body text, an optional badge, and a CTA button into a single styled card — the building block for services, pricing blurbs, and feature grids.

Key Features

  • Flexible image/icon position — Top, Left, or Right of the content.
  • Hover overlay — an optional icon overlay that fades in on hover, with adjustable speed and opacity.
  • Corner badge — position it in any of 4 corners with custom offset and padding.
  • 5 hover animations for the image — Zoom In, Zoom Out, Slide Up, Slide Down, Shrink, or Greyscale.

Adding the Module

  1. Edit a page with the Divi Visual Builder.
  2. Add a new module and search for Card.
  3. Upload an image, add your title/description, then enable Use Badge or Use Button as needed.

Content Settings

  • Image/Icon Position — Top, Left, or Right.
  • Use Badge — Badge Position (4 corners), Horizontal/Vertical Offset, Padding.
  • Use Button — Button Link, open in new window.
  • Show Overlay on Hover — Overlay Hover Speed, Background, Icon, Icon Color/Size/Opacity.
  • Content Overflow — Hidden or Visible, plus Content Padding and Alignment.

Design Settings

  • Image — Height, Width, Padding, and Hover Animation.
  • Content — title/description typography and content box padding.
  • Badge — background, color, and padding when Use Badge is on.
  • Button — full button styling including hover state.

Consistent card grids
Set the same Image Height across every Card instance in a row so cards line up evenly even when titles or descriptions vary in length.

FAQ

Does it work with Divi 5?

Yes. Native Divi 5 module with full Divi 4 support — your license covers both.

For a swipeable row of cards, use Divi Carousel Pro’s Card Carousel module instead — it wraps this same card style in a Swiper.js carousel.

Where can I see it in action?

Visit the Card module page for a live overview and pricing.

Loading...