So entwerfen Sie ein kreatives Popup-Anmeldeformular in Divi

Ein schönes Login-Formular hilft, die Benutzerfreundlichkeit Ihrer Website zu verbessern. Die Idee unseres heutigen Tutorials besteht darin, mit Divi Builder ein Anmeldeformular zu erstellen, das angezeigt wird, wenn Sie auf die Anmeldeschaltfläche auf der Startseite klicken. Wenn wir auf den Login-Button klicken, werden wir meistens auf die Login-Seite weitergeleitet, wo ein einfaches Popup-Formular viel bequemer und erfrischender ist. Heute lernen wir, ein kreatives Popup-Anmeldeformular zu entwerfen. Diese werden wir mit Hilfe des Login-Moduls von Divi und einiger Button-Module erstellen. Beginnen wir also ohne Verzögerung mit dem heutigen Tutorial.

Hinweis: Wir arbeiten nur mit Frontend-Design. Wenn jemand Probleme beim Einloggen hat, zum Beispiel jemand sein Passwort zurücksetzen muss, müssen wir zur traditionellen Anmeldeseite wechseln. Für Leute, die von maßgeschneiderten Login-Seiten begeistert sind, ist dieses Tutorial perfekt geeignet.

Vorschau

Hier ist die heutige Designvorschau. Wir können sehen, dass beim Klicken auf die Anmeldeschaltfläche die Anmeldeformulare angezeigt werden, und wenn wir auf Abmelden klicken, wird vor dem Abmelden ein Warnfenster angezeigt.

Popup-Anmeldeformular mit Anmelde-/Abmeldeschaltflächen

Um mit dem Design zu beginnen, müssen Sie zuerst zu Divi . gehen

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Jetzt müssen wir die Kopf- und Fußzeile der Crowdfunding-Layoutpakete von Divi von dieser Seite herunterladen. Geben Sie Ihre E-Mail-ID ein und klicken Sie auf Download.

Dann sehen Sie erneut eine Option zum Herunterladen und klicken Sie darauf. Entpacken Sie nun die Datei, nachdem der Download abgeschlossen ist, kehren Sie zum Divi-Builder zurück und klicken Sie auf die Portabilitätsoption.

Folgen Sie nun der weiteren Vorgehensweise wie unten beschrieben.

• Wählen Sie die Registerkarte Import aus dem Portabilitäts-Popup.
• Laden Sie die heruntergeladene Json-Datei aus dem entpackten Ordner hoch.
• Klicken Sie auf die Schaltfläche Importieren.
• Klicken Sie dann auf Bearbeiten, um die Kopfzeile anzupassen.

Teil 1: Login/Logout-Button erstellen

Öffnen Sie zuerst die Ebenen, damit wir alle Elemente leicht sehen können. Löschen Sie in der oberen Zeile des Kopfbereichs die Social-Media-Module.

Login-Button erstellen

Es gibt bereits einen Login-Button in der 4. Spalte in der obersten Zeile. Wir werden es ändern.

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

Fügen Sie der Schaltfläche auf der Registerkarte "Erweitert" wie folgt zwei benutzerdefinierte CSS-Klassen hinzu:

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

Abmelden-Schaltfläche

Um unsere Logout-Schaltfläche zu erstellen, klonen Sie die vorhandene Login-Schaltfläche in Spalte 4. Beschriften Sie sie außerdem zur weiteren Identifizierung.

Ändern Sie den geklonten Schaltflächentext als "Abmelden".

Ändern Sie das Schaltflächensymbol auf der Registerkarte „Design“ wie unten markiert.

Ändern Sie schließlich die CSS-Klasse auf der Registerkarte "Erweitert".

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

Teil 2: Popup-Seite erstellen

Wir haben die Buttons erfolgreich erstellt. Nein, wir werden den Popup-Bereich entwerfen, der als Formular fungiert. Um dies zu erstellen, fügen Sie einen regulären Abschnitt unter dem Header-Abschnitt hinzu.

Abschnitt hinzufügen und Einstellungen

Geben wir dem Abschnitt einen weißen Hintergrund.

• Hintergrundfarbe: #ffffff

Nehmen Sie die folgenden Anpassungen auf der Registerkarte Design des Abschnitts vor.

• 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

Fügen wir eine CSS-Klasse aus der Registerkarte "Erweitert" hinzu.

• CSS-Klasse: et-popup-login

Fügen Sie dann den folgenden CSS-Code in das Hauptelement ein.

overscroll-behavior: contain;

Nehmen Sie dann einige Anpassungen an Sichtbarkeit und Position vor.

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

Zeilen hinzufügen und Einstellungen

Fügen wir dem neuen Abschnitt eine einspaltige Zeile hinzu.

Öffnen Sie die Zeileneinstellungen und nehmen Sie die folgenden Anpassungen vor.

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

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

