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:
Table of Contents
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 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.
How to Edit Images in Elementor
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 Gimp, PhotoPea, or Photoshop to get the images as desired (correct aspect, size, etc) before compressing and then uploading it to the site.
- 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.”
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.
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.
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.
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.