So entwerfen Sie ein Online-Anmeldeformular für einen benutzerdefinierten globalen Header in Divi

Das Erstellen eines Online-Anmeldeformulars für Ihren Header kann die Benutzererfahrung erheblich verbessern. Sie eignen sich hervorragend für Mitgliederseiten und Online-Shops, da Benutzer sich jederzeit und auf jeder Seite der Website anmelden können. 

In diesem Tutorial zeigen wir Ihnen, wie Sie ein Online-Anmeldeformular mithilfe eines benutzerdefinierten Headers in Divi Theme Builder entwerfen. Zu diesem Zweck erstellen wir einen einfachen reaktionsschnellen globalen Header und entwerfen dann mithilfe des Divi-Anmeldemoduls ein kompaktes Online-Anmeldeformular oben rechts im Header. Für die Erstellung ist ein wenig benutzerdefinierter CSS-Code erforderlich. Sobald jedoch alles vorhanden ist, kann das Online-Anmeldeformular mithilfe der Entwurfsoptionen problemlos an jedes Header-Design angepasst werden. integrierte Divi.

Ergebnisübersicht

Hier ist eine kurze Übersicht über den benutzerdefinierten Header mit dem Online-Anmeldeformular, das wir in diesem Tutorial erstellen werden.

Und hier ist das Online-Anmeldeformular auf dem Bildschirm des Tablets und des Telefons.

Hier ist die Abmeldemeldung und der Link, die angezeigt werden, wenn Benutzer angemeldet sind.

Was Sie brauchen, um loszulegen

Wenn Sie es noch nicht getan haben, Installieren und aktivieren Sie das Divi-Thema . Das ist so ziemlich alles, was Sie brauchen, um loszulegen. Wir werden mit dem Divi Theme Builder ein neues Layout für Header-Vorlagen von Grund auf neu erstellen.

Hinzufügen eines neuen globalen Headers

Um dies zu erreichen, müssen wir einen neuen globalen Header für unsere Website erstellen. Gehen Sie dazu zum WordPress-Dashboard und gehen 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 Von Grund auf neu erstellen.

Entwerfen Sie den globalen Divi-Header mit einem Online-Anmeldeformular

Abschnitt Anpassung

Im globalen Header-Layout-Editor können Sie den benutzerdefinierten Header Ihrer Site vollständig erstellen. Öffnen Sie zunächst die regulären Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Hintergrundverlauf der linken Farbe:
• Rechter Hintergrundverlauf:
• Gradientenrichtung: 48 Grad
• Auffüllen: 10 Pixel oben, 10 Pixel unten, 20 Pixel links, 20 Pixel rechts

Um unseren benutzerdefinierten Header reaktionsschneller zu gestalten, fügen wir dem Hauptelement des Abschnitts das folgende benutzerdefinierte CSS hinzu.

display:flex;justify-content:center;align-items:center;

Hinzufügen eines Header-Logos zur ersten Zeile

Nachdem der Abschnitt fertig ist, können wir die erste Zeile hinzufügen.

Fügen Sie eine Zeile hinzu

Fügen Sie einer Spalte im Abschnitt eine Zeile hinzu.

Fügen Sie ein Bildmodul mit einem Logo hinzu

Fügen Sie in der einspaltigen Zeile ein Bildmodul hinzu. Hier fügen wir das Logo für die Kopfzeile hinzu.

Bild und Bildmodulrand aktualisieren

Aktualisieren Sie die Bildeinstellungen wie folgt:

• Bild: [Logo hinzufügen (ca. 64 x 64 Pixel)]

• Rand: 20px rechts

Zeilenparameter aktualisieren

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes, bevor Sie fortfahren:

• Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
• Dachrinnenbreite: 1
• Breite: 25%
• Zeilenausrichtung: links
• Auffüllen: 0px hoch, 0px niedrig

Hinzufügen des Online-Anmeldeformulars zur zweiten Zeile

Fügen Sie eine Zeile hinzu

Nachdem die erste Zeile fertig ist, werden Sie im Editor feststellen, dass die erste Zeile 25% des linken Abschnitts einnimmt. Dies ist im Grunde die vorgesehene Zeile für unser Header-Logo. Wir müssen eine Abschnittszeile für das Formular und das Online-Anmeldemenü auf der rechten Seite erstellen.

Fügen Sie einer Spalte im Abschnitt eine zweite Zeile mit Struktur hinzu.

Fügen Sie ein Anmeldeformular hinzu

Fügen Sie in der Zeile einer Spalte ein Anmeldemodul hinzu.

Standardinhalt entfernen

Löschen Sie unter den Anmeldeeinstellungen den gefälschten Titel und den Textinhalt.

Fügen Sie ein Anmeldeformular und eine benutzerdefinierte CSS-Klasse hinzu

Bevor wir zu weit mit dem Entwerfen des Online-Anmeldeformulars gehen, fügen wir zunächst die benutzerdefinierten CSS- und CSS-Klassen zum Anmeldemodul hinzu. Auf diese Weise können wir die grundlegende Online-Struktur des Formulars einrichten, bevor wir dem Formular mit den integrierten Optionen von Divi den endgültigen Design-Touch verleihen.

