This video will show you the best sizes for images within the Divi visual builder. Use this to plan out your layouts while designing websites.
Hey, everybody, this is Jimi Blevins.
Today I put together a tutorial to show you guys the best practices for image sizes when you’re using the “Divi Visual Builder,” or the “Divi Builder.” This is just to help people out.
(This is one of the questions we get asked the most is: What size should my images be when I’m working on adding content to my website.)
The first thing I want to show you is I found this awesome website for these placeholder images. You can see I got this gray box here with the dimensions written in it.
I’m actually pulling from a website called “placehold.it”
You literally just plug in the dimensions of your image to this URL and it will put a placeholder image in. It works great with Divi because we can adjust our image sizes right on the fly.
I’ll show you.
So, I’ve got this image here, this is my one column image.
Let’s say I want to test out what this looks like if it’s 600 pixels tall. BOOM!
It automatically updates.
What if I want to look at this 580 pixels wide?
It’s just it’s a great tool for when you’re kind of figuring out your layouts and figuring out the dimensions of your images.
(I found this tool to be one of those priceless gems on the web for helping you out when you’re designing up a website, so I hope that helps you out.)
First off, we’ve got our single column.
So I added a row here in the “Divi Visual Builder,” it’s only got one column. Unless your settings are different in your style sheets or your theme options *the default setting for Divi is 1080 pixels wide.*
This is what’s going to set your column width for all the main content on your website. You can see that the image edge of the image lines up with my logo and lines up with my navigation elements.
*So 1080 pixels is the best if you’re doing a one-column image.*
(The heights on these images I’m showing you doesn’t necessarily matter, I’m more focused on the width making sure that it fits in the column properly.) This image can be as tall or short as you want to be but, if you wanted to go all the way across without getting sized down or compressed 1080 pixels is going to be the best size for you.
So, jump in here into two columns.
*I found the best image size is 510 pixels wide.*
(I put these in at 800 pixels tall just to kind of show you, here’s what it looks like if you have a tall image like a portrait image instead of a landscape. It’s still going to fill the area nicely, it’s still going to fit in there just fine.)
Again, that’s going to keep it from getting sized down and compressed on the fly.
So, if you’re doing *three columns across your best bet is going to be 320 pixels wide,* and that will line them all up perfectly.
Then, down to the *four column option: We’ve got 270 pixels* wide across the board and this works out great. These dimensions are exactly as they appear on the screen, they haven’t been sized up or down.
Now, if you want to see how these images look as far as on your tablet or your mobile device, the “Divi Visual Builder” has this great feature down here where I can click on this, and this is going to show me what it’s going to look like on a tablet.
You can see that Divi automatically sizes my images to 1080 pixels wide beautifully.
Then, if I scroll down, you can see it lines everything up makes it all fit together and work wonderfully.
Then, the last thing I might want to check is just the mobile devices. You can see this image is now just as wide as the one below it, so Divi takes care of a lot of the legwork for you, making it responsible and sizing your images.
That pretty much covers everything with the best practices on image sizes working with the “Divi Visual Builder.”
Once again, my name is Jimi Blevins and thank you so much for watching.