Just like the adage says. “A picture is worth a thousand words”. Sometimes, it’s way easier to convey a message via an image. It also applies to web design. It’s almost impossible to design a web page without involving an image element. Being a tool that puts design on the emphasis, Elementor makes it easy for you to add an image to your design by providing the Image widget. You can simply drag the Image widget to the canvas area to add an image element.
Not only you can add a static image, but you can also add a dynamic image in Elementor. This feature (the ability to add dynamic image) is especially useful to create a custom template like a custom single post, custom category page, custom header, and so on — using Elementor’s theme builder. The Image widget itself is available on both versions of Elementor (read: Elementor Free vs Elementor Pro), but to be able to add a dynamic image, you need to use the pro version.
How to add an image in Elementor
On the Elementor editor, simply drag the Image widget from the left panel to the canvas area then click the image picker to select the image you want to use.
Adding a dynamic image
To add a dynamic image, you can hover your mouse over the image picker and click the database icon and select the dynamic image type you want to add from the available options.
You can then click the wrench icon to select the fallback. Fallback itself is the default content to be displayed when the dynamic content is not available. In this case, rollback is the default image to be displayed when Elementor can’t find the dynamic image.
Styling up the image
To style up the image, you can go to the Style tab on the settings panel (panel on the left side). Before going to the Style tab, you can set the image size, image alignment, and add a link to the image on the Image block under the Content tab.
On the Style tab, you can set the border radius, apply CSS filters, set the custom size, opacity, and apply a box shadow.
- Setting the custom size
On the Image block under the Content tab, you can set the size of your image. If you want to set a custom size, you can simply set the width value and the height value on the Image block under the Style tab. You can use whether the percentage unit, pixel or viewport’s width (VW).
- Setting the image opacity
To set the opacity level of the image, you can simply slide the adjuster on the Opacity option on the Image block under the Style tab. You can se the opacity level from 0 to 1.
- Applying CSS filters
If you want it, you can apply CSS filters to your image to add certain image effects. There are 5 filter options you can apply: Blur, Brightness, Contrast, Saturation, and Hue. Simply click the pencil icon on the CSS Filters option and set the CSS filter values you want by sliding the adjusters.
- Setting the border
To make your image looks more compelling, you can also set the border. To add the border, first, select the border type on the Border Type option. Then you can set the border width, border color, and border radius.
By the way, border radius is the tilt level of the corner sides of the image (top-right, top-left, bottom-right, bottom-left). The higher the value of border radius, the more rounded your image will be.
- Applying a box shadow
To apply a box shadow, you can simply click the pencil icon on the Box Shadow option. Select the shadow color and set the value of the horizontal orientation, vertical orientation, blur level, and the spread level.
To make some advanced settings to the image, you can open the Advanced tab on the settings panel. From this panel, you can set things like margin and padding, entrance animation, custom CSS, and so on.
- Setting the margin and padding
To set the margin and padding of the image, you can open the Advanced block. You can read this article to learn more about margin and padding.
- Applying an entrance animation
To make your image looks more compelling, you can apply an entrance animation. To do so, you can open the Motions block. From this block, you can also set the scrolling effects, mouse effect, and sticky option. To apply an entrance animation, simply the entrance animation style on the Entrance Animation option.
- Adding a custom CSS
If you have CSS knowledge, you can also add custom CSS to the Image widget. To add custom CSS, you can simply open the Custom CSS block and paste your CSS code on the available field.
- Hiding the image on a certain device type
In Elementor, you can use a different setting on a certain widget for different device types. Also, you can set a widget to be disabled on a certain device type. For instance, you can disable the Image widget on the tablet device. To do so, you can open the Responsive block. Slide the buttons to hide the widget on a certain device.
- Setting the custom position
When you add an image in Elementor, the default position is set to static (Default). There are two other position options you can set to: Fixed and Absolute.
– Fixed: If you select this option, the image will be positioned relative to the user’s viewport
– Absolute: If you select this option, the image will be positioned absolutely to its first positioned parent.
To set the custom position, you can open the Positioning block under the Advanced tab. Select the custom position you want to set to on the Position option and set the offset of the horizontal orientation and the vertical orientation.
The bottom line
Image is an important element of a design. You can definitely design a page without an image at all, but your design will be tasteless. You can use the Image widget to add an image element to your Elementor design, be it a page or theme builder template. Elementor allows you to add both a static and dynamic image (pro version only). In addition to the Image widget, there is also the Image Box widget to add an image element along with the text content. The latter mentioned widget is better suited for a certain need like creating a team member section, features list section, and other sections and involve image and text content.