So entwerfen Sie ein Inline-Anmeldeformular für einen benutzerdefinierten globalen Header in Divi
Veröffentlicht: 2019-12-30Das Erstellen eines Inline-Anmeldeformulars für Ihren Header kann die Benutzererfahrung wunderbar steigern. Sie sind perfekt für Mitgliedschaftsseiten und Online-Shops, da sie es den Benutzern sehr einfach machen, sich jederzeit oder auf jeder Seite der Website anzumelden. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Inline-Anmeldeformular für einen benutzerdefinierten Header-Benutzer, den Divi Theme Builder, entwerfen. Dazu erstellen wir einen einfachen responsiven globalen Header und entwerfen dann mit dem Login-Modul von Divi ein kompaktes Inline-Login-Formular oben rechts im Header. Der Build erfordert ein wenig benutzerdefiniertes CSS, aber sobald alles vorhanden ist, kann das Inline-Anmeldeformular leicht mit den integrierten Designoptionen von Divi an jedes Header-Design angepasst werden.
Lass uns anfangen!
Vorgeschmack
Hier ist ein kurzer Blick auf den benutzerdefinierten Header mit dem Inline-Anmeldeformular, das wir in diesem Tutorial erstellen werden.
Und hier ist das Inline-Login-Formular auf dem Tablet- und Telefondisplay.
Hier ist die Nachricht und der Link zum Abmelden, die angezeigt werden, wenn Benutzer angemeldet sind.
Laden Sie das Header-Layout für das Inline-Anmeldeformular KOSTENLOS herunter
Um das Layout aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht abgemeldet und erhalten keine zusätzlichen E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.
Kommen wir zum Tutorial, sollen wir?
Was Sie brauchen, um loszulegen
Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme. Das ist so ziemlich alles, was Sie brauchen, um anzufangen. Wir werden mit dem Divi Theme Builder ein neues Header-Template-Layout von Grund auf neu erstellen.
Hinzufügen eines neuen globalen Headers
Um die Dinge ins Rollen zu bringen, müssen wir einen neuen globalen Header für unsere Website erstellen. Gehen Sie dazu zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder.
Klicken Sie in der Standard-Website-Vorlage auf „Globalen Header hinzufügen“ und dann auf „Globalen Header erstellen“.
Wählen Sie dann die Option zum Erstellen von Grund auf.
Entwerfen des Divi Global Headers mit einem Inline-Login-Formular
Anpassen des Abschnitts
Über den Editor für das globale Header-Layout können Sie den benutzerdefinierten Header für Ihre Site komplett neu erstellen. Öffnen Sie zunächst die Einstellungen für den regulären Abschnitt und aktualisieren Sie Folgendes:
- Hintergrundfarbe links:
- Hintergrundfarbe rechts:
- Verlaufsrichtung: 48deg
- Padding: 10px oben, 10px unten, 20px links, 20px rechts
Um unseren benutzerdefinierten Header reaktionsschneller zu machen, fügen wir das folgende benutzerdefinierte CSS zum Hauptelement des Abschnitts hinzu.
display:flex; justify-content:center; align-items:center;
Hinzufügen des Kopfzeilenlogos zur ersten Zeile
Nun, da der Abschnitt fertig ist, können wir die erste Zeile hinzufügen.
Zeile hinzufügen
Fügen Sie dem Abschnitt eine einspaltige Zeile hinzu.
Bildmodul mit Logobild hinzufügen
Fügen Sie in der einspaltigen Zeile ein Bildmodul hinzu. Hier fügen wir das Logo für den Header hinzu.
Bild und Rand des Image-Moduls aktualisieren
Aktualisieren Sie die Bildeinstellungen wie folgt:
- Bild: [Logo hinzufügen (ca. 64 x 64 Pixel)]
- Rand: 20px rechts
Zeileneinstellungen aktualisieren
Bevor wir fortfahren, öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie Folgendes:
- Benutzerdefinierte Dachrinnenbreite verwenden: JA
- Dachrinnenbreite: 1
- Breite: 25%
- Reihenausrichtung: links
- Padding: 0px oben, 0px unten
Hinzufügen des Inline-Anmeldeformulars zur zweiten Zeile
Zeile hinzufügen
Nun, da die erste Zeile fertig ist, werden Sie im Editor feststellen, dass die erste Zeile 25 % des linken Abschnitts einnimmt. Dies wird im Wesentlichen die vorgesehene Zeile für das Logo unseres Headers sein. Wir müssen eine Abschnittszeile für das Inline-Anmeldeformular und das Menü auf der rechten Seite erstellen.
Fügen Sie dem Abschnitt eine zweite Zeile mit einer einspaltigen Struktur hinzu.
Anmeldeformular hinzufügen
Fügen Sie in der einspaltigen Zeile ein Anmeldemodul hinzu.
Standardinhalt löschen
Löschen Sie unter den Anmeldeeinstellungen den Scheintitel und den Hauptinhalt.
Benutzerdefinierte Klasse und CSS für das Anmeldeformular hinzufügen
Bevor wir mit dem Design des Inline-Login-Formulars zu weit gehen, fügen wir zunächst das benutzerdefinierte CSS und die CSS-Klasse zum Login-Modul hinzu. Auf diese Weise können wir die grundlegende Inline-Struktur des Formulars einrichten, bevor wir dem Formular mit den integrierten Optionen von Divi den letzten Schliff verleihen.
Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:
- CSS-Klasse: header-login-form
Fügen Sie das folgende benutzerdefinierte CSS zum CSS-Feld Login Description hinzu:
margin-bottom: 0px !important
Fügen Sie als Nächstes das folgende benutzerdefinierte CSS zum CSS-Feld des Anmeldeformulars hinzu:
width: 100%;
Fügen Sie das folgende benutzerdefinierte CSS zum CSS-Feld Login Fields hinzu:
padding: 5px 4% !important
Benutzerdefiniertes CSS zu den Header-Layout-Einstellungen hinzufügen
Da wir unsere benutzerdefinierte CSS-Klasse zum Anmeldeformularmodul hinzugefügt haben, können wir unser benutzerdefiniertes CSS hinzufügen, das nur auf dieses bestimmte Anmeldeformular abzielt.
Öffnen Sie die Header-Layout-Einstellung und fügen Sie das folgende benutzerdefinierte CSS hinzu:
.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}Dieses CSS lässt die Login-Felder und die Schaltfläche inline (horizontal) anzeigen, versteckt das "Passwort vergessen?" Link, und fügen Sie einen kleinen Rand zwischen den Feldern hinzu.
Zeileneinstellungen
Bevor wir dem Inline-Anmeldeformular den letzten Schliff geben, aktualisieren wir die Zeileneinstellungen wie folgt:
- Benutzerdefinierte Dachrinnenbreite verwenden: JA
- Dachrinnenbreite: 1
- Reihenausrichtung: rechts
- Padding: 0px oben, 0px unten
Designeinstellungen für Anmeldeformular
Jetzt können wir die Einstellungen des Anmeldeformulars aktualisieren. Öffnen Sie die Einstellungen des Anmeldeformularmoduls und aktualisieren Sie Folgendes:
- Hintergrundfarbe verwenden: NEIN
Feld- und Linktext
- Felder Hintergrund: Farbe: rgba(255,255,255,0.2)
- Textfarbe der Felder: #ffffff
- Felder Schriftart: Lato
- Feldtextgröße: 14px
- Textausrichtung: rechts
- Link-Schriftart: Lato
- Link-Schriftart: Unterstreichen
- Linktextfarbe: #ff3190
Schaltflächendesign
- Schaltflächentextgröße: 15px
- Schaltflächenhintergrundfarbe: #ff3190
- Breite des Schaltflächenrahmens: 0px
- Schaltflächenschrift: Lato
- Tastenpolsterung: 2px oben, 2px unten
- Rand: 15px unten
- Padding: 0px oben, 0px unten, 0px links, 0px rechts
Hinzufügen des Menüs zur zweiten Reihe
Menümodul
Mit unserem Inline-Login-Formular können wir das Menü direkt darunter hinzufügen.
Fügen Sie ein Menümodul unter dem Anmeldeformularmodul hinzu.
Menümoduleinstellungen
Aktualisieren Sie die Menüeinstellungen wie folgt:
- Hintergrundfarbe: rgba(0,0,0,0)
- Menüschrift: Lato
- Schriftstärke des Menüs: Fett
- Menütextfarbe: #ffffff
- Menütextgröße: 16px
- Textausrichtung: rechts
- Hintergrundfarbe des Dropdown-Menüs: #ffffff
- Farbe der Dropdown-Menüzeile: rgba(0,0,0,0)
- Textfarbe des Dropdown-Menüs: #000000
- Hintergrundfarbe des mobilen Menüs: #ffffff
- Textfarbe des mobilen Menüs: #000000
- Farbe des Einkaufswagensymbols: #ffffff
- Farbe des Suchsymbols: #ffffff
- Farbe des Hamburger-Menüsymbols: #ffffff
Speichern der Kopfzeile des Inline-Anmeldeformulars
Stellen Sie sicher, dass Sie das Layout speichern, bevor Sie den Kopfzeilen-Layout-Editor beenden.
Speichern Sie dann auch die Theme Builder-Einstellungen.
Endgültige Ergebnisse
Das ist es!
Schauen wir uns nun das Endergebnis an. Um das Endergebnis anzuzeigen, besuchen Sie einfach eine Seite Ihrer Website.
Hier ist die Kopfzeile auf dem Desktop-Display.
Hier ist die Kopfzeile des Inline-Anmeldeformulars auf dem Tablet-Display.
Und hier ist das Inline-Login-Formular auf dem Telefondisplay. Beachten Sie auch das mobile Menü.
Und hier ist, was der Benutzer nach der Anmeldung sieht.
Abschließende Gedanken
Dieser benutzerdefinierte Global-Header mit einem Inline-Login-Formular wird definitiv für jede Mitgliedschaftsseite oder jeden Online-Shop nützlich sein. Mit nur ein wenig benutzerdefiniertem CSS konnten wir das Login-Modul von Divi in ein elegantes Inline-Login-Formular umwandeln, das sich gut in den Header jeder Website einfügt. Hoffentlich wird dies für Ihr nächstes Projekt nützlich sein.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!