Wie kann ich Inhalte in einem Popup darstellen?

In dieser Anleitung zeigen wir dir, wie du einen Inhalt auf einer Seite deiner Spreadmind Plattform in einem Popup/Lightbox ausgeben kannst. Egal ob es ein einfacher Text, ein Bild oder sogar ein Video sein soll.

Leider gibt es dazu von Divi noch kein eigenes Modul. Aber mit unserer Hilfe kannst du dies mit ein paar Code-Schnipsel ganz einfach umsetzen und kannst dann sogar nicht nur Divi-Module sondern auch eine Zeile oder sogar eine komplette Sektion als Popup darstellen. Denn Divi nutzt bereits eine Lightbox Funktion, welche du womöglich schon von den beiden Divi Modulen "Bild" und "Galerie" kennst. Und auf diese bereits vorhandene Funktion greifen wir zurück.

1. Skript, um die eingebaute Lightbox Funktion von Divi nutzen zu können

<script type="text/javascript"> jQuery(document).ready(function(t){t('div:not(.et_mobile_menu) .lightbox-content, div:not(.et_mobile_menu) [class*="lightbox-content-"]').addClass("mfp-hide"),t("div:not(.et_mobile_menu) .lightbox-trigger").magnificPopup({items:{src:"div:not(.et_mobile_menu) .lightbox-content",type:"inline"}}),t('div:not(.et_mobile_menu) [class*="lightbox-trigger-"]').each(function(){var i=".lightbox-content-"+Array.prototype.find.call(this.classList,function(t){return t.indexOf("lightbox-trigger-")>-1}).split("lightbox-trigger-")[1];t(this).magnificPopup({items:{src:i,type:"inline"}})}),t(this).click(function(){t(".mfp-wrap").attr("id","et-boc")}),t('[class*="lightbox-content"]').prepend('<div class="lightbox-overlay"></div>')});</script>

<script src="/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/magnific-popup.js" async></script>
<link rel="stylesheet" href="/wp-content/themes/Divi/includes/builder/styles/magnific_popup.css">

2. CSS-Code für das Grunddesign des Popup-Fensters

