The Problem
When you use a “Visibility: Password Protected” on a page Divi has its own way of presenting the page.
The problem arises when (as is the case for a friend of mine) you’re using a white navigation text overlaid over an image produced by the Divi Builder.
The Divi builder elements in the page are automatically hidden by the password protection and you can end up with white menu text on a white background.
Solution
A few lines of css in your custom css box can fix this.
Note – replace “image-url-here” with the URL of an image.
.post-password-required .et_pb_section_first {
background-image: url('image-url-here');
padding-bottom: 0;
}
.post-password-required .et_pb_section_first .et_pb_row {
background-color: #fff;
width: 100%;
margin-top: 50px;
}
.post-password-required .et_pb_section_first .et_pb_row .et_pb_column {
position: relative;
width: 1080px;
margin: auto;
float: none;
}A little explanation…
The post-password-required class limits this to sections, rows and columns on password required pages. We’re adding the background image to the et_pb_section_first section, but you could equally add a background-color.
We’re then making the row full-width and the column fit to the website size and centered.
Hi
I have the strange issue…
When I make the page password protected and after I enter the password – the background colour in my full-width header just disappear. Also my simple text title with 40px font size becomes a normal one (14px)
How to fix this?
Hi Yura,
Do you have a link to the page so I can see the problem (if you haven’t found a solution already).
Hi. I am having an issue on a password protected page.
If I remove the password protect and set it the page to public all my theme options come back. How do I make it so the page looks like the others?
Hi, and apologies for taking so long to reply. I would have thought that was the behaviour you would expect. I’m not sure what you mean – can you post a link and explain what you expect to happen and what is happening.
Hi Tim: Same issue as Yura on password protected page can you please help me, here’s the URL https://www.staging4.ziplogix.com/recordconnect/ can you please tell me how to fix, thank you.
Hi Renee, Yura
I’m not sure what’s happening there. Before you enter the password the css class post-password-required is on the article tag. But after you enter the password that class is no longer there. Therefore my CSS shouldn’t affect anything after the password is entered.
On an iPhone especially it is hard to see where to enter the password on a protected page.
Is there an easier fix than entering custom code? Seems as if this is a bug. Users should know where to enter a password.
See
https://captainmorsehouse.com/welcome/
It may well be a bug. If so I’d suggest you ask Elegant Themes’ support. If you apply the CSS in the example then it should work.