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…
Friends, if we, don’t order above setting in Shape Layer then it will show like this…
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…
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”
This doesn’t seem to work here anymore…no opacity layer shows up
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
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.
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.
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.
Hello Asad,
Thanks for asking your query. I think you have to change the text color to white. please attach your slider screenshot here.
awesome i set the full slide overlay..with the help of your article.
Thank you so much, Swaraj… It’s my pleasure that our blog helps you. Please keep reading, learning, and sharing.
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.
I’m glad that my article helped and solved your problem. Thanks again for commenting on the post. Keep learning and sharing.
Yeah this is outdated now. They’ve made many changes to their interface that this tut just doesn’t cover anymore.
Thanks Stef for your valuable feedback. We are working on the updated version and soon we will post the updated tutorial.
Thanks
Used it in Slider Revolution 6 and it worked great ! thank you for the clear tutorial 🙂
Hi Baski,
Thank you so much that you shared your feedback. I’m glad that my tutorial helps you. Please keep learning and sharing.
Thanks again