Updating slider images, using the Divi Visual Builder, is really easier than it seems – the biggest part is making sure that your slider images are all the same size. This will ensure the that images aren’t stretched more than they should be or place weirdly because each image in the slider is sized differently.
To get started, there are a few steps to get started and preparing your images for the slider module.
Updating the website
1. Login to your WordPress website.
2. Enable the Divi Visual Builder.
You can do this from the WordPress Toolbar, or there is a big blue button in the backend underneath the title of your page/post that says, “Use Visual Builder”.
3. Hover over the Slider Module and click on the cogwheel in the grey box.
This will bring up a pop-up window showing the different settings and content options available for that module.
4. Add a new slide
To add a new slide to your slider module, simply click the plus icon (+). If you already have slides, the plus sign will be at the bottom of the list of slides.
5. Add Slide Content
You have the option to include slide title, buttons, images, and background images. There’s quite a bit that can be done, however, in the video above, we just want to add a background image that spans the fullwidth of the website.
To add a background image, you’ll click on the ‘Background’ dropdown section and select the 3rd tab to add an image. This will prompt you to upload an image from the media library.
6. Add your image, click the green check-mark twice.
Once for the new slide you created and again to save the changes to the slider module.
How to prepare your image
1. Download a Hi-Res copy of the image you want to use.
This is important because you want an image that has enough pixels to span the fullwidth of the website. If it doesn’t, it’ll look awful once it’s uploaded.
2. Head over to Pixlr.com
www.pixlr.com – This is a free, photoshop-like, editing software.
Go down to: Pixlr Editor
Enable Flash for it to work.
3. Load in your image.
You’ll have a menu option to load an image from a few different sources.
– Your computer
– A URL
– Media Library
4. Enable the Crop Tool
Change the dropdown menu for “Constraint” to “Output Size”
5. Change the Width and Height
6. Drag the crop tool out over the image.
It’ll maintain the proportion that we just set, so you don’t have to worry about it being a weird shape.
7. Double Click on Image
Once you’ve set your crop and positioned it where you want it.
8. Save Image
A good target file size for images is 200KB or less.
9. Go to WordPress and upload your image for the slider.
And that’s it! Congratulations!