Divi Tutorial 2020 – Scroll-gesteuertes Popup zu Blogpost hinzufügen

Sicher bist du auf einer Webseite auch schon einmal auf ein scroll-gesteuertes Popup gestossen. Scroll-gesteuert heisst, das Popup geht erst dann auf, wenn du auf der Seite beim Scrollen eine bestimmte Stelle erreichst – meistens das Ende eines Artikels.

Diese Popups werden mit verschiedenen Zielen eingesetzt. Du kannst damit z.B. ähnliche weitere Artikel anzeigen, die zum Weiterklicken und -lesen animieren. Häufig werden sie für ein Newsletter-Optin genutzt. Mit etwas Fantasie ergeben sich noch viele weitere Möglichkeiten.
Da scroll-gesteuerte Popups in der Regel erfolgreicher sind, als Popups die sich sofort bei Seitenaufruf öffnen, werden diese von vielen Plugins für Newsletter-Optins genutzt. In meinem Tutorial-Video zeige ich dir, wie du solch ein scroll-gesteuertes Popup in Divi auch ganz ohne Plugin umsetzen kannst.

Vorraussetzungen für ein scroll-gesteuertes Popup auf deiner Divi-Seite:

• einen Blog mit einigen Blogposts, die unterschiedliche Kategorien haben
• ein Themebuilder Layout für deinen Blogpost (lade dir dafür kostenlos das Theme Builder Layout Pack für Divi herunter)

Für die Anleitung schau dir das Video an! Ich erkläre dir Schritt für Schritt wie du ein scroll-gesteuertes Popup erstellst, wie du es anpassen und nutzen kannst.

Dies sind die im Video-Tutorial genutzten CSS Codes:

CSS-Code für Popup-Element:

position: fixed;
bottom: 0%;
right: -300px;

CSS-Code für Code-Modul:

Viel Freude mit dem Tutorial!

Hast du Fragen – dann schreib mir einfach einen Kommentar!

Post auf Englisch bei Elegant Themes:
How to Add a Scroll Triggered Popup to Your Blog Posts in Divi von Jason Champagne