
Diese Seite ist derzeit nicht verfügbar.
Diese Information wird zeitnah verfügbar werden.
Vielen Dank für Ihr Verständnis!
Grüsse Heiko
Pop-up-Fenster – sie sind wie die Nervensägen auf Familienfeiern, die plötzlich auftauchen. Aber anders als Onkel Klaus kannst du mit den richtigen Pop-ups tatsächlich für Begeisterung sorgen. Vor allem, wenn es um Videos geht! In diesem Beitrag zeige ich dir Schritt für Schritt, wie du mit Divi und ein bisschen Code ein stylisches Video-Pop-up erstellst. Spoiler: Es ist einfacher, als deinem Hund das Sitzen beizubringen.
Videos sind der König des Contents. Und wenn deine Zuschauer das Video in einem coolen Pop-up-Fenster sehen können, statt deine Seite zu verlassen, wirst du:
Schritt 1: JavaScript einfügen
Öffne die Divi-Optionen unter dem Punkt Integration und füge folgenden Code in den Body-Bereich ein:
<script> jQuery(document).ready(function() { jQuery('.slider-video-icon').magnificPopup({ disableOn: 0, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, fixedContentPos: true }); }); </script>
Schritt 2: Button hinzufügen
Füge den folgenden Code in das entsprechende Code-Modul oder an die gewünschte Stelle ein.
Schritt 3: CSS-Styling hinzufügen
Um den Button und das Pop-up ansprechend zu gestalten, füge folgenden CSS-Code ein:
<style> /* Button Styling */ .slider-video-icon { display: inline-block; padding: 10px 20px; background-color: #FFD700; color: #000; text-transform: uppercase; font-size: 16px; border-radius: 5px; font-weight: bold; text-decoration: none; transition: background-color 0.3s ease; } .slider-video-icon:hover { background-color: #FFC107; } /* Pop-up Styling */ .mfp-iframe-holder .mfp-content { max-width: 410px; heihgt: 700px; margin: 0 auto; border-radius: 10px; } .mfp-bg { background: rgba(0, 0, 0, 0.8); } </style>
Schritt 4: Divi-Einstellungen anpassen
Mit diesen einfachen Schritten kannst du ein modernes und effektives Video-Pop-up in Divi erstellen. Egal ob du es für Tutorials, Produktvideos oder spannende Inhalte nutzt – mit diesem Setup sieht deine Webseite professionell aus und hinterlässt einen bleibenden Eindruck.
Humorvoller Tipp: Vergiss nicht, das Pop-up zu testen, bevor du es veröffentlichst. Nichts ist peinlicher als ein Button, der ins Leere führt! 😉
Bildnachweis: Canva.com
Nutzen Sie jetzt die Möglichkeit einer telefonischen Erstberatung – schnell, unverbindlich und kompetent!
Benötigen Sie ein Bewerbungsformular für Ihre Webseite? Ich erstelle benutzerfreundliche und professionelle Formulare, die perfekt auf Ihre Anforderungen abgestimmt sind.
0 Kommentare