How to Use the Image Box Widget on Elementor Page Builder Plugin

The Image Box Widget is one of Elementor’s most versatile design elements, allowing you to create stunning visual content combinations that enhance user engagement.

Whether you’re building a services section, showcasing team members, or highlighting product features, understanding how to use the Image Box Widget on Elementor Page Builder Plugin will significantly improve your web design workflow.

Check Out More At: Elementor

Software: Elementor | Affiliate Program

How to Use the Image Box Widget on Elementor Page Builder Plugin

---

What is the Image Box Widget in Elementor?

The Image Box Widget is a powerful Elementor element that combines an image with text content (title and description) in a single, cohesive unit.

Unlike a simple image widget, the Image Box allows you to create interactive, clickable blocks that can link to other pages, making it perfect for creating call-to-action sections, service showcases, portfolio displays, and feature highlights.

How to Add the Image Box Widget to Your Page

Step 1: Open Elementor Editor

First, navigate to the page you want to edit and click Edit with Elementor to launch the page builder interface.

Step 2: Locate the Image Box Widget

In the left sidebar, you’ll find the Elements panel. You can either:

• Scroll through the widgets to find Image Box
• Use the search bar and type “Image Box” for quick access

Step 3: Drag and Drop

Once you’ve located the Image Box Widget, simply drag it to your desired location on the page. Drop it into any section or column where you want it to appear.

Configuring the Image Box Widget: Content Settings

After adding the widget, you’ll see the Image Box settings panel on the left. Here’s how to configure each element:

Uploading Your Image

1. Click on the image placeholder or the Choose Image button
2. Select an image from your Media Library or upload a new one
3. Click Insert Media to add the image to your Image Box

Pro Tip: Use high-quality images that are optimized for web (typically under 200KB) to maintain fast loading speeds.

Image Position

Choose where your image appears relative to the text:

• Top (default): Image above the text
• Left: Image on the left side
• Right: Image on the right side

Adding Title and Description

1. Title: Enter your heading text in the Title field
2. Description: Add supporting text in the Description field
3. Both fields support basic text and you can leave either blank if needed

Setting Up Links

To make your Image Box clickable:

1. Toggle the Link option to enable it
2. Choose your link type:
   • Custom URL: Enter any web address
   • Media File: Link to the image itself (for lightbox effect)
   • Dynamic: Link to dynamic content
3. Decide whether to apply the link to:
   • None: No clickable area
   • Box: Entire Image Box is clickable
   • Image: Only the image is clickable
   • Button: Add a separate button (more on this below)

Styling Your Image Box Widget

The Style tab offers extensive customization options to match your brand and design preferences.

Image Styling

• Opacity: Adjust image transparency (0-1)
• CSS Filters: Apply effects like grayscale, blur, brightness, contrast, and saturation
• Border Radius: Round the corners of your image
• Border: Add borders with customizable width, color, and style
• Box Shadow: Create depth with shadow effects

Content Styling

Title Style:

• Choose font family, size, and weight
• Set color and text shadow
• Adjust spacing and alignment

Description Style:

• Customize typography settings
• Set text color
• Control line height and letter spacing

Content Box:

• Adjust padding around the text
• Set background colors
• Add borders to the content area

Adding a Button

If you selected “Button” as your link type, you can customize:

• Button text
• Button size (small, medium, large, extra large)
• Button alignment
• Typography and colors
• Hover effects
• Button spacing

Advanced Customization Options

Hover Effects

Create engaging interactions by configuring hover states:

1. Switch to the Style tab
2. Click on the Hover state option
3. Adjust opacity, CSS filters, or border color on hover
4. Set transition duration for smooth effects

Background Overlay

Add a color or gradient overlay to your Image Box:

1. Go to Style > Content
2. Enable Background
3. Choose between solid color, gradient, or image
4. Adjust overlay opacity for the perfect blend

Responsive Design

Ensure your Image Box looks great on all devices:

1. Use the responsive mode switcher (desktop, tablet, mobile icons)
2. Adjust settings for each device independently
3. Hide the widget on specific devices if needed
4. Modify image size, spacing, and alignment per device

Best Practices for Using the Image Box Widget

1. Maintain Consistency When using multiple Image Boxes, keep dimensions, styles, and spacing consistent across all boxes for a professional appearance.

2. Optimize Images Always use properly sized and compressed images to ensure fast page loading. Aim for images around 800px wide for standard layouts.

3. Use Clear Call-to-Actions If adding links or buttons, use action-oriented text that clearly indicates what happens when clicked.

4. Leverage White Space Don’t overcrowd your Image Boxes. Adequate padding and spacing make content more readable and visually appealing.

5. Test Responsiveness Always preview your Image Boxes on different screen sizes to ensure they display correctly on mobile devices.

6. Accessibility Considerations Add descriptive alt text to images for better SEO and accessibility for screen readers.

Common Use Cases for the Image Box Widget

Services Section

Display your business services with relevant icons or images, titles, and brief descriptions.

Team Members

Showcase your team with photos, names, roles, and short bios.

Features Highlight

Present product or service features with illustrative images and explanatory text.

Portfolio Grid

Create a visual portfolio with project thumbnails, titles, and descriptions.

Testimonials with Photos

Add credibility with customer photos alongside their testimonials.

Troubleshooting Common Issues

Images Not Displaying

• Check if the image URL is correct
• Verify image file permissions
• Ensure image format is supported (JPG, PNG, GIF, SVG)

Link Not Working

• Verify the URL is complete with https://
• Check that Link option is toggled on
• Ensure you’ve selected the correct link type

Styling Not Applying

• Clear browser cache
• Check for conflicting CSS from theme or other plugins
• Verify you’re editing in the correct responsive mode

Frequently Asked Questions

Can I use GIFs in the Image Box Widget? Yes, Elementor supports animated GIFs in the Image Box Widget.

How many Image Box Widgets can I add to one page? There’s no limit, but consider page performance when adding many widgets with large images.

Can I add videos to the Image Box? The Image Box is designed for static images. For video content, use Elementor’s Video Widget instead.

Is the Image Box Widget available in the free version? Yes, the Image Box Widget is available in both free and Pro versions of Elementor.

Conclusion

Learning how to use the Image Box Widget on Elementor Page Builder Plugin opens up endless possibilities for creating engaging, professional web pages.

This versatile widget combines visual appeal with functionality, making it an essential tool in your Elementor design arsenal.

By following this guide and experimenting with different styles and configurations, you’ll be able to create stunning image-based content that captures attention and drives user engagement.

Start incorporating Image Box Widgets into your next Elementor project and watch your web pages transform into visually compelling experiences that resonate with your audience.