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. Proporciona una mejor Benutzererfahrung a sus visitantes.

---

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. Ingrese la Url von Verknüpfung para cada uno de los Widgets de imagen, cada uno apuntando al artículo relevante.
10. Bildeffekte hinzufügen. Ein Bild finden Sie unter Normal Registerkarten Estilo> Filter CSS 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 On Scrollen to 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. Edite la página donde desea que aparezca la ventana emergente. Una vez allí, edite el elemento que activará el Popup cuando el Nutzername se desplace hacia él.
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.