Saltar al contenido

So öffnen Sie ein Video im Popup-Fenster oder PopUp mit Lightbox in Divi Clicking (Beispiel)

15 de agosto de 2021

WordPress ist eine Plattform, die seit ihrer Gründung ein Veröffentlichungsraum für Inhalte ist, die von der Community entwickelt wurden, und ihnen Tools zu ihrer Verbesserung bietet. Heute sprechen wir über öffne ein Video oder PopUp in einem Popup-Fenster.

Das Hinzufügen von Inhalten von anderen Seiten ist wirklich sehr einfach, denn durch die Kodierung deiner Seite Sie müssen nur den Link anheften, zu dem Sie umleiten möchten.

Bestimmte Benutzer (einschließlich Sie) möchten jedoch, dass dieser Weiterleitungslink in einem neuen Tab geöffnet wird, damit der Leser die Seite nicht verlässt.

Durch die WordPress-Plattform ist dies auch möglich, sogar in verschiedenen Arten von Vorlagen wie Divi, die das Design dieser Seiten revolutioniert haben.

Was ist Divi und wofür funktioniert es?

Wie oben erwähnt, ist Divi eine WordPress-Vorlage, mit der Benutzer entwerfen können alles was du dir vorstellen kannst.

Seine Arbeitsmethode ist durch einen visuellen Konstruktor namens Divi-Builder das verdient das Layout und die HTML-Codierung nicht von Grund auf, um das Design zu erstellen, da es das Hinzufügen der Elemente «per Drag & Drop» innerhalb der Seite ermöglicht. Divi verfügt auch über eine Bibliothek mit voreingestellten Layouts.

Es erfordert keine Installation, so dass Sie nur auf die „Speisekarte„Suchen Sie in WordPress den Abschnitt von“Das Auftreten«Und trete ein»Themen„Um sicherzustellen, dass es da ist.

Ebenso kann sein Konstruktor durch die Option „Beiträge und Seiten„Zur Auswahl der“Verwenden Sie den Divi-Konstruktor„Unter dem Beitragstitel.

Obwohl Divi sich dadurch auszeichnet, dass es sich um einen visuellen Builder handelt, mit dem Sie jede Art von Website mit den Elementen gestalten können, die sich der Benutzer vorstellen kann, müssen Sie manchmal ein Plugin verwenden oder Codierung schreiben Erstellen Sie spezifische Funktionen für Ihre Seite.

Das folgende Beispiel dient zum Öffnen eines YouTube-Videos in einem Popup-Fenster (auch PopUp oder Lightbox genannt) mit nur einen Knopf drücken.

JQuery-Code, der die Popup-Funktion auslöst

(Funktion ($) {

$ (Dokument) .bereit (Funktion () {

// $ (‘#IDname a’) .addClass (‘popup-video’);

$ ((‘Popup-Video’). magnificPopup ({

deaktivierenEin: 100,

Typ: ‘inframe’,

mainClass: ‘mfp-fade’,

Entfernungsverzögerung: 160,

Vorlader: falsch,-

fixedContentPos: falses

});

});

}) (jQuery)

Zu Hintergrundfarbe ändern des Fensters, das sich öffnet, nachdem die Person die Schaltfläche gedrückt hat, gilt der folgende Code:

.mfp-bg {

Hintergrund: # 673ab7;

}

Falls Sie eine andere Farbe einstellen möchten, müssen Sie nur den Code eingeben, für den Sie ihn ändern möchten, und speichern.

Vorteile der Verwendung von Divi in ​​WordPress

Zusätzlich dazu, dass wir ein Video oder PopUp in einem . öffnen können Pop-up-Fenster, dieser Builder hat auch viele Tugenden, die Sie genießen können, wenn Sie beginnen, ihn in Ihren Kreationen zu spielen.

Es ist ein Konstruktor mit einer sehr einfachen Usability-Methode, der sich an mehrere Sprachen und Designstile, die in die WordPress-Community integriert werden können.

weißes WordPress-Logo

Es integriert wiederum den Stil von sich anpassendes Design, sodass Elemente integriert werden können, die nur auf Computern oder Geräten angezeigt werden können.

Die Bearbeitung des Inhalts erfolgt live, Sie müssen also keinen Knopf drücken «Vorschau„Um sehen zu können, wie die Seite bei jeder Änderung aussieht.

Außerdem müssen Sie die HTML- und CSS-Sprache nicht kennen, um Stile zu erstellen, und wenn Sie die entsprechenden Kenntnisse haben, können Sie den Code jedes Elements anpassen.

Jedes von Ihnen erstellte Design kann in einem «Bibliothek„Damit es Ihnen zur Verfügung steht, wenn Sie es auf einer anderen Seite oder einem anderen Beitrag wiederverwenden möchten.

Es verfügt auch über mehrere Tools, die Ihre Seite attraktiver und für den Leser einfacher zu verwenden machen. Ebenso wie die Möglichkeit, BreadScrumbs zur Verbesserung der SEO einzubinden, die Seitenleiste zuklappen, um die Lesbarkeit des Lesers zu verbessern, oder die Fußzeile zu korrigieren.

Schließlich können Sie durch die ständige Aktualisierung die Sicherheit Ihrer Website und ihrer Inhalte innerhalb der Plattform aufrechterhalten.