Gradient over Divi slides

Gradient over Divi slides

Some time ago while building a Divi slider we thought of adding a gradient background over the slider arrows so it would stand out more. Our solution? We used the ::after pseudo element as a “ghost div” that works as a gradient overlay.

 

What we had:

Gradient before

What we wanted:

Gradient after

Here are the steps to achieve that:

1- In the Divi builder open the fullwidth slider settings

Divi builder

2- Open the setting of the first slide

Slider settings

3- Go to the Custom CSS Tab

Slider settings

After:

 

Now we have a gradient overlay, but the text is below it – not very useful. Also, the button is unclickable! So, we’ll bring the slider content forward with good old z-index.

Slide Title:

Slide Description Container:

Slide Description:

Slide Button:

 

4- Repeat steps 2 and 3 for each slide.

 

Tip

You can replace the background property in ::after with any gradient you want! This simple gradient generator will help you.

Share

Recommended Posts

Leave a Reply

Your email address will not be published.