So erstellen Sie ein Popup-Anmeldeformular mit Anmelde-/Abmeldeschaltflächen in Divi

Das Erstellen eines Popup-Anmeldeformulars in Divi kann eine effektive Möglichkeit sein, das Design und die Benutzererfahrung beim An- und Abmelden Ihrer Site zu verbessern. Die Idee ist, ein Anmeldeformular zu erstellen, das in einem Popup-Fenster angezeigt wird, wenn der Benutzer auf eine Anmeldeschaltfläche in der Kopfzeile der Seite klickt. Dies ist bequemer, als den Benutzer auf eine benutzerdefinierte Anmeldeseite umzuleiten. Außerdem ermöglicht es Webentwicklern, ein benutzerdefiniertes Design des Anmeldeformulars (zumindest im ersten Frontend) zu erstellen, das eine erfrischende Alternative zum herkömmlichen WordPress-Anmeldeerlebnis sein kann.

In diesem Tutorial erstellen wir ein Popup-Anmeldeformular mit benutzerdefinierten Anmelde- und Abmeldeschaltflächen in Divi. Mit dem Divi-Login-Modul und einigen Schaltflächenmodulen erstellen wir ein nahtloses Popup-Login-Erlebnis am Frontend, indem wir Benutzern ermöglichen, sich an- und abzumelden, ohne auf eine andere Seite umgeleitet zu werden.

Zugegeben, diese Lösung ist auf das Design des Front-End-Anmeldeformulars beschränkt, was bedeutet, dass alle auftretenden Fehler (oder wenn der Benutzer ein Passwort zurücksetzen muss) auf das traditionelle WordPress-Anmeldeformular/Seitendesign unter „wp-login“ umgeleitet werden .php“. Für diejenigen, die jedoch ein benutzerdefiniertes Login-Design im Frontend suchen, ohne ein Plugin verwenden zu müssen, ist dies möglicherweise die Lösung für Sie.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Beachten Sie, wie sich die Anmeldeschaltfläche bzw. die Abmeldeschaltfläche ändert. Und sobald sich der Benutzer anmeldet, bleibt er auf der aktuellen Seite. Außerdem zeigt das Popup-Anmeldeformular unterschiedliche „Warn“-Inhalte an, wenn der Benutzer versucht, sich abzumelden.

Laden Sie die Vorlage KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie zuerst die Datei ü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 „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

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.

HERUNTERLADEN

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!

So laden Sie die KOSTENLOSE Vorlage hoch

Um die Vorlage hochzuladen, navigieren Sie zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Dann sehen Sie in der oberen rechten Ecke ein Symbol mit zwei Pfeilen. Klicken Sie auf das Symbol.

Navigieren Sie zum Import-Tab, laden Sie die JSON-Datei hoch, die Sie in diesem Beitrag herunterladen konnten, und klicken Sie auf 'Divi Theme Builder-Vorlagen importieren'.

Nachdem Sie die Datei hochgeladen haben, werden Sie eine neue globale Kopf- und Fußzeile in Ihrer Standard-Website-Vorlage bemerken. Speichern Sie die Änderungen im Divi Theme Builder, sobald die Vorlage aktiviert werden soll.

Um die Elemente der Kopfzeilenvorlage zu ändern, öffnen Sie zunächst die Vorlage.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Obwohl Sie dieses Popup-Anmeldeformular und benutzerdefinierte Anmelde-/Abmeldeschaltflächen zu jedem benutzerdefinierten Header hinzufügen können, werden wir einen vorgefertigten Header verwenden, um den Vorgang zu beschleunigen und einen Startschuss für das Design zu geben.

Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.

Crowdfunding-Header-Vorlage in Theme Builder importieren

Laden Sie zunächst die kostenlose Kopf- und Fußzeile für das Crowdfunding-Layout-Paket von Divi herunter. Rufen Sie dazu den Blogbeitrag auf.

Geben Sie dann Ihre E-Mail-Adresse ein, um die ZIP-Datei herunterzuladen.

Entpacken Sie anschließend die Datei, damit sie importiert werden kann.

Führen Sie die folgenden Schritte aus, um die Datei in den Theme Builder zu importieren:

