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

The Elementor editor open
A replacement image ready to upload (if swapping), or an image already in your Media Library

Click the image on your page to select it. The left panel switches to show the Image widget's Content settings.

In the Content tab, look under Image. You will see a small thumbnail of the current image (this is the Choose Image setting).

Click the thumbnail. The WordPress Media Library opens.

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 (or clicking Select Files).

Click "Insert Media." 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.

Under Image, click the current image (or the image icon if there isn't one yet). The Media Library opens.

Select or upload your new background image. Click Insert Media.

Publish your changes.

On Elementor's newer V4 elements, backgrounds work a little differently: in the Style tab, open Background and click the plus sign next to Overlay to add an image.

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 Resolution	Controls which size of the image is used (for example thumbnail, medium, large, full, or a custom size). Use "Large" or "Full" for hero images.
Alignment	Aligns the image left, center, or right
Caption	Optional text shown below the image: none, the caption saved in the Media Library, or a custom caption
Link	Makes the image clickable — link to the media file (which can open in a lightbox), a custom URL, or nothing

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, max width and height
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.jpg rather than IMG_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 much smaller files than JPG or PNG

Common questions

I replaced the image but the old one is still showing on the live site — why?

This is usually a browser cache issue. Do a hard refresh, which reloads the page without your browser's saved copy. The shortcut depends on your browser (in Microsoft Edge it is Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac); see How to clear your cache & hard refresh for yours. If the old image still shows, the server cache may need clearing — contact us for help.

The new image looks stretched or distorted — how do I fix that?

This usually happens when the uploaded image has a different aspect ratio than the original. Try uploading an image with the same proportions, or check the Image Resolution setting in the Content tab. If a Height is set in the Style tab, look at the Object Fit option below it: Fill can change the image's shape, Cover fills the space but may cut off parts of the image, and Contain keeps the whole image but may leave blank space around it.

Can I use an image from another website instead of uploading one?

Technically yes, but we strongly advise against it. Linking directly to images on other sites can cause them to disappear if that site changes, and may violate copyright. Always upload images to your own Media Library.

How do I edit an image that is used as a column background?

Select the column (not a widget inside it), click the Style tab, and look for the Background section. The process is the same as for a section background.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Learn more

Elementor Image widget