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.
Images play a crucial role in capturing attention on websites. The Image widget allows you to add and customize pictures on your website. You can upload or select images, adjust size and alignment, apply hover effects and filters, and link photos to specific URLs.
Tim is creating a website for a new furniture store. To attract more people, they are hosting a woodworking workshop. On the website, they strategically placed a captivating image of a craftsman in action, shaping a piece of wood, right next to the contact details. This visual instantly caught visitors’ attention, making them curious about the workshop and store.
There are two ways to delete the image in the image widget.
To delete the image:
The image is deleted.
You can’t link from an image. However, you can add a link to a container. So if you want users to click an image to activate a link, put the image in a container and add the link to the container. For details see, Make a container clickable.
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.
Add your image or select dynamic tags to automatically use the post’s featured image, site logo, or author profile picture.
Determine the image size.
The image can be aligned to either the left , right
or center
of the widget. This is relevant when the image is smaller than widget.
The examples below show an image aligned to the left center and right. The border of the widget itself is in pink.
Add an optional caption below the image. Choose to curate a custom caption or use the attached caption from the WordPress Media Library. |
Link the image to its respective Media Files, add Custom URLs or choose None.
Use the slider to adjust the image width.
This is the minimum width for the widget. See Max width below to see how Width and Max Width work together.
Use the slider to define the maximum width for the image.
Setting a Max Width allows the widget to expand if needed or able. Thus helps keep the design consistent for different screen sizes.
For instance, you can set an image to take up 100% of a container’s width with a Max Width of 600 px. This way the image will be as wide as the contain but will never expand to more than 600 pixels wide.
Choose a height for the image using the slider. After selecting the height, you can pick how the image fits:
The options for Object Fit are:
Determine how the image appears by default.
Determine how the image appears when moused over.
Select a border style from None, Solid, Double, Dotted, Dashed, or Groove. For more details, see Border type.
To create rounded corners around the image, increase the border radius. For more details, see Border radius tools.
Click the 🖋️ icon to add a shadow to the image. Learn more about shadows.
To learn more about advanced settings, see Advanced Tab.
Get the answers you need with a 45-minute one-on-one video call. Our experts are here to help you elevate your Elementor site and achieve your goals.
Details: