Design trends come and go but the great visuals that a fullwidth slider gives to your website is priceless. In this article we talk about how to set that module up on your site.
Samples of Fullwidth Sliders
Creating the fullwidth area
First let’s create a page in which to add the slider. You should choose to start from scratch.
When the Divi builder prompts you to add a new row immediately, dismiss that option by clicking on the x in the right top corner.
You will need to create a new special section called fullwidth and it’s showcased in purple so you can identify it as such.
Adding the fullwidth slider module
Once you have added the fullwidth section you will be shown the available modules you have for this type of section. It’s a short list but you can do quite a lot with it. We will choose Fullwidth slider in this case.
Customizing each slide
The fullwidth slider module immediately loads two slides in the module so you can have an example to work with. For each slide we can change the background (in this example we add an image) and you can change all the font properties of the title, text and button. Remember to optimize your images for WordPress (Click here for the article).
This is what the slide will look like.
Adding an overlay to help with visibility
Sometimes your background is a bit too bright for the content you have on it. So in these situations we have a great tool in the overlay section where you can add an overlay to that image so the contrast is better and you can read your slide’s content.
You can configure the overlay to your heart’s content but I find the default is the standard and does a great job.
I find that the fullwidth slider is a very attractive addition to a homepage where you want to showcase the hero section.
Thank you for reading.