Wie man ein Video in einer Lightbox in Divi öffnet (zwei Optionen)

[ad_1]

Divi ist eines der beliebtesten Premium-WordPress-Themes, das mit einem eingebauten Page Builder – dem Divi Builder – ausgestattet ist, mit dem du eine schöne Seite auf visuelle Weise erstellen kannst. Genau wie andere Page Builder verfügt auch der Divi Builder über ein Element (Modul genannt), mit dem du ein Video einfügen kannst. Leider bietet das Video-Modul von Divi Builder keine Standardoption, um das Video in einer Lightbox zu öffnen. Wenn du ein Video in Divi in einem Leuchtkasten öffnen möchtest, zeige ich dir in diesem Artikel, wie das geht.

Es gibt zwei Möglichkeiten, ein Video in einem Leuchtkasten in Divi zu öffnen. Erstens kannst du ein Divi-Plugin installieren. Zweitens kannst du eigenen JavaScript- und CSS-Code hinzufügen. Wir werden hier auf alle Möglichkeiten eingehen.

Ein Video in einer Lightbox in Divi ohne Plugin öffnen

Bevor wir loslegen, möchten wir dich noch einmal daran erinnern, dass es den Divi Builder in zwei Versionen gibt: als eigenständiges Plugin und als integraler Bestandteil des Divi-Themas. Diese Methode funktioniert nur, wenn du Divi Builder im Divi-Theme verwendest.

Gehe zuerst zu Divi -> Theme-Optionen in deinem WordPress Dashboard. Öffne die Integration und füge den folgenden Code in das Feld Kopf ein. Feld. Bevor du den Code einfügst, stelle sicher, dass die Aktiviere den Kopfzeilencode Option ist aktiviert.

Der Code:

Immer noch auf der Seite mit den Themenoptionen, öffne die Allgemein und füge den folgenden Code in das Feld Benutzerdefiniertes CSS Feld. Klicke auf das Änderungen speichern Schaltfläche, um die Änderungen zu übernehmen.

Der Code:

* Benutzerdefiniertes Video-Popup */
/* Tweak für das Popup-Schließsymbol */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
top: 0px !important;
position: fixed !important;
}
.mfp-iframe-holder .mfp-content {
max-width: 70%;
}
.mfp-iframe-scaler button.mfp-close {
top: -50px ;
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-close:active {
top: -50px !important;
}

.video_popup_lightbox .mfp-iframe-holder .mfp-close {
top: -50px;
}

.video_popup {
Position: relativ;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.video_popup a:before {
Inhalt: ‘play’;
Cursor: Zeiger;
Position: absolut;
top: calc(50% – 55px);
left: calc(50% – 54.5px);
z-index: 20;
background-color: #fff;
padding: 55px 27px;
border-radius: 50%;
font-size: 20px;
Buchstaben-Abstand: 2px;
text-transform: Großbuchstaben;
Farbe: #0a2a3b;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.video_popup a:after {
Inhalt: ‘E’;
Cursor: Zeiger;
font-family: ‘ETmodules’;
Position: absolut;
top: calc(50% – 55px);
left: calc(50% – 47px);
z-index: 20;
background-color: #fff;
padding: 55px 27px;
border-radius: 50%;
font-size: 40px;
text-transform: Großbuchstaben;
Farbe: #0a2a3b;
Deckkraft: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: alle 0,3s ease-in-out; -moz-transition: alle 0,3s ease-in-out;
Übergang: alle 0,3s, Leichtigkeit nach außen;
}

.video_popup.no_icon:before,
.video_popup.no_icon:after {
display: none!important;
}

.video_popup:not(.no_icon):hover {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}

.video_popup:hover a:before {
Deckkraft: 0;
padding: 65px 37px;
left: calc(50% – 64.5px);
top: calc(50% – 65px);
}

.video_popup:hover a:after {
Deckkraft: 1;
padding: 65px 37px;
left: calc(50% – 64.5px);
top: calc(50% – 65px);
font-size: 56.5px;
}

@media all and (max-width: 980px) {
.video_popup a:before {
top: calc(50% – 32.5px);
left: calc(50% – 33px);
padding: 33px 17px;
font-size: 10px;
}
.video_popup a:after {
top: calc(50% – 32.5px);
left: calc(50% – 33px);
padding: 33px 17px;
font-size: 32px;
}
.video_popup:hover a:before {
Deckkraft: 0;
padding: 40px 22px;
left: calc(50% – 43px);
top: calc(50% – 42.5px);
}
.video_popup:hover a:after {
Deckkraft: 1;
padding: 40px 22px;
left: calc(50% – 43px);
top: calc(50% – 42.5px);
font-size: 42px;
}
}

Als nächstes öffnest du den Divi Builder Editor und fügst das Bildmodul hinzu. Gehe zum Erweiterte Registerkarte auf dem Einstellungsfeld des Bildmoduls. Öffne die CSS ID & Klassen Block und füge die Klasse video_popup zu dem CSS-Klasse Feld.

Gehe zum Inhalt und füge ein Bild auf der Registerkarte Bild Block (das Bild wird die Rolle des Video-Thumbnails übernehmen).

Sobald das Bild hinzugefügt ist, öffne den Link blockieren und fügen Sie die URL des Videos, das Sie hinzufügen möchten, in das Feld Bild-Link-URL Feld. Es ist nicht nötig, das Feld Im Leuchtkasten öffnen Option.

Ein kleiner Hinweis: Das Leuchtpult öffnet sich vielleicht nicht, wenn du im Divi Builder-Editor auf das Bild klickst, aber es öffnet sich, sobald die Seite live geht.

Öffnen eines Videos in einer Lightbox mit Divi Supreme

Divi Supreme ist eines der beliebtesten Divi-Plugins. Es fügt deinem Divi Builder zusätzliche Module hinzu, darunter den Supreme Button. Das Supreme Button-Modul ermöglicht es dir, einen Videolink hinzuzufügen und ihn in einer Lightbox zu öffnen. Divi Supreme selbst ist ein Freemium-Plugin. Das Supreme Button-Modul ist in der kostenlosen Version enthalten, so dass du kein zusätzliches Geld ausgeben musst.

Installiere zunächst das Divi Supreme Plugin. Du kannst das kostenlose Version von Divi Supreme in das Plugin-Verzeichnis von WordPress. Sobald das Divi Supreme Plugin installiert ist, öffne den Divi Builder Editor und füge das Supreme Button Modul hinzu.

Füge den Button-Text auf der Seite Text Block unter dem Inhalt Registerkarte in den Einstellungen.

Als nächstes öffnest du die Links blockieren und fügen Sie die URL des Videos, das Sie hinzufügen möchten, in die Schaltfläche URL Feld und aktivieren Sie die Als Video-Lightbox öffnen Option.

Das war’s. Du kannst auf der Design auf der Registerkarte “Einstellungen”, um die Schaltfläche zu gestalten.

Der Dank für die Codes, die wir in diesem Tutorial verwenden, geht an Divi Pixel.

[ad_2]