1. Navigieren Sie zu Divi > Theme Builder.
2. Klicken Sie auf das Portabilitätssymbol.
3. Wählen Sie im Popup-Fenster Portabilität die Registerkarte Import aus.
4. Wählen Sie die zuvor heruntergeladene entpackte Datei zum Importieren aus.
5. Klicken Sie auf die Schaltfläche Importieren.
6. Klicken Sie auf das Bearbeitungssymbol, um die importierte Kopfzeile zu bearbeiten.

Erstellen des Popup-Anmeldeformulars mit benutzerdefinierten Anmelde-/Abmeldeschaltflächen in Divi

Teil 1: Erstellen der Anmelde- und Abmeldeschaltflächen

Öffnen Sie im Editor für globales Kopfzeilenlayout die Ebenenansicht, damit Sie alle Elemente leicht sehen können.

Löschen Sie in der oberen Zeile des Kopfbereichs das Social Media Follow-Modul neben dem Login-Button in Spalte 3.

Erstellen des Login-Buttons

Um unseren Login-Button zu erstellen, öffnen Sie die Einstellungen für das Button-Modul in Spalte 3 der obersten Zeile.

Aktualisieren Sie Folgendes auf der Registerkarte "Design":

• Schaltflächensymbol: Schlosssymbol (siehe Screenshot)
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN
• Polsterung: 0.5em oben, 0.5em unten, 2em links, 0.7em rechts

Geben Sie auf der Registerkarte Erweitert der Schaltfläche zwei benutzerdefinierte CSS-Klassen wie folgt:

• CSS-Klasse: et-toggle-popup et-popup-login-button

Erstellen des Logout-Buttons

Um unseren Logout-Button zu erstellen, duplizieren Sie den bestehenden Login-Button in Spalte 3.

Um die beiden Schaltflächen besser unterscheiden zu können, können Sie die Beschriftung der einzelnen Schaltflächen aktualisieren. Öffnen Sie dann die Einstellungen für das duplizierte Tastenmodul in Spalte3.

Ändern Sie den Schaltflächentext in „Abmelden“.

Aktualisieren Sie Folgendes auf der Registerkarte "Design":

• Schaltflächensymbol: Entsperrsymbol (siehe Screenshot)

Aktualisieren Sie auf der Registerkarte Erweitert die Schaltfläche CSS-Klassen wie folgt:

• CSS-Klasse: et-toggle-popup et-popup-logout-button

Die erste Klasse bleibt gleich, die zweite Klasse wird anders sein.

Teil 2: Erstellen des Popup-Bereichs

Sobald die Schaltflächen fertig sind, können wir den Popup-Bereich erstellen, der als unser Popup mit den Anmeldeformularen dient.

Fügen Sie unter dem Header-Abschnitt einen neuen regulären Abschnitt hinzu.

Fügen Sie dann eine einspaltige Zeile innerhalb des Abschnitts ein.

Abschnittseinstellungen

Öffnen Sie vor dem Aktualisieren der Zeile die Abschnittseinstellungen.

Geben Sie dem Abschnitt auf der Registerkarte Inhalt eine weiße Hintergrundfarbe:

• Hintergrundfarbe: #ffffff

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Breite: 100%
• Max. Breite: 800px (Desktop), 80 % (Tablet), 100 % (Telefon)
• Abschnittsausrichtung: Mitte
• Höhe: automatisch (Desktop und Tablet), 100 % (Telefon)
• Maximale Höhe: 100%
• Padding: 0px oben, 0px unten

• Abgerundete Ecken: 10px
• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 100px
• Stärke der Box-Schattenausbreitung: 50px

Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:

Fügen Sie eine benutzerdefinierte CSS-Klasse hinzu.

• CSS-Klasse: et-popup-login

Fügen Sie dem Hauptelement ein benutzerdefiniertes CSS-Snippet hinzu:

overscroll-behavior: contain;

Aktualisieren Sie die Optionen Sichtbarkeit und Position.

• Horizontaler Überlauf: versteckt
• Vertikaler Überlauf: auto
• Position: Behoben
• Ort: Zentrum Zentrum
• Z-Index: 999999

Zeileneinstellungen

Sobald die Abschnittseinstellungen vorhanden sind, öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie die folgenden Designeinstellungen:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Polsterung: 0px oben, 5vh unten

Teil 3: Erstellen des Schließen-Popup-Symbols

Um das Popup-Symbol schließen zu erstellen, mit dem das Popup beim Klicken geschlossen / ausgeblendet wird, verwenden wir ein Klappenmodul.