Fügen Sie auf der Registerkarte Erweitert die folgende CSS-Klasse hinzu:

• CSS-Klasse: Header-Login-Formular

Fügen Sie im Bereich CSS für die Verbindungsbeschreibung das folgende benutzerdefinierte CSS hinzu:

margin-bottom: 0px !important

Fügen Sie dann im CSS-Bereich des Anmeldeformulars das folgende benutzerdefinierte CSS hinzu:

width: 100%;

Fügen Sie dem Feld CSS für Verbindungsfelder das folgende benutzerdefinierte CSS hinzu:

padding: 5px 4% !important

Fügen Sie den Einstellungen für das Header-Layout benutzerdefiniertes CSS hinzu

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 Einstellung für das Header-Layout 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 bewirkt, dass die Anmeldefelder und die Schaltfläche inline (horizontal) angezeigt werden. Verbergen Sie den Link "Passwort vergessen?". »Und fügen Sie einen kleinen Rand zwischen den Feldern hinzu.

Leitungseinstellungen

Bevor Sie das Online-Anmeldeformular fertigstellen, aktualisieren Sie die Zeilenparameter wie folgt:

• Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
• Dachrinnenbreite: 1
• Linienausrichtung: gerade
• Auffüllen: 0px hoch, 0px niedrig

Designeinstellungen für das Anmeldeformular

Wir sind jetzt bereit, die Einstellungen für das Anmeldeformular zu aktualisieren. Öffnen Sie die Einstellungen des Anmeldeformularmoduls und aktualisieren Sie Folgendes:

• Hintergrundfarbe verwenden: NEIN

Feld- und Linktext

• Feldhintergrund: Farbe: rgba (255,255,255,0.2)
• Feldtextfarbe: #ffffff
• Feldpolizei: Lato
• Feldtextgröße: 14px
• Textausrichtung: rechts
• Link Schriftart: Lato
• Link-Schriftstil: Unterstrichen
• Linktextfarbe: # ff3190

Knopfdesign

• Schaltflächentextgröße: 15px
• Hintergrundfarbe der Schaltfläche: # ff3190
• Breite des Schaltflächenrandes: 0px
• Schaltflächenschrift: Lato
• Tastenauffüllung: 2 Pixel oben, 2 Pixel unten
• Rand: 15px niedrig
• Polsterung: 0px oben, 0px unten, 0px links, 0px rechts

Hinzufügen des Menüs zur zweiten Zeile

Menümodul

Mit unserem Online-Anmeldeformular können wir das Menü direkt darunter hinzufügen.

Fügen Sie unter dem Anmeldeformularmodul ein Menümodul hinzu.

Menü Moduleinstellungen

Aktualisieren Sie die Menüeinstellungen wie folgt:

• Hintergrundfarbe: rgba (0,0,0,0)
• Menüschrift: Lato
• Schriftgröße des Menüs: fett
• Menütextfarbe: #ffffff
• Menütextgröße: 16px
• Textausrichtung: rechts
• Hintergrundfarbe des Dropdown-Menüs: #ffffff
• Farbe der Linie im Dropdown-Menü: rgba (0,0,0,0)
• Textfarbe des Dropdown-Menüs: # 000000
• Hintergrundfarbe des mobilen Menüs: #ffffff
• Textfarbe des mobilen Menüs: # 000000
• Warenkorb Symbol Farbe: #ffffff
• Farbe des Suchsymbols: #ffffff
• Hamburger Menü Symbol Farbe: #ffffff

Speichern des Headers des Anmeldeformulars

Stellen Sie sicher, dass Sie das Layout speichern, bevor Sie den Header-Layout-Editor beenden.

Speichern Sie dann auch die Einstellungen des Themengenerators.

Endergebnisse

Das ist es!

Nun sehen wir uns das Endergebnis an. Um das Endergebnis zu sehen, besuchen Sie einfach eine Seite auf Ihrer Website.

Hier ist die Kopfzeile auf dem Desktop-Bildschirm.

Hier ist die Kopfzeile des Online-Anmeldeformulars auf dem Tablet-Bildschirm.

Und hier ist das Online-Anmeldeformular auf dem Telefonbildschirm. Beachten Sie auch das mobile Menü.

Und das sieht der Benutzer, wenn er angemeldet ist.

Abschließende Gedanken

Dieser personalisierte globale Header mit einem Online-Anmeldeformular ist auf jeden Fall für jede Mitgliederseite oder jeden Online-Shop nützlich. Mit nur ein wenig benutzerdefiniertem CSS konnten wir das Anmeldemodul von Divi in ​​ein stilvolles Online-Anmeldeformular umwandeln, das sich gut in die Kopfzeile jeder Website einfügt. Ich hoffe, Sie finden dies nützlich für Ihr nächstes Projekt.

Ich freue mich darauf, von Ihnen in den Kommentaren zu hören.

Ihrer Gesundheit zuliebe!