DIVI: Password protected pages css fix

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.

Share This