Geschütze Seiten / Passworteingabe unter Divi mit CSS verschönern

In diesem Beitrag zeigen wir Euch, wie Ihr mit etwas CSS die Passwortabfrage verschönern könnt. Es bedarf eigentlich keiner großen Erklärung. Hier erstmal ein Beispiel:

CSS für Deinen Divi Passwortschutz

Um die Passworteingabe zu verschönern, füge folgenden CSS Code entweder unter Deinem Child Theme in der Datei, welche Dein Style steuert (gewöhnlich style.css) oder in Deinen Theme Einstellungen ein:

.post-password-required .et_password_protected_form {
   width: 50%;
   margin: 0 auto;
   margin-top: 25vh;
   margin-bottom: 25vh;
   background: #fff; /*Hintergrundfarbe*/
   padding: 60px 40px 80px 50px;
   border-top: 6px solid #e50450;
   Border-radius: 5px;
   box-shadow: 0 30px 50px -6px rgba(64, 65,72,.2);
}
 .et_password_protected_form p input {
   background: rgb(229,5,80); /*Hintergrund Passworteingabe*/
   color: #fff;
   border-radius: 3px!important;
   border: solid #000 0px!important; /*Rand Passworteingabe*/
   box-shadow: 10px 10px 10px -6px rgba(64, 65,72,.3);
   margin: 30px 30px;
}
 .et_password_protected_form > p {
   color: #e50450; /*Schriftfarbe*/
}
 .et_password_protected_form .et_submit_button {
   color: #fff!important; /*Button Schriftfarbe*/
   font-family: "Ubuntu"!important;
   border-width: 0px!important;
   border-radius: 26px;
   letter-spacing: 1px;
   font-size: 13px;
   font-weight: 800!important;
   text-transform: uppercase!important;
   background-color: #7a7a8c; /*Button Hintergrundfarbe*/
   padding-top: 15px!important;
   padding-bottom: 15px;
   padding-left: 30px!important;
   padding-right: 30px;
}
 .et_password_protected_form .et_submit_button {
   display: block;
   float: right;
   margin: 8px auto 0;
   font-family: inherit;
   cursor: pointer;
}
 .et_pb_button:hover:after {
   opacity: 0;
}
 .et_password_protected_form .et_submit_button:hover {
   background-color: #e50450; /*Button Hintergrundfarbe Hover*/
   color: #fff!important; /*Button Schriftfarbe Hover*/
   font-family: "Ubuntu"!important;
   border-width: 0px!important;
   border-radius: 26px;
   letter-spacing: 1px;
   font-weight: 800!important;
   text-transform: uppercase!important;
   padding-top: 15px!important;
   padding-bottom: 15px;
   padding-left: 30px!important;
   padding-right: 30px;
}

Farbliche Anpassung Deiner CSS Passwortabfrage

Natürlich musst Du Dich nicht an die Farben und Größen der hier vordefinierten Timeline halten. Um es Dir einfacher zu machen, habe ich Dir den Code kommentiert. Hier einfach Deine passende Farbe auswählen und am Ende hast Du dann Deine fertige optisch angepasste Passwortabfrage. Ich hoffe, Du hast Freue mit diesem QuickTipp.

Viele Grüße, Levent