Add, Edit and Remove Images in Elementor

Add edit and delete images in Elementor
Share This Post

In this WPDesigns article, we will discuss how to Add, Edit and Remove Images in Elementor. On a website, images are extremely significant as they can convey all sorts of messages, meanings and even emotion to the visitor much as images in daily life. Since images are so important in life and in web design, you’ll probably use the Elementor Image Widget a lot when creating your site, so let’s go over all of the options available for this widget.

Before you add your images:

Add, Edit and Remove Images in Elementor
The Elementor Image Widget
A screen shot of a web page with an image on it.
Drag the image widget into position on the page
How to change the image in Elementor
Select the image you would like to add and click “Insert Media”

How to Add Images in Elementor

Go to the dashboard and then open a page with Elementor. The Elementor widgets will appear on the left-hand side after that. Simply type “image” into the search bar, and the image widget will appear. The widget can then be dragged and dropped onto the page using the blue highlight that appears as a guide to where it will be placed.

Once the image widget has been placed, click on the image widget and then open the media library by clicking on the image in the left-hand menu bar. From there, select your image and add the image.  Your image will now be added to the page or post.

How to replace an image
Find the image you would like to replace

How to Replace Images in Elementor

Open the page or post with Elementor from the Dashboard> Post/Page> Edit With Elementor then navigate to the image you would like to replace.  You can either left click and look to the left or right-click on the image widget and select “Edit” from the list.  Either off these routes will allow you to open up the left-hand menu bar and select the placeholder image or the image you’d like to change.  After, select the image to add from the media library or upload it if you need. Add the image and it will now be added to the page or post.

After replacing image in Elementor
Click the image and select the new one from the Media Library

How to Edit Images in Elementor

Edit option under image widget in Elementor
Content, Style and Advanced

You’ll have three options for editing the image widget that you have added – content, style, and advanced. 

If you would like to truly edit the image I would recommend using GimpPhotoPea, or Photoshop to get the images as desired (correct aspect, size, etc) before compressing and then uploading it to the site.

Content tab interface of image widget
Content tab interface of image widget

Content

  • Image –  Upload an image or choose Dynamic to use the featured image from posts, the site logo, and the author profile picture dynamically.
  • Image Size –  You can choose the image size from here.
  • Alignment –  You can set the image alignment here.
  • Caption –  Add a caption to the bottom of the image if necessary.  Choose between creating a new custom caption and using the image’s original Attachment Caption from the WordPress Media Library. 
  • Link To –  Choose whether to link to a custom URL, a media file, or none at all. Select “media file” to connect directly to the image’s position in your media collection. To link to any page on any site, select “custom URL.” If you don’t want to add a link to the image at all, choose “none.”

You’ll find the option to choose an image from the media library under the content tab. Then you can choose an image size from a variety of options, or you can create a custom image size by choosing custom. You can also align the image, add a caption if needed, and add a link from this section.

Style tab interface of image widget
Style tab interface of the image widget

Style

Under style tab, you will be able to style the image.

  • Width –  Here you can set the image width.
  • Max Width –  If you want to set a max width for the image you can do it here.
  • Hover Animation –  You can set a hover anumation if you want from the dropdown.
  • CSS Filters –  Blur, Brightness, Contrast, and Saturation are some of the CSS filters you can set.
  • Opacity –   Here you will be able to set opacity.
  • Transition Duration – Here you can set the duration of the hover animation.
  • Border Type –  If you want to add border in image then yiu can set it from there by choosing type.
  • Border Radius –  If you want to male the border rounded then you can easily adjust it from there.
  • Box Shadow –  Horizontal, vertical, blur, and spread are all choices for box shadow.
  • Caption –  The caption’s Alignment, Text color, Text Shadow, and Typography can all be adjusted from here.
Advanced tab interface of image widget
Advanced tab interface of image widget

Advanced

The Advanced tab is full of useful features:

  • Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
  • Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
  • Background – You can select the background for standard and also for hover.  You can choose from a solid background and a gradient.
  • Border – This allows you to add a border to the element when standard and hover along with the border-radius.  You can also add a box-shadow.
  • Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom.  For the page position, you have default, absolute, and fixed.  Check out this article for a deep look into the positioning properties in Elementor.
  • Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
  • Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
  • Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.
Deleting an image in Elementor
Right click and select delete to remove the image widget

How to Delete Images in Elementor

Deleting an image is easy; simply open a page or post with Elementor and find the image/ widget that you would like to delete an image, then right click and press deletefrom the page or post. Then, simply right-click on an image widget on a page you want to delete, and a menu will appear in front of you. Simply click the delete option to remove the image from the page or post.

Conclusion

Hopefully after reading this article you can now add, edit, delete and replace the image widget within the Elementor page builder. As previously mentioned images are important on websites because they aim to catch the visitor’s eye and they can communicate complex messages in the blink of an eye, adding these images is now easy.

Search
Recommended Hosting
Upgrade to Pro
Recent Posts
Picture of Josh
Josh

Josh is passionate about technology, web design, and SEO. Along with this is a keen skier and cyclist. Having spent years developing websites for clients, he enjoys writing and sharing knowledge online.

Contact
Want us to get Creative?

We would love to hear from you!

Josh Cut Out colour white

Josh

Typically replies in minutes

Hi there 👋,

Feel free to message me if you have any questions.