Fügen Sie der Zeile ein neues Klappenmodul hinzu.

Öffnen Sie die Einstellung für das Klappenmodul und löschen Sie den Titel und den Textkörper.

Fügen Sie dann das Symbol wie folgt hinzu:

• Symbol verwenden: JA
• Symbol: „x“-Symbol (siehe Screenshot)

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #004e43
• Bild-/Symbolausrichtung: Zentriert
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 50px
• Breite: 50px
• Modulausrichtung: Rechts
• Höhe: 50px

Fügen Sie auf der Registerkarte Erweitert wie folgt eine CSS-Klasse zum Klappentext hinzu:

• CSS-Klasse: et-toggle-popup

Teil 4: Erstellen der Anmeldeformulare „Abgemeldet“ und „Angemeldet“

Um das Login-Formular beim An- und Abmelden inhaltlich und gestalterisch unterschiedlich zu gestalten, werden wir zwei unterschiedliche Login-Formular-Module erstellen. Das erste ist das Anmeldeformular, das angezeigt wird, wenn der Benutzer „abgemeldet“ ist. Das zweite ist das Anmeldeformular, das angezeigt wird, wenn der Benutzer „angemeldet“ ist.

Erstellen des Formulars „Abgemeldet“

Um das Anmeldeformular „Abgemeldet“ zu erstellen, fügen Sie ein neues Anmeldeformularmodul unter dem Klappenmodulsymbol in der Zeile hinzu.

Öffnen Sie die Einstellungen des Anmeldemoduls und aktualisieren Sie Folgendes:

Registerkarte Inhalt

• Zur aktuellen Seite umleiten: JA
• Hintergrundfarbe verwenden: NEIN

Registerkarte „Design“

• Feldhintergrundfarbe: rgba(0,78,67,0.05)
• Felder Fokus Hintergrundfarbe: rgba(0,78,67,0.15)
• Textausrichtung: Mitte
• Textfarbe: Dunkel

• Titelschriftart: Poppins
• Schriftstärke des Titels: Semi Bold
• Titeltextfarbe: #000000
• Höhe der Titelzeile: 1,3 em
• Körperschriftart: Work Sans

Um die Schaltflächenstile zu aktualisieren, kopieren Sie die Schaltflächenstile der Anmeldeschaltfläche, die wir in der dritten Spalte der Zeile im Abschnitt Kopfzeile erstellt haben.

Fügen Sie dann die Schaltflächenstile in die Schaltflächenoptionsgruppe in den Anmeldeeinstellungen auf der Registerkarte Design ein.

Aktualisieren Sie dann die Schaltflächenstile für das Anmeldeformular wie folgt:

• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #004e43
• Hintergrundfarbe der Schaltfläche (Hover): #00683c
• Breite des Tastenrahmens: 0px
• Tastenpolsterung: 15px oben, 15px unten

Aktualisieren Sie dann die Größenoptionen wie folgt:

• Breite: 100%
• Max. Breite: 80 % (Desktop), 90 % (Tablet), 95 % (Telefon)
• Modulausrichtung: Mitte

Registerkarte „Erweitert“

Aktualisieren Sie auf der Registerkarte "Erweitert" die CSS-Klasse und das benutzerdefinierte CSS wie folgt:

• CSS-Klasse: et-logged-out-form

Benutzerdefiniertes CSS für die Anmeldebeschreibung:

width: 100% !important;
float: none !important;

Benutzerdefiniertes CSS für das Anmeldeformular:

width: 100% !important;
padding: 0px !important;

Dadurch wird sichergestellt, dass das Anmeldeformularmodul auch auf dem Desktop die volle Breite der Zeile/Spalte umfasst.

Erstellen des Formulars „Angemeldet“

Nachdem die Version des Formulars „Abgemeldet“ nun vollständig ist, müssen wir die Version „Angemeldet“ erstellen, die unterschiedliche Inhalte und Formate hat, um die Benutzererfahrung zu maximieren.

Um das Anmeldeformular „Abgemeldet“ zu erstellen, duplizieren Sie das vorhandene Anmeldeformular.

Aktualisieren Sie dann das Label für jedes der Anmeldeformulare.

Öffnen Sie die Einstellungen für das Duplikat (das Formular „Angemeldet“) und fügen Sie den Site-Titel als dynamischen Inhalt zum Titel des Anmeldeformularmoduls hinzu.

