Designing visually engaging sections is essential for improving user experience and delivering content effectively. Image Icon Cards are a great way to combine visuals, icons, and text into a clean, structured layout. The Image Icon Card widget in Elementor allows you to create attractive content blocks that highlight features, services, or key information. With Turbo Addons, you can easily design responsive and customizable cards without any coding. Whether you’re building a business website, landing page, or portfolio, this widget helps present information clearly. In this guide, you’ll learn how to use the Image Icon Card widget step by step.
Image Icon Card Elementor Free: Complete Step-by-Step Guide
The Image Icon Card widget in Elementor (free) by Turbo Addons is designed to create modern, structured content layouts by combining images, icons, and text.
In this guide, you’ll learn how to use the Image Icon Card widget, configure its settings, and style it to match your website design — all without coding.
What Is Image Icon Card in Elementor?
The Image Icon Card widget allows you to create visually appealing content cards that include:
- Image
- Icon
- Title and description
It’s commonly used to:
- Showcase services or features
- Highlight key information
- Create clean content sections
- Improve visual presentation
How to Use the Image Icon Card Widget
Step 1: Add the Widget
- Open your page in 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
- Upload your image
- Adjust image resolution
Icon
- Select an icon for the card
- Enable or disable icon display
- Add link (optional)
Use image and icon together to visually represent your content.
Step 3: Style the Card Box
Go to: Style Tab → Box
Normal / Hover States
You can style the card differently for normal and hover states.
Available options:
- Padding
- Border type
- Border radius
- Box shadow
- Background type (solid or gradient)
Step 4: Style the Image
Go to: Style Tab → Image
Options include:
- Image alignment (left, center, right)
- Image size
- Padding
- Border type and radius
- Normal / Hover effects
Step 5: Style the Icon
Go to: Style Tab → Icon
Customization options:
- Icon size
- Alignment
- Vertical position
- Padding
- Border type
- Box shadow
Normal / Hover Icon Styles
- Icon color
- Background type
- Shadow effects
Step 6: Style the Card Footer
Go to: Style Tab → Card Footer
Available options:
- Margin
- Padding
- Background type
- Color
- Background image
Step 7: Typography & Button (If Used)
Within the style settings, configure:
- Typography for title and description
- Button styling (if enabled)
Step 8: Advanced Options
Use Elementor’s advanced settings for:
- Margin & padding
- Responsive visibility
- Motion effects
- Custom CSS (optional)
Final Output
Once completed, your Image Icon Card will display a clean, structured, and visually engaging content block that combines images, icons, and text — perfect for showcasing services, features, or key highlights.
Tips
- Use consistent image sizes for better alignment
- Keep text short and clear
- Maintain spacing for clean layout
- Use icons that match your content theme
Why Use Image Icon Card?
Using image icon cards helps:
- Improve content presentation
- Enhance user engagement
- Highlight important information
- Create visually appealing sections
Importance of Using Image Icon Card in Elementor
Image Icon Cards are not just design elements — they help structure content and improve readability.
Here’s why they matter:
- Organize content into clear sections
- Improve visual hierarchy
- Increase user engagement
- Make content easier to scan
- Enhance overall website design
They are especially useful for service pages, landing pages, and feature sections.
Why Use Turbo Addons for Image Icon Card?
Turbo Addons offers a flexible and easy-to-use Image Icon Card widget for Elementor.
Here’s why it stands out:
- Free and beginner-friendly
- Fully customizable design options
- Smooth performance
- No coding required
- Advanced styling controls
It helps you create professional content cards quickly and efficiently.
CTA
Start building visually engaging content with Turbo Addons
Create powerful Image Icon Cards in Elementor within minutes.
👉 Try the Image Icon Card widget now
👉 Explore more widgets inside Turbo Addons
Frequently Asked Questions (FAQ)
1. Is the Image Icon Card widget free in Turbo Addons?
Yes, this widget is available in the free version of Turbo Addons.
2. Can I use both image and icon together?
Yes, you can combine both to create visually rich content cards.
3. Can I customize hover effects?
Yes, you can style different hover states for the card and icon.
4. Can I add links to the card?
Yes, you can add links to icons or other elements.
5. Is it responsive?
Yes, the widget works well on all devices.
6. Do I need coding skills?
No, everything can be done using Elementor’s interface.
