Comment ouvrir une vidéo dans une fenêtre pop-up ou PopUp avec Lightbox dans Divi en cliquant

WordPress est une plate-forme qui depuis sa création est un espace de publication de contenu conçu par la communauté, en leur fournissant des outils pour les améliorer. Aujourd’hui, nous allons parler de l’ ouverture d’une vidéo ou d’un PopUp dans une fenêtre pop-up.

Ajouter du contenu à partir d’autres pages est vraiment très simple, car grâce au codage de votre page, il vous suffit d’ancrer le lien vers lequel vous souhaitez rediriger.

Cependant, certains utilisateurs (vous y compris) souhaitent que ce lien de redirection soit ouvert dans un nouvel onglet afin que le lecteur ne quitte pas la page.

Grâce à la plate – forme WordPress , cela est également possible, même dans différents types de modèles tels que Divi qui ont révolutionné la conception de ces sites.

Qu’est-ce que Divi et à quoi ça sert?

Comme mentionné ci-dessus, Divi est un modèle WordPress qui permet aux utilisateurs de concevoir tout ce qu’ils peuvent imaginer .

Sa méthode de travail passe par un constructeur visuel appelé Divi Builder qui ne nécessite pas de mise en page et de codage HTML à partir de zéro pour créer le design, car il permet d’ajouter les éléments «glisser-déposer» dans la page. Divi dispose également d’une bibliothèque de mises en page prédéfinies.

Il ne nécessite pas d’installation, il vous suffit donc d’accéder au » Menu » de WordPress, recherchez la section » Apparence » et entrez » Thèmes » pour vous assurer qu’il est là.

De même, son constructeur peut être utilisé via l’option » Articles et pages » pour sélectionner le bouton » Utiliser Divi Builder » sous le titre de l’article.

Apprenez à ouvrir une vidéo ou un PopUp dans une fenêtre pop-up avec Divi!

Bien que Divi se caractérise par être un constructeur visuel qui vous permet de concevoir tout type de site Web avec les éléments que l’utilisateur peut imaginer, vous devez parfois utiliser un plugin ou écrire du code pour créer des fonctions spécifiques pour votre page .

L’exemple suivant est utilisé pour ouvrir une vidéo YouTube dans une fenêtre contextuelle (également appelée PopUp ou Lightbox) en appuyant simplement sur un bouton .

Code JQuery qui déclenchera la fonction popup

<script type = «text / javascript»>

(fonction ($) {

$ (document) .ready (fonction () {

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

$ ((‘popup-video’). magnificPopup ({

disableOn: 100,

tapez: ‘inframe’,

mainClass: ‘mfp-fade’,

RetraitDélai: 160,

préchargement: faux,

fixedContentPos: faux

});

});

}) (jQuery)

</script>

Pour changer la couleur d’arrière-plan de la fenêtre qui apparaîtra une fois que la personne a appuyé sur le bouton, le code suivant est appliqué:

.mfp-bg {

Contexte: # 673ab7;

}

Si vous souhaitez définir une autre couleur, il vous suffit d’insérer le code pour lequel vous souhaitez le modifier et l’enregistrer.

Avantages de l’utilisation de Divi dans WordPress

En plus de nous permettre d’ouvrir une vidéo ou PopUp dans une fenêtre pop-up , ce constructeur possède également de nombreuses vertus dont vous pouvez profiter au fur et à mesure que vous commencez à la jouer dans vos créations.

C’est un constructeur avec une méthode d’utilisation très simple, qui s’adapte à plusieurs langues et styles de conception pouvant être intégrés dans la communauté WordPress.

À son tour, il intègre le style de conception réactif , pouvant ainsi intégrer des éléments qui ne peuvent être visualisés que sur des ordinateurs ou des appareils.

L’édition de son contenu se fait en direct, vous n’aurez donc pas besoin d’appuyer sur un bouton « Aperçu » pour pouvoir voir à quoi ressemble la page à chaque modification.

De plus, vous n’avez pas besoin de connaître le langage HTML et CSS pour créer des styles, et si vous en avez les connaissances, cela vous permet de personnaliser le code de chaque élément.

Chaque design que vous créez peut être stocké dans une » Bibliothèque » afin qu’il soit à votre disposition lorsque vous souhaitez le réutiliser sur n’importe quelle autre page ou entrée.

Il dispose également de plusieurs outils qui rendront votre page plus attrayante et plus facile à utiliser pour le lecteur. Tout comme la possibilité d’ inclure BreadScrumbs pour améliorer le référencement , réduisez la barre latérale pour améliorer la lecture du lecteur ou corrigez le pied de page .

Enfin, grâce à sa mise à jour constante, vous pourrez maintenir la sécurité de votre site Web et de son contenu au sein de la plateforme.