WordPress: Popups OHNE PLUGINS erstellen und einpflegen!

Heute bauen wir ein Pop-up, welches durch ein Scroll-Event ausgelöst wird. Es wird wieder ausgeblendet nach einem Klick auf einen Schließen-Button und wir sorgen dafür, dass es nicht mehr erneut getriggert wird, bis ein Benutzer bewusst noch einmal das Angebot aufruft.
Wir erklären dir den kompletten Code hierzu und stellen ihn dir ebenfalls zur Verfügung, so dass du die Lösung auf deine eigenen Anforderungen zuschneiden kannst.

Hier findest du unseren kompletten Beispiel-Code: https://github.com/nextab/vanillaJSPopUp

Wie du beim Scrollen ein Event auslösen lassen kannst, haben wir dir im letzten Video bereits gezeigt:

In dem heutigen Video zeigen wir dir, wie du aufbauend auf dem letzten Video noch den Popup-Inhalt in den Footer deiner Seite bekommst, es gestaltest und wie bereits erwähnt auch ausblendest, wenn ein Schließen-Button geklickt oder die Escape-Taste gedrückt wird.

Besuche uns ebenfalls auf https://divi-tutorials.com, wo du all unsere Tutorials rund um WordPress und dem Divi Theme finden kannst.

Unseren Stream findest du auf https://twitch.tv/nextab_de, indem wir dir 4 Tage die Woche mehr rund um die Themen Webdesign und Webentwicklung beibringen.
Eine sich gegenseitig helfende Community findest du auf https://divi-tutorials.com/discord und Facebook https://www.facebook.com/groups/divitutorials.

———-
Timecodes:
———-

0:00 – Erstelle den Inhalt des Popups mit dem Gutenberg-Editor
1:07 – Einbinden des Popups im Footer der Seite
4:18 – Erläuterung des CSS Codes
5:23 – Zusammenspiel von PHP, JS und CSS Code
6:18 – Passe den Code für deine Website an!
7:32 – Statischen Button für das Popup einfügen
9:18 – Stoppe das Scrollen des Besuchers
9:58 – Drücken der Esc-Taste soll das Popup schließen
10:14 – Information im Browser hinterlassen

———-
Videovorschläge:
———-

JavaScript Event nach Scroll triggern (OHNE jQuery):

JavaScript und eigene Styles in WordPress korrekt einbinden oder entfernen:

———-

Das Divi Theme*: https://divi-tutorials.com/divi_y
Die Divi Cloud*: https://divi-tutorials.com/divi_cloud
Unser Webhost*: https://divi-tutorials.com/all-inkl_y
Konto für Selbständige*: https://divi-tutorials.com/kontist_y
Unser Tipp für E-Mail-Marketing*: https://divi-tutorials.com/activecampaign_y

—————-
Die Musik im Clip stammt von Andrew Applepie, einem Berliner Künstler, den ihr hier unterstützen könnt: https://www.patreon.com/andrewapplepie/

Alle Links, die mit einem * vermerkt sind, sind Partner oder Affiliate-Links. Durch das Klicken dieser Links unterstützt du uns und ggfs. bekommen wir einen geringen Anteil, wenn du ein Produkt oder Dienstleistung kaufst. Bei dir fallen keine Extrakosten an. In Manchen Fällen gibt es sogar einen Rabatt!