Wir werden ein Klappenmodul verwenden, um ein Popup-Schließsymbol zu erstellen.

Löschen Sie Modultexte aus den Einstellungen und fügen Sie das folgende Symbol hinzu.

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

Wenden Sie die folgenden Einstellungen auf der Registerkarte Design an.

• Symbolfarbe: #004e43
• Bild-/Symbolausrichtung: Zentriert
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 50px

• Breite: 50px
• Modulausrichtung: Rechts
• Höhe: 50px

Fügen Sie dem Klappenmodul auf der Registerkarte "Erweitert" eine CSS-Klasse hinzu.

• CSS-Klasse: et-toggle-popup

Teil 4: Erstellen des Formulars

Unser Login-Formular hat zwei Designs, eines zum Anmelden und eines zum Abmelden. Es wird also zwei verschiedene Login-Formularmodule geben. Die erste wird angezeigt, wenn ein Benutzer abgemeldet ist und sich anmelden muss, und eine andere ist, dass der Benutzer angemeldet ist und sich abmelden möchte. Einfaches Konzept, machen wir uns wieder an die Arbeit.

Abgemeldetes Formular erstellen

Fügen wir ein Login-Modul hinzu, um unser Abmeldeformular zu erstellen.

Öffnen Sie nun die Einstellungen des Formularmoduls und ändern Sie auf der 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

Kommen wir nun zurück zum Header-Abschnitt von den Ebenen. Öffnen Sie dann die Einstellungen von für die Schaltfläche aus der 4. Spalte der 1. Zeile. Wechseln Sie zur Registerkarte Design und öffnen Sie die Schaltflächenoption. Klicken Sie dann auf die Drei-Punkte-Option und wählen Sie "Button-Stil kopieren".

Fügen Sie es nun in das soeben erstellte Anmeldeformular ein.

Wir werden den Schaltflächenstil für unser Anmeldeformular aktualisieren.

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

Laden wir auch die Größeneinstellungen hoch.

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

Wechseln Sie nun zum erweiterten Tab und fügen Sie die CSS-Klasse und das benutzerdefinierte CSS wie unten beschrieben hinzu.

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

Fügen Sie dem Feld Login description den folgenden Code hinzu.

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

Fügen Sie dann diesen Code in das Feld Login Form ein.

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

Dies macht das Login-Formular in etwa so.

Erstellen des Formulars „Angemeldet“

Wir sind mit dem "Logged Out"-Formular fertig und lassen uns nun das "Logged In"-Formular mit verschiedenen Inhalten erstellen, um die Benutzererfahrung zu erweitern. Klonen wir dazu das vorhandene Anmeldeformular.

Aktualisieren Sie nun die Namen für jedes Formular. Öffnen Sie dann das Formular "Angemeldet" über die Texteinstellung der Inhaltsregisterkarte. Dann haben Sie im Titelfeld ein Dropdown-Menü auf der rechten Seite. Öffnen Sie es und wählen Sie "Site-Titel".

Öffnen Sie die Einstellungen für dynamische Site-Titel und aktualisieren Sie sie wie folgt.

• Vorher: „Sie versuchen, sich von „ . abzumelden
• Nachher: “. „

Bearbeiten Sie nun die Beschreibungseinstellungen nach Ihrer Wahl, aber setzen Sie die Beschreibung bitte als Kopfzeile 3.

In vielen Anmeldeformularen für Websites ist eine benutzerdefinierte Nachricht an den Link "Abmelden" angehängt. Wir werden die Textkörperoption auf der Registerkarte "Erweitert" anpassen, um dies zu erstellen.

• 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

Wechseln Sie zum Tab "Erweitert" und fügen Sie eine CSS-Klasse und ein benutzerdefiniertes CSS hinzu.

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

Benutzerdefiniertes CSS für das Anmeldeformular:

display:none;

Teil 5: Benutzerdefinierte Codes

Wir müssen ein Codemodul hinzufügen, um benutzerdefinierte Codes hinzuzufügen. Fügen wir unter dem letzten Login-Modul ein Code-Modul hinzu.

CSS-Code

Fügen Sie den angegebenen CSS-Code zum Modul innerhalb von Style- Tags hinzu.

/* 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;
}

JQuery-Code

Fügen Sie nun den folgenden JQuery-Code in das Modul innerhalb von Script- Tags ein.

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

Designergebnis

Hier ist also das Ergebnis unseres Designs. Alles ist vorhanden und funktioniert einwandfrei.

Letzte Worte

Heute haben Sie gesehen, wie Sie mit dem Login-Modul von Divi ein kreatives benutzerdefiniertes Anmeldeformular entwerfen. Auf diese Weise können Sie die Ästhetik der Website in einem benutzerdefinierten Anmeldefenster anpassen. Ich hoffe, Sie finden dieses Tutorial nützlich, und wenn ja, wird eine Freigabe großartig sein!