So erstellen Sie ein Popup-Fenster für verwandte Artikel

Erstellen Sie am Ende eines Artikels ein Popup-Fenster, in dem benutzerbezogene Artikel angezeigt werden.

Sie erfahren, wie Sie ein Popup-Fenster erstellen, das:

1. Es ist in voller Breite
2. Ermutigen Sie den Besucher, nach dem Lesen eines Artikels zu bleiben.
3. Bietet Ihren Besuchern eine bessere Benutzererfahrung.

---

Entwerfen Sie das Popup-Fenster und seinen Inhalt

1. Gehen Vorlagen> Popups> Neu hinzufügen und geben Sie Ihrem neuen Popup einen Namen. (Eine alternative Methode ist das Drücken CMD + E. oder STRG + E. öffnen Entdecker, Suche Entstehen, 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.
3. Beim Popup-Einstellungenunten Design, ändere das Breite zu 100vwwird also im 100% der Breite des Ansichtsfensters angezeigt.
4. Dann konfigurieren Sie die Layout> Horizontale Position zu Center, und das Layout> Vertikale Position zu Hintergrund.
5. Klicken Sie auf das Symbol Neuen Abschnitt hinzufügen um einen neuen Abschnitt mit 4 Spalten hinzuzufügen.
6. Bearbeiten Sie jede Spalte und stellen Sie die Breite der ersten Spalte auf 55% und jeder anderen Spalte auf 15% ein.
7. Fügen Sie der ersten Spalte ein Header-Widget und ein Texteditor-Widget hinzu.
8. Fügen Sie jeder der anderen Spalten ein Bild-Widget hinzu.
9. Geben Sie die Link-URL für jedes der Bild-Widgets ein, die jeweils auf den entsprechenden Artikel verweisen.
10. Bildeffekte hinzufügen. Ein Bild finden Sie unter Normal Registerkarten Stil> CSS-Filter und ändern Sie die Sättigung auf 0. Also unter dem Schweben Sie auf Registerkarte, gehen Sie zu Stil> CSS-Filter und stellen Sie sicher, dass die Sättigung noch bei ist 100.
11. Klicken Sie mit der rechten Maustaste auf das Bild-Widget und wählen Sie Kopieren.
12. Klicken Sie mit der rechten Maustaste auf die anderen Bild-Widgets und wählen Sie Stil einfügen.
13. Klicken Sie auf das Zahnradsymbol zu öffnen Popup-Einstellungen Panel. Gehen Eingangsanimation und wähle Wischen Sie nach oben.
14. Wähle aus Startseite zu Ausblenden.

Legen Sie die Veröffentlichungsoptionen fest

1. Fügen Sie eine neue hinzu Bedingung Was Include> Singular> Alle Seiten> Seitenname
2. Fügen Sie eine neue hinzu Auslösen. einstellen Beim Scrollen zu Element zu Ja und geben Sie einen CSS-Klassennamen Ihrer Wahl in das Feld ein WählenFeld r.
3. Klicken Sie auf das Zahnradsymbol zu öffnen Popup-Einstellungen Panel.
4. Bearbeiten Sie die Seite, auf der das Popup angezeigt werden soll. Bearbeiten Sie dort das Element, das das Popup aktiviert, wenn der Benutzer einen Bildlauf durchführt.
5. Gehe zum Gegenstand Erweitert> CSS-Klassen und geben Sie denselben CSS-Klassennamen ein, den Sie in das Feld eingegeben haben Auslösen auf.

Alles bereit. Besuchen Sie jetzt die Live-Seite, scrollen Sie bis zum Ende des Artikels und sehen Sie Ihre Verwandte Artikel Popup in Aktion.