In this tutorial we learn how to insert and style images on websites, using the Image widget.
The tutorial will cover:
✔︎ Adding an image
✔︎ Image content options
✔︎ Optimizing images
✔︎ Styling images
✔︎ Using CSS filters
✔︎ Adding a hover effect
✔︎ Creating circular images
✔︎ And much more!
See Also:
Elementor Landing Page Template Library
Elementor Dynamic Content
Image Optimization
Responsive Design
Hey there, it’s Aviva from Elementor. Today I’ll show you how to use the image widget in Elementor.
Images are an important part of just about any website experience. They provide a powerful way to help tell a story and work to capture your visitors’ attention, increasing engagement on your website. Let’s jump in, and see it in action.
For our tutorial, we’ll use this HR company landing page template, which I’ve downloaded from the Elementor Library. To learn more about how to use the Landing Pages library, see our dedicated tutorial, linked description.
We’ll recreate this circular image, complete with an eye-catching hover effect. We’ll start by first deleting the existing image widget so we can recreate it from scratch.
From the widget panel, select the image widget, and drag it into the right column. The blue line indicates where it will be positioned when you let go.
Click the placeholder image to choose an image. You can either upload an image, or choose one already in the media library.
You can select from several different image file types, depending on your needs:
- JPGs, which are great for photos
- PNGs, for images that require transparency.
- GIFs, or “GIFs” if you prefer, for light animations
- and SVGs, for icons and logos.
Keep in mind that PNGs tend to have larger file sizes, and SVG files are generally smaller in size. For our tutorial we’ll use this JPG image of a team working together.
To the right of the selected image, we have the image details.
Alt Text, which is short for alternative text, is a concise description of the image, and appears when the image can not be displayed, such as on a screen reader. Using accurate alt text will both improve the accessibility of your website as well as its image SEO.
Title is automatically generated, using the image file name. You can edit the title, if you’d like.
The Caption field can be used to add a more detailed explanation. (For example, It is often used on news websites to give the image some context.)
Description is another important field for image SEO, and appears below the image in search results.
For more on image optimization, check out our dedicated video, linked in the description.
Ok, now go ahead and click Insert. Great.
For image size, you can select a preset size or choose your own custom size. Type in a value for either the width or height to keep the image proportional. For this example we’ll set it to full size.
You can set the alignment of the image to left, center or to right.
If you would like to display a caption below your image. Choose from either Attachment Caption, which pulls in the caption we added earlier in the Media Library, or Custom Caption, where you can type in your own text. The caption style can be customized in the Style tab, however, we don’t need a caption here, so we’ll set it back to None.
You can link the image to a Media File, and display it in a lightbox or as a standalone, or you can link it to a Custom URL.
You can type in your URL link here, or for Pro users, you can click the dynamic tags icon, to link to dynamic content. This applies for any other field displaying this icon.
Click the gear icon to adjust the link options, such as to display the link in a new window, or add a nofollow tag.
Ok, let’s move over to the Style tab. Here you can adjust the image width. You can select the unit, and change the width by dragging the slider, or typing in a precise value.
You also have the option to choose the image’s max width. Note that the Elementor default maximum width value is 100%
You can also set the image’s Height. If you’ve entered a width above, you can control the way the image stretches through the Object Fit. Choose Cover to keep the image proportional. For our example we’ll go back to the default size settings.
You can control the image opacity here, where zero equals completely transparent and one equals 100% opacity.
If you’d like, you can apply a CSS filter to your image for some interesting effects. Just like we did here, by lowering the saturation to create a black and white effect. Click here, to go back to the default.
Next we’ll add a hover effect to the image, which will display when visitors mouse over the image.
We can set the opacity to change on hover, as well as the CSS Filter. And we can adjust the transition duration, which controls the length of the animation in milliseconds. We don’t need the CSS Filters for our design, so I’ll reset them.
Next we’ll add a Hover animation. You have many to choose from, and I encourage you to experiment with them. We’ll select Rotate, and in just a moment we’ll apply a border radius to our image to make it circular, for a smoother animation. The next option is Border Type, where you can choose from several different border styles.
Enter a value for the Border Width below. These values are linked by default, but you click the link icon to unlink them, and enter separate values for any side.
I’ll go ahead and remove the border by setting it back to None. Next we’ll adjust the border radius, to round the corners and create a circular shape.
Switch the unit to percent, and type in 50. Cool! You can also unlink the values and enter them separately, to create different shapes. I’ll go ahead and relink the values, and set it back to 50.
We can add a Box Shadow to your image from here. You can play with the settings to give the image a subtle 3D effect. We’ll leave this one as is, for our design.
Everything is looking great here on Desktop, so let’s preview our page in responsive mode and make sure it’s optimized for other device sizes. Click the responsive icon (or use the keyboard shortcut CMD or Control Shift M to enter responsive mode.
We’ll begin in Tablet mode, so check the top bar to make sure you’re in the correct device. If not, click the Tablet icon, here. Everything looks great as is, here in tablet, so let’s take a look at mobile.
Another way to switch between device previews is by clicking the Viewport icon that appears next to designated widget settings. We’ll select mobile. It looks pretty good, but we can tweak it a bit by changing the image width.
You can adjust any widget setting as needed for responsive, wherever you see the viewport icon.
Ok, mobile looks great, so we’re all set. Click Publish, and let’s preview our design. Perfect.
And there you have it. Now you know how to use the image widget to draw your visitors’ attention and increase engagement on your website.
So go ahead, play with all the options, and create striking layouts using images. I can’t wait to see what you come up with.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit that notification bell.
