Image Card
The Image Card module shows information in a card with an image or icon, an optional badge, a title, a description, and an optional button. Use it for features, services, or products.
How to add the Image Card module
- Add a section and row, then add the Image Card module.
- In the Content tab, upload a card image and enter the Title Text and Description.
- Turn on Use Badge or Use Button if you want them.
Content
Content
- Upload Card Image and Image Alt Text.
- Open Photo in Lightbox: opens the image in a lightbox.
- Use Icon and Select Icon: show an icon with the card.
- Use Badge and Badge Text: add a badge, for example for a special feature, status, or offer.
- Title Text and Description.
Button
- Use Button: shows a button. It is off by default.
- Button Text, with the button link and whether it opens in a new tab.
Design
Card
- Content Overflow: Hidden or Visible.
- Alignment: Left, Center, or Right. The default is Left.
- Content Padding.
Divi's standard Background, Border, and Box Shadow groups style the card itself.
Image/Icon and Image/Icon Border
- Image/Icon Position: Top, Left, or Right. The default is Top.
- Icon Color, Icon Size, Icon Background Color, and Icon Padding.
- Image Hover Animation, Image Overflow, Custom Image Height, Image Height, Image Width, and Image Padding.
Overlay
- Overlay (shows an overlay on hover), Speed, Overlay Icon, Overlay Icon Color, Overlay Icon Size, Overlay Icon Opacity, and Overlay Color.
Badge and Badge Text
- Badge Position: Right Top, Right Bottom, Left Top, or Left Bottom.
- Use Horizontal Position Center, Use Vertical Position Center, Badge Offset X, Badge Offset Y, Badge Padding, and Badge Background Color.
- Badge Text holds the font settings for the badge.
Title, Description, and Button
- Title and Description hold the typography settings for those texts.
- Button holds Divi's button options, plus Spacing Top.