Durch zwei Artikel bin ich auf eine L\u00f6sung gesto\u00dfen wie man in Divi, ohne Verwendung eines eigenen Plugins, ein Pop-up realisieren kann das in einem definierten Bereich der Seite auftaucht und auch wieder verschwindet.<\/p>\n
Der Originalartikel von Divi findet sich hier\u00a0<\/a>und hier<\/a> gibt es ein Video auf Deutsch dazu.<\/p>\n In Prinzip erstellt man eine eigene Zeile oder Sektion mit einer reduzierten Breite (ich habe 400px f\u00fcr Desktop und 250 f\u00fcr Smartphone gew\u00e4hlt) und schiebt das Element per CSS nach rechts hinaus. Dann erstellt man ein Trigger-Element, also ein Element das sozusagen der Ausl\u00f6ser f\u00fcr das Pop-up ist, und ein zweites dass das Pop-up wieder verschwinden l\u00e4sst.<\/p>\n Das CSS f\u00fcr das Pop-up lautet:<\/p>\n Der Code der f\u00fcr das Erscheinen und Verschwinden sorgt lautet so:<\/p>\n post-row ist dabei die CSS-Klasse des Pop-up und post-waypoint die Klasse des Trigger-Elements.<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=“4.9.4″ _module_preset=“default“ global_module=“272″][et_pb_column type=“4_4″ _builder_version=“4.9.4″ _module_preset=“default“][et_pb_post_nav prev_text=“Vorheriger Artikel“ next_text=“N\u00e4chster Artikel“ _builder_version=“4.9.4″ _module_preset=“default“ title_text_color=“#FFFFFF“ background_color=“#2E4770″ custom_padding=“0.5em|0.5em|0.5em|0.5em|true|true“][\/et_pb_post_nav][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n\n","protected":false},"excerpt":{"rendered":" Durch zwei Artikel bin ich auf eine L\u00f6sung gesto\u00dfen wie man in Divi, ohne Verwendung eines eigenen Plugins, ein Pop-up realisieren kann das in einem definierten Bereich der Seite auftaucht und auch wieder verschwindet. Der Originalartikel von Divi findet sich hier\u00a0und hier gibt es ein Video auf Deutsch dazu. In Prinzip erstellt man eine eigene […]<\/p>\n","protected":false},"author":1,"featured_media":76,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[21],"tags":[60,81,58],"class_list":["post-516","post","type-post","status-publish","format-aside","has-post-thumbnail","hentry","category-aus-meiner-arbeit","tag-divi","tag-pop-up","tag-wordpress","post_format-post-format-aside"],"_links":{"self":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/comments?post=516"}],"version-history":[{"count":4,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/516\/revisions"}],"predecessor-version":[{"id":521,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/516\/revisions\/521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/media\/76"}],"wp:attachment":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/media?parent=516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/categories?post=516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/tags?post=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}position: fixed;\nbottom: 0%;\nright: -300px;<\/pre>\n
<style>\n .post-row {\n transition: all .4s;\n }\n .post-row.show-post {\n right: 0px;\n }\n<\/style>\n<script>\n jQuery(document).ready(function($) {\n $('.post-waypoint').waypoint(function() {\n $('.post-row').toggleClass('show-post');\n }, {offset: '97%'});\n });\n<\/script>\n<\/pre>\n