Öffnen Sie als Nächstes die Einstellungen für den dynamischen Inhalt des Site-Titels und aktualisieren Sie den Vorher- und Nachher-Inhalt wie folgt:

• Vorher: „Sie versuchen sich abzumelden“
• Nach: ". “

Dadurch wird eine nette dynamische Benachrichtigung für Benutzer erstellt, die versuchen, sich von der Site abzumelden.

Fügen Sie dann dem Text die folgende H3-Überschrift hinzu:

<h3>Are you sure?</h3>

Wenn Sie jemals den Inhalt des Anmeldeformularmoduls gesehen haben, wenn Sie sich angemeldet haben, wissen Sie, dass es eine benutzerdefinierte Nachricht gibt, die einen benutzerdefinierten Link zum Abmelden enthält. Um diesen Link so zu gestalten, dass er wie eine Schaltfläche aussieht, müssen wir die Schriftart-/Texteinstellungen für den Textkörper wie folgt anpassen:

• Wählen Sie die Registerkarte Link unter Textkörperoptionen aus.
• Link-Schriftart: Work Sans
• Link-Schriftstärke: Halbfett
• Link-Schriftart: TT
• Linktextausrichtung: Mitte
• Linktextfarbe: #ffffff

HINWEIS: Sie können diese Ergebnisse erst in der Vorschau anzeigen, wenn Sie das Formular auf einer Live-Seite anzeigen.

Aktualisieren Sie auf der Registerkarte Erweitert die CSS-Klasse und das benutzerdefinierte CSS wie folgt:

• CSS-Klasse: et-logged-in-form

Benutzerdefiniertes CSS für das Anmeldeformular:

display:none;

Teil 5: Hinzufügen des benutzerdefinierten Codes

Um das benutzerdefinierte CSS und die JQuery hinzuzufügen, die für die Funktionalität des Popup-Anmeldeformulars erforderlich sind, erstellen Sie ein neues Codemodul unter dem letzten Anmeldeformularmodul.

Das CSS

Öffnen Sie die Codemoduleinstellungen und fügen Sie das folgende CSS in das Codefeld ein. Stellen Sie dabei sicher, dass das CSS in die erforderlichen Style- Tags eingeschlossen ist.

/* hide popup section */
.et-popup-login {
  display: none;
}

/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}

/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}

/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}

/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}

/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}

/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}

/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}

/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Beachten Sie, dass das CSS die in WordPress integrierte Klasse „angemeldet“ verwendet, um die entsprechenden Anmelde-/Abmeldeschaltflächen und Anmeldeformulare für „angemeldet“/„abgemeldet“ zu verbergen/ anzuzeigen, wenn der Benutzer angemeldet ist, oder abgemeldet.

Die JQuery

Fügen Sie unter dem endenden style-Tag die folgende JQuery ein und stellen Sie sicher, dass der Code in die erforderlichen script- Tags eingeschlossen ist.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Dieses Snippet schaltet einfach den Popup-Bereich um, wenn der Benutzer auf eines der drei Elemente mit der Klasse „et-toggle-popup“ klickt (die Anmelde- und Abmeldeschaltflächen plus das „x“-Symbol).

Das ist es!

Vergessen Sie nicht, die an der Vorlage vorgenommenen Änderungen im Theme Builder zu speichern. Nach dem Speichern können Sie die Ergebnisse auf einer Live-Seite anzeigen.

Endergebnis

Hier sind die endgültigen Ergebnisse auf Desktop, Tablet und Telefon.

Beachten Sie, wie sich die Anmeldeschaltfläche und die Abmeldeschaltfläche ändern. Und sobald sich der Benutzer anmeldet, bleibt der Benutzer auf der aktuellen Seite. Außerdem zeigt das Popup-Anmeldeformular unterschiedliche „Warn“-Inhalte an, wenn der Benutzer versucht, sich abzumelden.

Abschließende Gedanken

Hoffentlich gibt Ihnen das Erstellen dieses Popup-Anmeldeformulars und der benutzerdefinierten Anmelde-/Abmeldeschaltflächen einen Einblick in die kreative Verwendung des Anmeldeformulars von Divi. Fühlen Sie sich frei, das Design und den Inhalt jedes Anmeldeformulars (oder jeder Schaltflächen) anzupassen, um ein einzigartiges Anmeldeerlebnis auf Ihrer eigenen Website zu schaffen.

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

Danke schön!