Trick # 532 | Dieser Beitrag beinhaltet 517 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Divi-Theme kommt mit einem patenten Login-Modul daher. Doch es lässt sich nicht komplett stylen: So sind etwa horizontal angeordnete Anmeldefelder von Haus aus nicht möglich. Es sei denn, Sie verwenden unseren CSS-Trick.
So wie nebenan zeigt sich das Divi-Login-Modul standardmässig:
Die Eingabefelder werden auf der Website untereinander dargestellt. Wer es stattdessen lieber horizontal mag, benötigt etwas CSS-Code.
Zunächst vergeben Sie dem Login-Modul jedoch eine CSS-Klasse. In unserem Fall heisst diese «horizontal-login-form». Tragen Sie diesen Klassennamen im «Erweitert»-Tab des Moduls unter «CSS-ID und Klassen» ins Feld «CSS-Klasse» ein.
Es folgt nun der CSS-Code, den Sie in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) einfügen:
.horizontal-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.horizontal-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.horizontal-login-form .et_pb_forgot_password {
display:none;
}Das Ergebnis sieht dann so aus:
Die Eingabefelder werden nun wie gewünscht horizontal statt vertikal ausgerichtet.
Werbung
Werbung
