This tutorial will show you how to add an image to a web page using the Divi Visual Builder for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Transcript for: Divi 3.0 Tutorial-Add An Image To Your Webpage Using Divi Visual Builder

________________________________________________________________________________________

 

Hello, this is Jimi Blevins.

Today I’ll be showing you how to: “Add An Image Using the Divi Visual Builder.”

So, we’ll go ahead and add our image. “Insert Module, Image.”

ScreenshotHowToAddAnImage

Then, click on “Upload” in the “Image URL” space.

ScreenshotHowToAddAnImage2

Now, we can do our “Image Alternative Text” here and a “Title Text” if somebody mouses over the image.

We can also put on this option to “Open A Lightbox,” and this is if we want somebody to be able to click on the image and have it kind of zoom in. We can use the same image overlay settings that we have in our other gallery module where we can change the color of the overlay icon in the hover. Right now it’s just the default white with a blue plus sign in the middle which is fine, we can leave it there for now.

ScreenshotHowToAddAnImage5

You can also change the “Animation.” This is when the page loads or when somebody scrolls to this part of the page, the image is going to pull in from the left to the right.

This “Remove Space Below The Image” is if I had some text wrapping around here and there was just too much room, I can actually take out the default padding or margin that’s below the image just with this one option.

ScreenshotHowToAddAnImage6

Now getting into the “Design” settings, I can select a “Max Width” in case I wanted to make sure that this image never got further than a certain amount of pixels. I can “Force Into Full Width,” and “Always Center On Mobile” and I can also put a border on it and some custom margins.

ScreenshotHowToAddAnImage7

A lot of great options to do with this image module. I really like how you can turn it into a lightbox and kind of dress it up, that really helps when putting images in with your text and on your website.

My name is Jimi Blevins and thanks so much for watching this tutorial.