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

BeforeAfter

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 */

1 Comment

  1. Rory

    Brilliant, this is the only solution so far of the many available I’ve seen that doesn’t destroy the page after successful login for me.

    Many thanks for the solution.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Archives

Follow Us