So erstellen Sie ein Popup-Fenster für Anmeldeformulare

Erstellen Sie ein Anmeldeformular-Popup mit einem verschiebbaren Hintergrund.

Du wirst lernen zu:

1. Klicken Sie auf eine Schaltfläche, um ein Anmeldeformular-Popup zu öffnen
2. Verwenden Sie Folien als Hintergrund für das Popup-Fenster
3. Leiten Sie den Benutzer beim Schließen des Popups zu seinem Dashboard um

Entwerfen Sie das Popup-Fenster und seinen Inhalt

1. Gehen Vorlagen> Popups> Neue hinzufügen und geben Sie Ihrem neuen Popup einen Namen. (Eine alternative Methode besteht darin, CMD + E oder STRG + E zum Öffnen zu drücken Entdecker, nach Popup suchen, wählen Neues Popup hinzufügenund gib ihm einen Namen.)
2. Wählen Sie eine vordefinierte Popup-Vorlage oder schließen Sie die Bibliotheksüberlagerung und gestalten Sie Ihr Popup von Grund auf neu. In diesem Beispiel werden wir unsere eigenen entwerfen.

Popup-Fenster> Registerkarte Design

1. Benutzerdefinierte Breite: Auf 300px einstellen
2. Höhe: Wählen Sie Benutzerdefiniert
3. Benutzerdefinierte Höhe: Auf 600px einstellen
4. Startseite: Auf Ausblenden setzen

Popup> Registerkarte Erweitert

Vermeiden Sie überlappende Verschlüsse: Auf Ja setzen

Inhalt

Abschnitt 1:

Registerkarte Design

1. Minimun Höhe: Auf 600 px einstellen
2. Fügen Sie nun dem Abschnitt eine Kopfzeile und ein Anmelde-Widget hinzu. Passen Sie den Inhalt und den Stil des Titels nach Bedarf an.
3. Im Login-Widget> Inhalt> Zusätzliche Optionen> Nach dem Login umleiten: Setzen Sie es auf Ein und geben Sie die URL der Seite ein, zu der der Benutzer umgeleitet werden soll

Sektion 2:

Registerkarte Design

Minimun Höhe: Auf 600 px einstellen

Folien-Widget> Registerkarte Design

1. Höhe: Auf 600px einstellen
2. Bilder > Wiederholen Sie für jedes Bild auf der Folie die folgenden vier Optionsänderungen:
3. Bild: Wählen Sie ein Bild
4. Größe: Wählen Sie Cover
5. Ken Burns-Effekt: Auf Ja setzen
6. Zoomrichtung: Eingestellt auf

Legen wir nun die beiden Abschnitte übereinander.

1. Sektion 2 > Rand> Oben: -600 px (600 Negative)
2. Abschnitt 1 > Z-Index: 1

Veröffentlichen Sie das Popup

Klicke auf das Zu posten Taste. Es gibt keine erweiterten Bedingungen, Auslöser oder Regeln für dieses Popup. Klicken Sie daher auf Speichern und schließen Taste.

Steuern Sie das Popup-Fenster

1. Bearbeiten Sie die Seite, die die Schaltfläche Anmelden enthält.
2. Bearbeiten Sie die Schaltfläche Anmelden. Wenn Sie noch keine Schaltfläche erstellt haben, können Sie dies jetzt tun. Bearbeiten Sie Ihren Text und Ihre Typografie nach Bedarf.

Widget-Schaltfläche> Inhalt

1. Schaltfläche> Link: Klicken Sie auf das dynamische Symbol Und darunter Verhalten, wählen Entstehen
2. Klicken Entstehen erneut und wählen Sie Popup umschalten.
3. Beginnen Sie nun im Popup-Feld mit der Eingabe, um das soeben erstellte Anmelde-Widget zu finden.
4. Klicke auf das Aktualisieren Taste.

Popup> Registerkarte Erweitert

1. Vermeiden Sie überlappende Verschlüsse: Auf Ja setzen

Alles bereit. Besuchen Sie die Seite mit der Schaltfläche Als normaler Besucher anmelden (kein Login). Klick auf das Einloggen Taste. Wenn Sie das Formular ausfüllen und sich erfolgreich anmelden, werden Sie zu der Seite weitergeleitet, die Sie als Dashboard festgelegt haben. Wenn Sie das Popup schließen möchten, anstatt sich anzumelden, klicken Sie auf Einloggen erneut, um das Popup-Fenster umzuschalten / zu schließen.