How to edit & swap images in Elementor
Learn how to replace, resize, and adjust images on your Elementor page using the Image widget and background image settings.
Images are one of the most common things to update on a website. This guide covers how to replace an image, change its size, and adjust how it looks on your Elementor page.
Quick summary
Click an image on your page, then click the image thumbnail in the left panel to open the WordPress Media Library. Choose a new image, or upload one from your computer. Save when done.
What you'll need
Beginner 5 minutes- The Elementor editor open
- A replacement image ready to upload (if swapping), or an image already in your Media Library
How to replace an image (Image widget)
Click the image on your page to select it. The left panel switches to show the Image widget's Content settings.
In the left panel, look for the Image field. You will see a small thumbnail of the current image with the label "Choose Image" or "Image."
Click the thumbnail or the image area. The WordPress Media Library opens in a popup window.
Select an existing image from the Media Library by clicking it, or upload a new one by clicking the "Upload Files" tab and dragging your file in.
Click "Insert Media" or "Select." The new image replaces the old one on the canvas.
Click Update or Publish to save your changes.
Always add alt text
After uploading a new image, fill in the "Alt Text" field in the Media Library. Alt text is a short description that screen readers use — for example, "Team photo at the 2025 company retreat." It also helps with SEO. See Alt text explained.
How to change a background image
Some sections or containers use an image as their background rather than showing a separate Image widget. Here is how to change it:
Click the section or container (not a widget inside it) to select it.
Click the Style tab in the left panel.
Find the Background panel and expand it.
Change the Background Type to "Classic" if it is not already set to that.
Click the image field next to the word "Image." The Media Library opens.
Select or upload your new background image. Click Select or Insert.
Publish your changes.
Image size and display settings
After selecting an image, you can control how it appears using the settings in the left panel.
| Setting | What it does |
|---|---|
| Image Size | Controls resolution (thumbnail, medium, large, full). Use "Large" or "Full" for hero images. |
| Alignment | Aligns the image left, center, or right within its column |
| Caption | Optional text shown below the image |
| Link | Makes the image clickable — link to a URL, media file, or attachment page |
These settings are in the Content tab when the Image widget is selected.
Adjusting image appearance (Style tab)
In the Style tab for an Image widget, you can:
- Set the image width in pixels or as a percentage
- Add a border around the image
- Add a box shadow for a subtle 3D effect
- Adjust the border radius to make corners rounded
- Set opacity if you want the image to appear semi-transparent
Image SEO and file naming
Before uploading an image, it is good practice to:
- Name the file descriptively — for example,
team-photo-2025.jpgrather thanIMG_4923.jpg - Compress the image to keep your page loading fast (see Images & page speed)
- Use the correct format — JPG for photos, PNG for images with transparency, WebP for best compression
Common questions
Related guides
- How to edit text in Elementor
- Editing buttons & links
- Alt text explained
- Images & page speed
- Publishing & updating your page
Need a hand?