Springe zum Hauptinhalt

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

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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.

Divi Verbindungsformular

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.

Online-Anmeldeformular

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".

Schaffung von Head Global Divi

Wählen Sie dann die Option Von Grund auf neu erstellen.

Von Grund auf neu bauen

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
Anpassen in Kopf divi

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;

Fügen Sie CSS-Divi-Code hinzu

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 eine Divi-Header-Spalte 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Fügen Sie ein Divi-Modul-Image hinzu

Bild und Bildmodulrand aktualisieren

Aktualisieren Sie die Bildeinstellungen wie folgt:

  • Bild: [Logo hinzufügen (ca. 64 x 64 Pixel)]
Passen Sie das Bild und seinen Teilungsrand an
  • Rand: 20px rechts
Ändern Sie den rechten Rand

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
Ändern Sie die Divi-Line-Parameter

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 am Kopf eine neue Divi-Spalte hinzu

Fügen Sie ein Anmeldeformular hinzu

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

Fügen Sie ein Divi-Anmeldeformular hinzu

Standardinhalt entfernen

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

Standardinhalt entfernen

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:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

padding: 5px 4% !important

Passen Sie den Divisionscode an

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.

Passen Sie das Divi-Formular an

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
Verwenden Sie spezielle Ränder

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
Verwenden Sie Hintergrundfarbe Divi
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
Passen Sie das Anmeldeformular für das Farbmodul an
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
Online-Anmeldeformular

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.

Fügen Sie ein Divi-Menümodul ein

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.

Divi Kopfverschlussknopf

Speichern Sie dann auch die Einstellungen des Themengenerators.

Speichern Sie den Divi-Erstellungsheader für Änderungen

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.

Endergebnismenü mit Divi-Verbindungsforum

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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Online-Anmeldeformular

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

Und das sieht der Benutzer, wenn er angemeldet ist.

Was ist sichtbar, wenn der Benutzer in divi 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!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren