Image Element

Last Updated on

The Image element allows you to display images in various styles, sizes, and use more other settings. It also offers many features like a caption, switch image on hover, add URL to the image, etc. You can change the image size, set parallax effect and opacity, add border around the image and other settings.

x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Image, you need to look for it in the Elementor knowledgebase.

In this article


Displaying an Image Element

To add an Image element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for an “Image”.

4
Drag and drop the Image element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
Image Adds an image on the page.
Caption Adds caption text under the image.
Link Sets a custom link for the image or to the media file.
Switch on Hover Sets a custom image upon hover.

Settings

SettingDescription
Image Size Sets image source size between the WordPress Image sizes or define a custom size. More information can be found here. This is different than the Size option in the Style tab.

You can also have the Hover Effect (in case the “Switch on hover” option was not enabled in the Content Tab) and Loop animation (in case you didn’t have the Hover Effect).

Style

SettingDescription
Size Sets the size of the image in pixels or percent.
Opacity Sets the opacity of the image.
Parallax Scroll Sets a parallax scroll effect for the image.
Alignment Aligns the image on a page.
Border Type Sets a type of border for the image.
Width Sets the width of the border.
Border Radius Sets a custom radius for the border.
Color Sets the border color.
Box Shadow Sets the shadow around the image.

Caption

This setting appears if you enter caption text in the “Content” tab.

SettingDescription
Alignment Aligns the caption on a page.
Text Color Sets the caption color.
Typography Let’s you change and style everything related to the caption text.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Image element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket