Sie müssen einen globalen Header mit erstellen Formular Verbindung in DIVI?
Die Schaffung eines Formular Login auf Ihrem Header kann ein großer Schub für sein die Benutzererfahrung.
Sie sind ideal für Abonnement-Websites und Online-Shops, da sie es Benutzern ermöglichen, sich jederzeit auf jeder Seite des anzumelden Webseite.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen entwerfen Formular Online-Anmeldung für Benutzer in einem benutzerdefinierten Header. Lass uns anfangen!
Übersicht
Hier ist die kurze Vorschau des benutzerdefinierten Headers mit dem Anmeldeformular, das wir in diesem Tutorial erstellen werden.
Hier ist die „Logout“-Meldung und der Link, der angezeigt wird, wenn Benutzer angemeldet sind.
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“.
Globales Header-Design von Divi mit einem horizontalen Anmeldeformular
Passen Sie den Abschnitt an
Mit dem Editor für das globale Header-Layout können Sie Ihren personalisierten Header erstellen Webseite Aus dem Nichts beginnen. Öffnen Sie zunächst die Einstellungen im normalen Abschnitt und aktualisieren Sie Folgendes:
- Verlaufsfarbe des linken Hintergrunds:
- Verlaufsfarbe des rechten Hintergrunds:
- Steigungsrichtung: 48 Grad
- Innenrand: 10 Pixel oben, 10 Pixel unten, 20 Pixel links, 20 Pixel rechts
Um unseren Header reaktionsschneller zu machen, fügen wir dem Hauptabschnittselement 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.
Zeile hinzufügen
Fügen Sie einer Spalte im Abschnitt eine Zeile hinzu.
Fügen Sie ein Bildmodul mit einem Logobild hinzu
Fügen Sie in der einspaltigen Zeile ein Bildmodul hinzu. Hier fügen wir das Header-Logo hinzu.
Bild und Bildmodulrand aktualisieren
Aktualisieren Sie die Bildeinstellungen wie folgt:
- Bild: [Logo hinzufügen (ca. 64 x 64 px)]
- Rand: 20px rechts
Aktualisieren Sie die Parameter der Linie
Bevor Sie fortfahren, öffnen Sie die Leitungseinstellungen und aktualisieren Sie Folgendes:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Spaltenabstand: 1
- Maximale Breite: 25%
- Ausrichtung: links
- Interner Rand: 0 Pixel oben, 0 Pixel unten
Horizontales Anmeldeformular zur zweiten Zeile hinzugefügt
Zeile hinzufügen
Nachdem die erste Reihe fertig ist, werden Sie im Editor feststellen, dass die erste Reihe 25 % des linken Abschnitts einnehmen wird. Dies ist im Grunde die Linie, die für unser Header-Logo bestimmt ist. Wir müssen eine Abschnittszeile für das Anmeldeformular und das Menü 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 innerhalb der einspaltigen Zeile ein „Connect“-Modul hinzu.
Standardinhalt entfernen
Entfernen Sie unter den Einstellungen des Anmeldemoduls den gefälschten Titel- und Textinhalt.
Benutzerdefinierte Klasse für Anmeldeformular und CSS hinzufügen
Bevor wir beim Entwerfen des Anmeldeformulars zu weit gehen, fügen wir zunächst die CSS-Klasse und benutzerdefiniertes CSS zum Anmeldemodul hinzu. Dadurch wird die grundlegende Online-Struktur des Formulars eingerichtet, bevor dem Design des Formulars mit den integrierten Optionen von Divi der letzte Schliff gegeben wird.
Siehe auch unseren Leitfaden auf So erstellen Sie ein verschiebbares und reaktionsschnelles Seitenmenü in DIVI
Fügen Sie auf der Registerkarte Erweitert die folgende CSS-Klasse hinzu:
- CSS-Klasse: Header-Login-Formular
Fügen Sie das folgende benutzerdefinierte CSS zum CSS-Feld für die Verbindungsbeschreibung hinzu:
margin-bottom: 0px !important
Fügen Sie dann im CSS-Bereich des Anmeldeformulars das folgende benutzerdefinierte CSS hinzu:
width: 100%;Fügen Sie das folgende benutzerdefinierte CSS zum CSS-Bereich für Anmeldefelder hinzu:
padding: 5px 4% !important
Fügen Sie benutzerdefiniertes CSS zu den Header-Layout-Einstellungen 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.
Lesen Sie auch unser Tutorial auf So erstellen Sie die Blog-Seite mit dem Blog-Modul mit DIVI
Ö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 bewirkt, dass die Anmeldefelder und die Schaltfläche inline (horizontal) angezeigt werden, die Meldung "Passwort vergessen?" wird ausgeblendet und ein kleiner Rand zwischen den Feldern wird hinzugefügt.
Leitungseinstellungen
Bevor wir dem Anmeldeformular den letzten Schliff geben, aktualisieren wir die Zeilenparameter wie folgt:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Spaltenabstand: 1
- Ausrichtung: Richtig
- Interner Rand: 0 Pixel oben, 0 Pixel unten
Designeinstellungen für das Anmeldeformular
Wir sind jetzt bereit, die Anmeldeformulareinstellungen zu aktualisieren. Öffnen Sie die Einstellungen des Connect-Moduls und aktualisieren Sie Folgendes:
- Hintergrundfarbe verwenden: NEIN
Feld- und Linktext
- Hintergrundfarbenfelder: rgba(255,255,255,0.2)
- Textfarbfelder: #ffffff
- Felder Schriftart: Lato
- Textgrößenfelder: 14px
- Textausrichtung: rechts
Knopfdesign
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: NEIN
- Schaltflächentextgröße: 15px
- Hintergrundschaltfläche: #ff3190
- Schaltfläche Rahmenbreite: 0 Pixel
- Schaltflächenschriftart: Lato
- Rand-Schaltfläche: 2 Pixel oben, 2 Pixel unten
- Polsterungsschaltfläche: 15 Pixel unten
- Innenrand: 0 Pixel oben, 0 Pixel unten, 0 Pixel links, 0 Pixel rechts
Hinzufügen des Menüs zur zweiten Zeile
Menümodul
Mit unserem Anmeldeformular können wir das Menü direkt darunter hinzufügen.
Fügen Sie ein Menümodul unter dem Anmeldemodul hinzu.
Menü Moduleinstellungen
Aktualisieren Sie die Menüeinstellungen wie folgt:
- Hintergrund: rgba(0,0,0,0)
- Schriftmenü: Lato
- Softlight-Menü: Fett
- Menütextfarbe: #ffffff
- Menütextgröße: 16px
- Textausrichtung: rechts
- Hintergrundfarbe des Dropdown-Menüs: #ffffff
- Dropdown-Zeilenfarbe: 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 des Headers des Anmeldeformulars
Achten Sie darauf, das Layout zu speichern, bevor Sie den Header-Editor verlassen.
Als nächstes speichern Sie auch die Theme Builder-Einstellungen.
Endergebnisse
Es ist vollbracht !
Sehen wir uns nun das Endergebnis an. Um das Endergebnis zu sehen, müssen Sie lediglich eine Seite Ihrer Website besuchen.
Und das sieht der Benutzer, wenn er angemeldet ist.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Dieser benutzerdefinierte globale Header mit einem Anmeldeformular wird sich definitiv für jede Abonnement-Website oder jeden Online-Shop als nützlich erweisen.
Mit nur ein wenig benutzerdefiniertem CSS konnten wir das Anmeldemodul von Divi in ein elegantes Anmeldeformular umwandeln, das perfekt in die Kopfzeile jeder Website passt.
Ich hoffe, dies wird für Ihr nächstes Projekt nützlich sein. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
