Swap Images in Divi

In this tutorial, we will look over how to change images in the Divi visual builder. For this tutorial, we presume you know how to log in to your website and access the Divi visual builder with a basic understanding of how it works. If not please refer to our other resources and come back!

‍

Step 1: Understanding your images

On our websites, we have two types of images. These are “background images” & what we will call “normal images”. While they may look the same, how they are implemented is a key difference and the best way to tell a background image on the front end it to resize the browser window, if the image placed next to the text moves with the text and changes size to stay at the same height or width then it is most likely a background image.

‍

If the image shrinks or grows when you resize and keep its aspect ratio then it is more than likely a “normal image”.

‍

Step 2: Changing a “normal image”

Signed into your website and have the visual builder activated on your desired page, find the image module you wish to change, click on it and then the settings cog:

‍

Once here you can click on the image thumbnail to upload or select a new one from the media library and once selected you can click the “Upload an image” button:

You should now have a swapped-over image!

‍

Step 3: Changing a background image

Now for changing a background image, you will be able to see it although finding it can be a whole other can of worms. In the most common use case they are found as column backgrounds that you can find by going row > column. But I will show you, beginning with finding the image and the associated row which has the green highlight in Divi:

‍

Once you are in your row settings you will see something like this with 1 or more column elements inside of it, they are in descending order from left to right as you visually see so in this example we want the settings of the second one:

‍

From your opened column settings we can navigate to the background image area and follow the same steps in the “normal image” section of this tutorial to select and apply a new image:

‍

Conclusion

Awesome so now you should have all your images changed and from here you can continue on working or save and exit the Divi visual builder.

‍

Thanks for reading this tutorial!

‍