Image Icon Card Widget #
The Image Icon Card widget lets you build clean, modern card layouts by combining an image, an icon, text content, and an optional button. It’s ideal for feature highlights, service cards, or content blocks where visual hierarchy matters—especially when presenting an Elementor heading title with supporting visuals.
How to Use the Image Icon Card Widget #
Step 1: Add the Widget #
-
Open your page in the Elementor Editor.
-
Search for Image Icon Card.
-
Drag and drop the widget into your layout.
Step 2: Configure Image & Icon Content #
Go to Content tab → Image & Icon.
Image #
-
Image Upload – Choose the main image for the card.
-
Image Resolution – Select the image size (e.g., Large – 1024×1024).
Icon #
-
Icon Upload/Select – Add an icon to display with the card.
-
Set Icon Link – Enable if you want the icon to be clickable.
-
Link URL – Enter the destination link when enabled.
Use the image and icon together to visually support your card’s heading or message.
Step 3: Style the Card Box #
Go to Style tab → Box.
Normal / Hover States #
You can style the card differently for default and hover states.
Available options:
-
Padding – Control inner spacing of the card.
-
Border Type
-
Border Radius
-
Box Shadow
-
Background Type
-
Solid color
-
Background image
-
This helps create interactive card effects when users hover.
Step 4: Style the Image #
Go to Style tab → Image.
Options include:
-
Image Alignment – Left, center, or right.
-
Image Size – Control the image width/height.
-
Padding – Add spacing around the image.
-
Border Type
-
Border Radius
-
Normal / Hover – Separate styling for hover effects.
Step 5: Style the Icon #
Go to Style tab → Icon.
Customize the icon with:
-
Icon Size
-
Alignment
-
Vertical Position
-
Padding
-
Border Type
-
Border Radius
Normal / Hover Icon Styles #
-
Icon Color
-
Icon Box Shadow
-
Background Type
These controls allow you to match the icon design with your Elementor heading title and overall card layout.
Step 6: Style the Card Footer #
Go to Style tab → Card Footer.
Available options:
-
Margin
-
Padding
-
Background Type
-
Color
-
Background Image
This section is useful for footer content, buttons, or supporting text.
Step 7: Typography & Button (If Used) #
Still within the Style tab, configure:
-
Typography – Control fonts for text content or headings.
-
Button – Style button colors, spacing, and appearance (if the card includes a button).
Step 8: Advanced Options #
Use Elementor’s default Advanced tab for:
-
Margin & padding
-
Responsive visibility
-
Motion effects
-
Custom CSS (optional)
✅ Final Output #
The Image Icon Card widget produces a flexible, responsive card layout that combines images, icons, and text—perfect for feature sections, service listings, or content blocks with a clear Elementor heading title and supporting visuals.
Also See the you tube tutorial:
💡 Tips #
-
Use consistent image sizes across cards for a clean grid.
-
Apply subtle hover effects to improve user engagement.
-
Keep padding balanced so icons and headings don’t feel crowded.
-
Use global fonts/colors for design consistency.
