BigBear Logo – modernes Webdesign Branding



Über Mich

Hier kannst du mehr über mich erfahren und dir einen ersten Eindruck machen.

Portfolio

Hier findest du ausgewählte Projekte für einen schnellen und klaren Überblick.

Blog

In meinem Blog kannst du dich umfassend informieren.

Leistungen

Hier findest du meine Service leistungen für einen schnellen und klaren Überblick.

Web-Preise

Webseiten zur Miete, Datenschutzpaket auch einzeln buchbar und rechtssicher.

Kontakt

Jetzt Direkt mit mir in Kontakt treten und mit Deiner Website durchstarten

Video-Pop-ups in Divi erstellen: So machst du dein Layout zum Hingucker

Der Autor ist links im Bild zu sehen, mit schwarzem Hintergrund und dem zentralen Text ‚Video-Pop-ups in Divi erstellen

Pop-up-Videos wie ein Profi: So bringst du deine Besucher zum Klicken (und Staunen!) 🚀

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.


🎬 Warum Pop-up-Videos rocken

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:

  • Mehr Aufmerksamkeit bekommen.
  • Einen Wow-Effekt liefern.
  • Professioneller wirken (so als würdest du IT-Nerd-Geheimnisse kennen).

🚀 Schritt-für-Schritt-Anleitung: Dein Video-Pop-up in Divi erstellen

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

  • Gehe in die Divi-Leistungseinstellungen.
  • Deaktiviere die Optionen Dynamisches CSS und Dynamische JavaScript-Bibliotheken.

🚀 Fazit

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

Jetzt beraten

Nutzen Sie jetzt die Möglichkeit einer telefonischen Erstberatung – schnell, unverbindlich und kompetent!

Termin buchen

Bewerbungs-formulare

Benötigen Sie ein Bewerbungsformular für Ihre Webseite? Ich erstelle benutzerfreundliche und professionelle Formulare, die perfekt auf Ihre Anforderungen abgestimmt sind.

Kontaktiere mich

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress Cookie Plugin von Real Cookie Banner