Möchten Sie eine erstellen Formular Popup-Anmeldung in Divi mit Anmelde- / Abmeldeschaltflächen?
Die Schaffung eines Formular Login-Popup ein Divi kann ein effektiver Weg sein, das Design Ihrer Website und die Benutzererfahrung beim Anmelden/Abmelden zu verbessern.
Die Idee ist, eine zu erstellen Formular Login, das jedes Mal in einem Popup angezeigt wird, wenn der Benutzer auf eine Login-Schaltfläche im Seitenkopf klickt.
Dies ist bequemer, als den Benutzer auf eine benutzerdefinierte Anmeldeseite umzuleiten.
In diesem Tutorial erstellen wir ein Popup-Anmeldeformular mit benutzerdefinierten Anmelde- und Abmeldeschaltflächen in Divi.
Mit dem Divi Login-Modul und einigen Button-Modulen erstellen wir ein nahtloses Popup-Anmeldeerlebnis am Frontend, indem wir Benutzern das An- und Abmelden ermöglichen, ohne auf eine andere Seite umgeleitet zu werden.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Beachten Sie, wie sich die Anmeldeschaltfläche und die Abmeldeschaltfläche entsprechend ändern. Und sobald sich der Benutzer anmeldet, bleibt er auf der aktuellen Seite.
Darüber hinaus zeigt das Popup-Anmeldeformular jedes Mal, wenn der Benutzer versucht, sich abzumelden, unterschiedliche „Warn“-Inhalte an.
Was Sie brauchen, um loszulegen
Während Sie dieses Popup-Anmeldeformular und benutzerdefinierte Anmelde-/Abmeldeschaltflächen zu jeder benutzerdefinierten Kopfzeile hinzufügen können, verwenden wir eine vorgefertigte Kopfzeile, um den Vorgang zu beschleunigen und das Design schnell in Gang zu bringen.
Importieren Sie die Kopfzeilenvorlage „Crowdfunding Layout Pack“ in den Divi Builder
Um zu beginnen, laden Sie herunter Divi Crowdfunding Layout Pack Kopf- und Fußzeile kostenlos . Gehen Sie dazu zu der Blogbeitrag .
Geben Sie dann Ihre E-Mail-Adresse ein, um die ZIP-Datei herunterzuladen.
Danach entpacken Sie die Datei, damit sie importiert werden kann.
Gehen Sie folgendermaßen vor, um die Datei in den Design-Editor zu importieren:
- Gehen Sie zu Divi > Theme Builder.
- Klicken Sie auf das Portabilitätssymbol.
- Wählen Sie im Popup-Fenster Portabilität die Registerkarte Import aus.
- Wählen Sie die zuvor heruntergeladene entpackte Datei zum Importieren aus.
- Cliquer sur Importieren Sie den Divi Theme Builder Template.
- Klicken Sie auf das Bearbeitungssymbol, um die importierte Kopfzeile zu bearbeiten.
Erstellen des Popup-Anmeldeformulars in Divi
Teil 1: An- und Abmeldeschaltflächen erstellen
Öffnen Sie im Global Header Layout Editor die Ebenenansicht damit Sie alle Elemente leicht sehen können.
Löschen Sie in der obersten Zeile des Kopfzeilenbereichs das Modul Social Media folgen neben der Login-Schaltfläche in Spalte 3.
Lesen Sie auch: Divi: Vergleich der verschiedenen Gradientenarten
Login-Button erstellen
Um unseren Login-Button zu erstellen, öffnen Sie die Button-Modul-Einstellungen in Spalte 3 der obersten Zeile.
Aktualisieren Sie die folgenden Elemente auf der Registerkarte Design:
- Schaltflächensymbol: Schlosssymbol (siehe Screenshot)
- Platzierung des Schaltflächensymbols: Rechts
- Symbol nur beim Hover für Schaltfläche anzeigen: NEIN
- Polsterung: 0,5 cm (oben und unten), 2 cm (links), 0,7 cm (rechts)
Unter der Registerkarte Fortgeschrittener, weisen Sie der Schaltfläche wie folgt zwei benutzerdefinierte CSS-Klassen zu:
- CSS-Klasse: et-toggle-popup et-popup-login-button
Erstellung des Logout-Buttons
Um unsere Abmeldeschaltfläche zu erstellen, duplizieren Sie die vorhandene Anmeldeschaltfläche in Spalte 3.
Um die Unterscheidung der beiden Schaltflächen zu erleichtern, können Sie jeweils die Beschriftung aktualisieren. Öffnen Sie als Nächstes die Einstellungen des Duplicate Button-Moduls in Spalte 3.
Ändern Sie den Text der Schaltfläche in "Abmelden".
Aktualisieren Sie die folgenden Elemente auf der Registerkarte Design:
- Schaltflächensymbol: Symbol zum Entsperren (siehe Screenshot)
Unter der Registerkarte Fortgeschrittener, aktualisieren Sie die Schaltfläche CSS-Klassen wie folgt:
- CSS-Klasse: et-toggle-popup et-popup-logout-button
Die erste Klasse bleibt gleich, aber 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 dienen wird Formen Verbindung.
Fügen Sie unterhalb des Kopfzeilenabschnitts 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 Bereichseinstellungen.
Unter der Registerkarte Inhalt, geben Sie dem Abschnitt eine weiße Hintergrundfarbe:
- Hintergrund: #ffffff
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Breite: 100 %
- Maximale Breite: 800 Pixel (Desktop), 80 % (Tablet), 100 % (Telefon)
- Abschnittsausrichtung: Mitte
- Höhe: automatisch (Desktop und Tablet), 100 % (Telefon)
- Maximale Höhe: 100 %
- Polsterung: 0px (oben und unten)
- Abgerundete Ecken: 10px
- Box Shadow: siehe Screenshot
- Vertikale Position des Kastenschattens: 0px
- Unschärfestärke: 100 Pixel
- Verbreitungsstärke: 50px
Unter der Registerkarte Fortgeschrittener, aktualisieren Sie 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 Sichtbarkeits- und Positionsoptionen.
- Horizontaler Überlauf: Ausgeblendet
- Vertikaler Überlauf: auto
- Position: Fest
- Ort: Mitte Mitte
- Z-Index: 999999
Leitungseinstellungen
Wenn die Abschnittseinstellungen vorhanden sind, öffnen Sie die Linieneinstellungen und aktualisieren Sie die folgenden Designeinstellungen:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 100 %
- Maximale Breite: 100 %
- Polsterung: 0px (oben), 5vh (unten)
Teil 3: Erstellen des Schließen-Popup-Symbols
Um das Popup-Schließsymbol zu erstellen, das das Popup beim Klicken schließt/ausblendet, verwenden wir ein Blurb-Modul.
Fügen Sie der Zeile ein neues Blurb-Modul hinzu.
Öffnen Sie die Moduleinstellung und löschen Sie Titel und Textkörper.
Fügen Sie dann das Symbol wie folgt hinzu:
- Symbol verwenden: JA
- Symbol: "x"-Symbol (siehe Screenshot)
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Symbolfarbe: #004e43
- Bild-/Icon-Ausrichtung: zentriert
- Symbolschriftgröße verwenden: JA
- Symbolschriftgröße: 50px
- Breite: 50px
- Ausrichtungsmodul: rechts
- Höhe: 50px
Unter der Registerkarte Fortgeschrittener, fügen Sie dem Blurb-Modul wie folgt eine CSS-Klasse hinzu:
- CSS-Klasse: et-toggle-popup
Teil 4: Erstellen der Anmeldeformulare „Angemeldet“ und „Abgemeldet“.
Um beim Login und Logout unterschiedliche Inhalte und Designs für das Login-Formular zu haben, werden wir zwei unterschiedliche Login-Formular-Module erstellen.
Das erste ist das Anmeldeformular, das jedes Mal angezeigt wird, wenn der Benutzer „abgemeldet“ wird. Das zweite ist das Anmeldeformular, das jedes Mal angezeigt wird, wenn der Benutzer „eingeloggt“ wird.
Erstellung des Formulars „Abgemeldet“.
Um das Anmeldeformular „Abgemeldet“ zu erstellen, fügen Sie ein neues Anmeldemodul unter dem Blurb-Modulsymbol in der Zeile hinzu.
Öffnen Sie die Moduleinstellungen und ändern Sie die folgenden Einstellungen:
Registerkarte Inhalt
- Zur aktuellen Seite umleiten: JA
- Hintergrundfarbe verwenden: NEIN
Registerkarte Entwurf
- Felder Hintergrundfarbe: rgba(0,78,67,0.05)
- Hintergrundfarbe des Feldfokus: rgba (0,78,67,0,15)
- Textausrichtung: Zentriert
- Textfarbe: Dunkel
- Titelschriftart: Poppins
- Schriftstärke des Titels: halbfett
- Textfarbe: #000000
- Titelzeilenhöhe: 1,3 em
- Körperschrift: Work Sans
Um die Schaltflächenstile zu aktualisieren, kopieren Sie die Schaltflächenstile von der Anmeldeschaltfläche, die wir erstellt haben, in die dritte Spalte in der Zeile des Abschnitts „Kopfzeile“.
Fügen Sie dann die Schaltflächenstile in die Gruppe Schaltflächenoptionen in den Verbindungseinstellungen auf der Registerkarte Design ein.
Aktualisieren Sie als Nächstes die Schaltflächenstile für das Anmeldeformular wie folgt:
- Taste
- Textfarbe: #ffffff
- Hintergrund: #004e43
- Hintergrund (Hover): #00683c
- Randbreite: 0 Pixel
- Polsterung: 15px (oben und unten)
Aktualisieren Sie als Nächstes die Größenoptionen wie folgt:
- Breite: 100 %
- Maximale Breite: 80 % (Desktop), 90 % (Tablet), 95 % (Telefon)
- Ausrichtungsmodul: Mitte
Registerkarte Erweitert
Unter der Registerkarte Fortgeschrittener, aktualisieren Sie die CSS-Klasse und das benutzerdefinierte CSS wie folgt:
- CSS-Klasse: et-logged-out-form
Benutzerdefiniertes CSS für Verbindungsbeschreibung:
width: 100% !important;
float: none !important;Benutzerdefiniertes CSS für das Anmeldeformular:
width: 100% !important;
padding: 0px !important;Dadurch wird sichergestellt, dass das Login-Modul auch auf dem Desktop die volle Zeilen-/Spaltenbreite umfasst.
Erstellung des „Angemeldet“-Formulars
Nachdem die „Abgemeldet“-Version des Formulars vollständig ist, müssen wir die „Angemeldet“-Version erstellen, die einen anderen Inhalt und ein anderes Design haben wird, um die Benutzererfahrung zu maximieren.
Um das Anmeldeformular „Abgemeldet“ zu erstellen, duplizieren Sie das vorhandene Anmeldeformular.
Aktualisieren Sie als Nächstes die Bezeichnung für jeden der Formen Verbindung bzw.
Öffnen Sie die doppelten Einstellungen (das „Angemeldet“-Formular) und fügen Sie den Seitentitel als dynamischen Inhalt zum Titel des Anmeldeformularmoduls hinzu.
Öffnen Sie dann die dynamischen Inhaltseinstellungen des Seitentitels und aktualisieren Sie den Vorher- und Nachher-Inhalt wie folgt:
- Vorher: „Sie versuchen, sich von Elegant Themes abzumelden“
- Nach: ". "
Dadurch wird eine nette dynamische Benachrichtigung für Benutzer erstellt, die versuchen, sich von der Website abzumelden.
Fügen Sie dann den folgenden H3-Header zum Text hinzu:
<h3>Are you sure?</h3>
Wenn Sie jemals den Inhalt des Anmeldemoduls gesehen haben, als Sie angemeldet waren, wissen Sie, dass es eine personalisierte Nachricht gibt, die einen personalisierten „Abmelden“-Link enthält. Damit dieser Link wie eine Schaltfläche aussieht, müssen wir die Schriftart-/Texteinstellungen des Body-Links wie folgt anpassen:
- Wählen Sie die Registerkarte Link unter Option Hauptteil.
- Link-Schriftart: Work Sans
- Link-Schriftstärke: Semi Bold
- Schriftstil: TT
- Linktextausrichtung: zentriert
- Linktextfarbe: #ffffff
HINWEIS: Sie können diese Ergebnisse erst in der Vorschau anzeigen, wenn Sie das Formular auf einer Live-Seite anzeigen.
Unter der Registerkarte Fortgeschrittener, aktualisieren Sie 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: Fügen Sie benutzerdefinierten Code hinzu
Um das benutzerdefinierte CSS und JQuery hinzuzufügen, die für die Funktionalität des Popup-Anmeldeformulars benötigt werden, erstellen Sie ein neues Codemodul unter dem letzten Anmeldemodul.
CSS
Öffnen Sie die Einstellungen des Codemoduls und fügen Sie das folgende CSS in das Codefeld ein. Achten Sie darauf, das CSS in die erforderlichen Stil-Tags einzuschließen.
/* 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 „connected“ verwendet, um die entsprechenden Anmelde-/Abmeldeschaltflächen und die entsprechenden Schaltflächen auszublenden/anzuzeigen Formen Die Anmeldemeldung „Angemeldet“/„Abgemeldet“ jedes Mal, wenn der Benutzer an- oder abgemeldet wird.
JQuery
Fügen Sie unter dem End-Style-Tag die folgende JQuery ein und achten Sie darauf, den Code in die erforderlichen Skript-Tags einzuschließen.
(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 „ und-toggle-popup (die An- und Abmeldeschaltflächen sowie das Präsentationssymbol "x").
Siehe auch: Divi: So verwenden Sie Hintergrundmaskeneinstellungen und Mustertransformationsoptionen
Es ist vollbracht !
Vergessen Sie nicht, die Änderungen, die Sie an der Vorlage vorgenommen haben, im Theme Builder zu speichern. Nach dem Speichern können Sie die Ergebnisse auf einer Live-Seite anzeigen.
Endergebnis
Hier sind die Endergebnisse auf Computer, 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.
Darüber hinaus zeigt das Popup-Anmeldeformular jedes Mal, wenn der Benutzer versucht, sich abzumelden, unterschiedliche „Warn“-Inhalte an.
Laden Sie DIVI jetzt herunter!!!
Fazit.
Hoffentlich erhalten Sie durch 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äche) anzupassen, um ein einzigartiges Anmeldeerlebnis auf Ihrer eigenen Website zu schaffen.
Wir hoffen auch, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren 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.
...
