How to work with Image Widgets in Elementor
Do you want to know how to work with image widgets in Elementor?
Image is a very important element for any website. Unique and professional images can express many things about your businesses or website. Besides images also makes the website looks attractive. It’s not possible to design a website without images. Images section is a must for every website.
Elementor makes it more easier to add images and style it for your website with the image widgets You can easily add images and style it as you want within a minutes using the Elementor images widgets features. It provides you everything you need to style a image section for your website.
Images widgets are available for Elementor free so to use this features you don’t need to buy the Elementor pro version. Without spending any money you will get maximum features and options to style your images. You can add static images as well as dynamic images in Elementor. But for dynamic images features you need to get the Elementor Pro version.
Here in this article you are going to show you how you how you can work with image widgets in Elementor.
How to work with Image Widgets in Elementor
Add images widgets
At first go to the pages where you want to add your images. Then select the section and click on the “+” icon.
After clicking on the “+” icon you have the option to select the column for your images section. There are many column section are available. You can select one matching with your image section design.
Now your section is created and now you need to add the image widgets on it. To add images widget search for image at left dashboard and then drag the widget and drop it into your created section.
Your image widgets is added to your created section, now you can add your images. To add image click on the choose image option from the left dashboard.
You can choose the image from your image library or you can upload a new image from your computer.
To add dynamic images hover on the cghoose image option and you can see the Dynamic tags option. To use dynamic tag option you need to get the Elementor pro version. Click on it and you can see many option like –
- Post
- Site
- Author
- Woocommerce
Select any option to create the fallback. Fallback is showed up when Elementor is not able to find dynamic images.
Style Image Section
After adding your images now it’s time to style it up. Before go to the style option from the content tab you can set some general settings for your image. Under content tab from image size option you can set the size of your images. There are a lots of size available or you can set the custom size.
You can also set the image alignment as left, right or middle from the Alignment option, set the caption as attachment or custom from the caption option and you can add link to your image from the link option.
Now move on to the style tab where you can set the image width and height. You can also set the object fit as –
- Default
- Fill
- Cover
- Contain
After that you can set opacity, CSS filters, border type, border radius and box shadow for normal and hover condition. You can increase and decrease the opacity from the opacity option. From the CSS filters option you can add blur, contrast, brightness, saturation for the image.
From the border feature you can set different border type, add border width, border color and border radius.
To add box shadow to your image click on the box shadow edit option and add the shadow as you prefer.
If you add any caption from the content tab then you can style the caption text from the caption menu. You can set the caption alignment, text color and background color from the options available.
From the typography edit option you can set the font family, size. style, line height, letter spacing and many more style for your caption text.
From the text shadow option you can add text shadow and from the spacing you set the space between the image and the caption. All the style are complete for the normal condition.
For hover condition you can set the hover animation. There are many animation available. You can choose any of them.
You can style the others element for hover condition too just following the same process you style in the normal condition. All the options and features are same. Just follow the same process to style the hover condition.
Advance settings
You can see our previous article to know how to use the advance settings if Elementor.
How to use the advance settings option of Elementor
Wrapping up
If you want you can design your page without any image but your page will not interact with your audience properly. A proper image section can connect with your audience properly which can help you top grow up your audience engagement. You can also display your valuable information thorough images.