How to style Protected Page in Divi
Are you looking for how to make an awesome protected page in Divi Theme?
If your answer is yes, then read this post.
In this post. I’ll show you how to design Protected Page in Divi using Custom CSS
Before & After view in Desktop
Adding Custom CSS
To add CSS, Follow these steps
Go to WordPress Dashboard > Click on Divi > Click on Theme Option > Scrolled Down & add following CSS to the custom CSS field
CSS
/* CSS for protected page starts */
.et_password_protected_form h1 {
text-align:center !important;
}
.et_password_protected_form p {
text-align:center !important;
font-size: 24px !important;
font-family: Lato !important;
color: #021827;
line-height: 1.4em;
}
.et_password_protected_form .et_submit_button:hover{
height:50px !important;
border:0 !important;
}
.et_password_protected_form .et_submit_button{
background-color:#021827 !important;
font-family: Lato !important;
height:50px !important;
border-radius:50px !important;
margin-left:-10vw !important;
border:0 !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;
color:#ffffff !important;
}
.et_password_protected_form .et_submit_button{
margin-top:-1px !important;
}
.et_pb_button:after{
display:none !important;
}
.et_password_protected_form form {
display: flex!important;
justify-content: center !important;
align-items: center !important;
}
.et_password_protected_form p input{
width:50vw !important;
border-radius:50px !important;
}
.post-password-required .et_password_protected_form {
padding: 13em 0em 15em 0em;
}
@media only screen and ( max-width: 480px ) {
.post-password-required .et_password_protected_form {
padding: 10em 0em 6em 0em;
}
}
/* CSS for protected page ends */
0 Comments