/****** Lightbox Design *******/
[class*="lightbox-trigger-"] {cursor:pointer;}
[class*="lightbox-content-"] {position:relative; z-index: unset !important;}
[class*="lightbox-content-"] .mfp-close {color:#999999 !important;}
[class*="lightbox-content-"] .mfp-close:active {top:0px !important;}

3. Trigger-Element erstellen

Zum Schluss musst du nur noch deine Anpassungen auf der Seite speichern und den visuellen Builder verlassen. Und schon hast du dein eigenes Popup erstellt:

5. Mehrere Popups auf der gleichen Seite einbinden

Möchtest du mehrere Popups auf der gleichen Seite verwenden, welche jeweils einen anderen Inhalt darstellen sollen, gehst du genau gleich vor, wie in den Schritten 3 und 4 beschrieben. Du musst lediglich einen anderen Inhalt für <eigenerWert> nutzen, als bei den anderen Popups. Damit du die Trigger-Inhalte gezielt ansprechen kannst und der richtige Inhalt im Popup geöffnet wird.

Achte aber immer darauf, dass du beim Trigger-Element und Trigger-Inhalt immer am Ende immer die gleiche Bezeichnung für <eigenenWert> verwendest.

6. Gleiches Popup auf unterschiedlichen Seiten einbinden

Soll exakt der gleiche Popu-Inhalt auch auf einer anderen Seite deiner Plattform erscheinen, musst du auf der neuen Seite B wieder ein Trigger-Element (Modul, Bild oder Hyperlink) definieren. Verwende hier bei <eigenerWert> die gleichen Angaben verwenden wie bei deiner Seite A. 

Gehe nun zu deiner Seite A und speicher deinen Trigger-Inhalt (also den Inhalt, welcher innerhalb des Popup-Fensters angezeigt wird) in die Divi-Bibliothek als globales Element ab. Klicke dazu bei deinem Trigger-Inhalt auf das Symbol, um dieses in die Bibliothek zu speichern:

Vergib dem Inhalt einen sinnvollen Namen und achte darauf, dass der Haken bei der Option "Dies zu einem globalen Objekt machen" gesetzt ist:

Ein globales Element erkennst du daran, dass sich nach dem Speichern die Rahmenfarbe auf ein helles Grün ändert:

Speicher den Vorgang ab und verlasse den visuellen Builder. 

Gehe nun wieder zur Seite B und füge den globalen Trigger-Inhalt aus deiner Divi-Bibliothek ein. Klicke dazu am Ende der Seite B auf das Plus-Symbol für das Hinzufügen einer neuen Zeile. Gehe nun zum Reiter "Divi-Bibliothek" und wähle dein zuvor gespeichertes Element aus: 

Da bei diesem globalen Trigger-Inhalt bereits die CSS-Klasse gesetzt ist, brauchst du nun nur noch den visuellen Builder zu speichern und zu verlassen. Das Popup funktioniert nun auch auf der Seite B. 

Der Vorteil von einem globalen Element ist der, dass du bei Änderungen am Inhalt des Popups dies nur auf der Seite A oder Seite B umsetzen musst. Die Änderungen werden automatisch auf die anderen Seiten übertragen, da die Anpassungen global für den Inhalt aktualisiert werden.

7. Popup Verschachtelungen

Du hast auch die Möglichkeit, innerhalb des Popup-Inhalts ein zusätzliches Trigger-Element einzubinden, welches ein zweites Popup öffnen soll:

Du musst dazu einfach nur wieder ein Trigger-Element erstellen und diesen eine neue CSS-Klasse mit lightbox-trigger-<eigenerWert2> zuweisen.

Den Trigger-Inhalt für das zweite Popup kannst du ganz normal auf deiner Seite einfügen. Sobald du diesem Inhalt die CSS-Klasse lightbox-content-<eigenerWert2> zuweist, wird der Inhalt im Frontend automatisch ausgeblendet. 

Rein theoretisch kannst du beliebig oft ein Popup-Inhalte verschachteln – wir empfehlen aber nicht mehr als zwei Verschachtelungen zu erstellen. 

8. Wichtiger Hinweis bei Verwendung von Popups auf Kursseiten

Zum aktuellen Zeitpunkt scheint auf der Kursseite das Design des Trigger-Inhalts (= Popup Inhalt) ein wenig buggy zu sein. Solltest du auf der Kursseite die Popup-Funktion nutzen wollen, musst du im Backend deiner Plattform unter "Design" > "Theme Optionen" > Reiter "Inhalt" am Ende der Seite bei Eigenes CSS den folgenden CSS-Code hinzufügen:

/** Lightbox Design Fix auf Kursseiten **/
.mfp-content .et_pb_row { width: 80%; padding: 25px 30px; margin: auto; background-color: #ffffff; }

Dieser Code korrigiert die fehlerhafte Darstellung des Popups auf der Kursseite. Sollte dein Popup-Inhalt eine andere Hintergrundfarbe und nicht weiß sein, kannst du bei diesem CSS-Code einfach einen eigenen Wert für die background-color Eigenschaft verwenden.

9. Wichtiger Hinweis bei Verwendung von Popups bei einer Lektion / Thema innerhalb eines Kurses

Zum aktuellen Zeitpunkt scheint bei einer Lektion oder Thema eines Online Kurses das Popup-Skript Probleme zu bereiten, wenn der E-Learning Modus aktiviert ist. Grundsätzlich empfehlen wir, den Divi Builder bei Lektionen und Themen nicht zu verwenden, wenn der E-Learning Modus aktiviert ist.

Mehr zum E-Learning Modus findest du hier: Wie nutze ich den E-Learning Modus bei meinen Online Kursen?