On this page

Image Box widget

Last Update: March 10, 2024

Add the widget

Add the widget to the canvas

To access and use a widget:

In Elementor Editor, click +.
All available widgets are displayed.
Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Image Box widget?

The Image Box widget is a design element used to combine images with text creatively. The widget allows you to display an image alongside text. This combination effectively showcases features, services, or any other content where you need visual and text content.

You can customize the size, alignment, and spacing of the image and the text. Additionally, there are options to add overlays, hover effects, and animations for enhanced interactivity.

Common use case

Harry is creating a website and looking for a design feature to highlight their online services.

They then used image boxes on the homepage to showcase different features with accompanying titles & descriptions.

Additional use cases

Use image boxes for a company’s About page to introduce team members. Each box shows a person’s photo, job title, and a quick bio.
Event companies can show upcoming or past events with image boxes. Each box has an event picture, date, and short info.
Display customer testimonials or reviews with photos, names, and feedback to build trust and credibility.

Add an Image Box widget: Step-by-step

To add an Image Box widget:

Add the Image Box widget to the canvas. For details, see Add elements to a page.
In the Content tab, under the Image Box field, use the Choose Image option to add an image from the media library or upload a new image.
Use the Image Resolution field to adjust the image size, from thumbnail to full, or set a custom size.
In the Title field, add the name that will appear in the image box.
In the Description field, add the text content that will appear in the image box.
(Optional) In the Link field, add URL for the image box content.
1. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
2. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
Use the Title HTML Tag field to choose the title’s HTML tag, such as H1 to H6, div, span, or paragraph.

Settings for the Image Box Widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Add, delete, and edit image box content and other controls.

Choose Image

Click the default image to select an image from the media library or upload a new one.

Image Resolution

Adjust image size: thumbnail, full, or your custom size.