Add Overlay on Slider Revolution

overlay in Slider Revolution

Hello Friends, Today we will learn how to add an overlay on Revolution Slider. Everybody knows that the most trending WordPress slider is SLIDER REVOLUTION. So today using Revolution Slider we will add an overlay on the slider.

Actually, Slider Revolution has a built-in option for dotted overlays, which can be added to the video slide. But if you’d like a solid colored overlay then follow the following steps one by one.

Step 1: Select Shape from Add Layer

Open your website wp-admin panel, Go to Slider Revolution and then click on slide editor and select slide on which you want to add a semi-transparent overlay. Now select Shape from Add layer option.

Step 2: Select a background color & opacity and enable the Full Width and Full Height

Now we have to add background color and set the opacity for the selected shape and then enable the Full Width & Full Height option.

Step 3: Set Vertical & Horizontal alignment of a selected Shape Layer

Next, we set the Selected Shape Layer‘s Vertical & Horizontal Alignment to “top” and “left“, and its “x” and “y” options value to “0”. See the below screenshot…

Vertical-horizontal alignment

Friends, if we, don’t order above setting in Shape Layer then it will show like this…

Layer not aligned

Step 4: Set the Layer’s “Behavior” Alignment option

Now set the Layer’s Behavior Alignment option to “Slide Based”. For this, Go to Behavior tab of the selected Shape Layer, then go to align option and select “Slide Based”. See below screenshot…

Step 5: The Shape Layer should be placed first in the list

In the last step, you need to make sure that your Shape Layer is placed first in the list, see the screenshot below

That’s all

If this post is really helpful to you then please share it and share your comments on the post as well.



14 thoughts on “Add Overlay on Slider Revolution”

    1. Thanks to show your interest and ask your query, I think you have to read the article carefully again. because I have created no. of slides through this 🙂 please let me know

  1. Hi, great article. It worked but my text layers become grey too. even if i change the zindex they are still grey. Not sure what thats about . But still great tutorial. thanks.

    1. Hello Max,

      Thanks to share your view on the article. From the setting of layer you can change the color. Please let me know if you did this otherwise I’ll tell you.

  2. Brother when I added the color overlay the text on my slider become grey instead of pure white which I set it. Now whatever I do becoz of overlay the color of my text remains grey but not pure white.

  3. Super helpful post for applying background overlay color. Your article solved my issue which was switching back & forth more than half an hour. Kudos to you.

Please share your thought

All the tools you need to build professional forms online.

Create custom web forms to capture leads

Collect payments

Automate your workflows

Build your business online

Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online