Die Schaffung eines Formular Die Inline-Anmeldung für Ihren Header kann die Benutzererfahrung enorm verbessern. Sie eignen sich perfekt für Mitgliederseiten und Online-Shops, da sie es Benutzern ermöglichen, sich jederzeit und auf jeder Seite der Website anzumelden.
In diesem Tutorial zeigen wir Ihnen, wie Sie a entwerfen Formular online mit einem benutzerdefinierten Header im Divi Theme Builder. Dazu erstellen wir einen einfachen responsiven globalen Header und entwerfen dann einen Formular Kompaktes Online-Login oben rechts in der Kopfzeile mit dem Login-Modul von Divi. Der Build erfordert ein wenig benutzerdefinierten CSS-Code, aber sobald alles vorhanden ist, lässt sich das Online-Anmeldeformular mithilfe der Designoptionen der integrierten Dienste von Divi problemlos an jedes Header-Design anpassen.
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 die Dinge in Gang zu bringen, müssen wir einen neuen globalen Header für unsere erstellen Website. Gehen Sie dazu zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder.
Auf dem Website-Vorlage Klicken Sie standardmäßig 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!
Sehen wir uns nun das Endergebnis an. Um das Endergebnis zu sehen, besuchen Sie einfach eine Seite von Ihnen 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 benutzerdefinierte globale Header mit einem Online-Anmeldeformular wird auf jeden Fall für jede Mitgliederseite oder jeden Online-Shop nützlich sein. Mit nur ein wenig benutzerdefiniertem CSS konnten wir das Anmeldemodul von Divi in ein elegantes Online-Anmeldeformular umwandeln, das in der Kopfzeile jedes Formulars gut aussieht Website. Ich hoffe, dass dies für Ihr nächstes Projekt hilfreich ist.
Ich freue mich darauf, von Ihnen in den Kommentaren zu hören.
Ihrer Gesundheit zuliebe!
