Learning Divi: The Fullwidth slider module

You are here:
Estimated reading time: 1 min

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

Fullwidth slider with transparent menu

Fullwidth slider

Creating the fullwidth area

First let’s create a page in which to add the slider. You should choose to start from scratch.

Create a new page
Choose build 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.

Dismiss Divi’s suggestion

You will need to create a new special section called fullwidth and it’s showcased in purple so you can identify it as such.

Choose a fullwidth section in purple

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.

Choose the Fullwidth Slider

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).

Customize each slide separately
Add your content and a background

This is what the slide will look like.

Create home page

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.

Slide without overlay

You can configure the overlay to your heart’s content but I find the default is the standard and does a great job.

Slide with overlay

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.

Was this article helpful?
Dislike 1
Views: 25