[Resolved] How to Change Opacity of the Page Hero color overlay

[Ned]

I am using Vinyasa Template from site library, I am trying to adjust the opacity of the color overlay of the Page Hero (featured Image) in post pages.

Please suggest how to do that. Thank you!

[Elvin]

Hi Ned,

You’ll have to go to Appearance > Elements and look for the Block Element responsible for the Page Hero for Post pages.

You then change the background color of the main Container block to a color with reduced alpha like this – https://share.getcloudapp.com/z8urNNYx

[Ned]

Thank you. I did look at Appearance > Elements, but did not find any Block Element responsible for the Page Hero for Post pages.

Again this is the Vinyasa Template that I am using.

[Elvin]

Vinyasa has an Element named “Blog Posts Headers” which is responsible for the Page hero of Posts.
https://share.getcloudapp.com/OAunppdp

You can edit its main container block’s background color. 😀

[Ned]

Yes, I see the overlay, but it is a checkbox. You can only turn it on or off. There is no option to change the opacity of the overlay, say to 0.5, for example. When I inspect element, the opacity is set to 0.8.

[Ned]

Thank you Elvin, I got it! Thanks for your time!!

[Elvin]

Nice one. No problem. Glad you got it sorted. 😀

[Author]

Posts