Créer une lightbox avec n’importe quel module Divi

9 Août 2022 | 0 commentaires

12 min de lecture

Dans ce tutoriel nous allons voir comment créer un effet de lightbox avec n’importe quel module de Divi. Cela peut être utile pour optimiser le contenu de la page en gagnant de l’espace et sans ouvrir une autre page. Par exemple vous pouvez insérer votre formulaire de contact ou d’inscription à la newsletter, des vidéos ou encore du contenu html dont vous ne pourriez pas réaliser la mise en page avec un plugin de lightbox classique.

1 – Créer la structure du contenu à afficher dans la lightbox

Commencez par créer une section séparée qui contiendra les modules que vous souhaitez présenter dans la lightbox. Cette section sera masquée par défaut et s’affichera uniquement lors d’un clic sur un bouton défini.

Ajoutez un background semi-transparent à la section afin que votre contenu soit bien lisible en se superposant à votre page. Dans mon cas j’ai opté pour un fond noir à 70% d’opacité.

Dans les réglages avancés de la section, ajoutez la class css et-lb-content-1.

Créer une lightbox avec Divi

Insérez des rangées pour présenter votre contenu en plusieurs colonnes, puis les modules et éditez les tyles pour chacun d’eux.

2 – Ajouter le bouton pour ouvrir la lightbox

Maintenant vous devez ajouter le bouton qui permettra d’afficher le contenu de la lightbox.

Le bouton doit être placé dans une autre section où vous avez ajouté le contenu de la lightbox, sinon il ne sera pas accessible tout comme le contenu de la lightbox par défaut.

Créez un bouton dans une autre section, ajoutez lui la class et-lb-btn-1 dans les paramètres avancés du bouton, et # en placeholder du lien du bouton.

Réaliser une lightbox sans plugin avec Divi

3 – Ajouter le code pour faire fonctionner la lightbox

La dernière chose à faire pour la lightbox puisse fonctionner c’est d’ajouter le CSS et Javascript dans les options du theme Divi.

Ajoutez le css suivant dans « WP admin / Apparence / personnaliser / CSS additionnel » :

body:not(.et-fb-root-ancestor) [class*='et-lb-content'] {
position:fixed;
visibility:hidden;
top:0px;
z-index:999999;
min-height:100%;
transition:all .2s 0s;
width: 100%;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content'] .et_pb_row {
position:relative;
top:50px;
}
.et-lb-open {
visibility:visible!important;
width:100%;
}
span.et-lb-close {
font-size:46px;
right:-1vw;
margin-top:-51px;
display:block;
color:#fff; /* COLOR OF THE CLOSING ICON*/
padding:10px;
cursor:pointer;
font-weight:bold;
font-family:etmodules;
z-index:99999999999999;
position:absolute;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content']:not(.et-lb-open) {
transform:scale(.3);opacity:0;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-btn'] {
cursor:pointer;
}

Ajoutez ensuite le script suivant dans « WP admin / Divi / Option du theme / L’intégration / Ajouter ligne de code à la <head> de votre blog » :

<script>
(function($) {
  $(document).ready(function() {
	 $('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"]  > .et_pb_row:first-child');
	$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
    $("[class*='et-lb-btn']").each(function(index, element) {
      var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
      if (classes !== null) {
          $(element).on('click', function(e){
            e.preventDefault();
            $('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
          });
		  $('.et-lb-close').click(function(){
			  $("[class*='et-lb-content']").removeClass('et-lb-open');
		  });
      }
    });
  });
})(jQuery);
</script>
Faire une popup avec DIvi

4 – Ajouter plusieurs lightbox sur la même page

Comme pour n’importe quelle section du Divi builder, vous pouvez à tout moment revenir dessus pour ne modifier ses réglages et son contenu.

Attention à ne pas placer trop de modules dans une seule lighbox, un contenu trop long ne s’affichera pas sur des écrans plus petits (pas de scroll possible).

Il est préférable de scindé les contenus en présentant plusieurs lightbox.

Pour cela il suffit d’attribuer un numéro de class css supérieur à la section ainsi qu’au bouton correspondant.

Par exemple :

class css de la section : 

et-lb-content-2

class css du bouton :

et-lb-btn-2

Vous avez trouvé cet article utile ? N’hésitez pas à la partager et commenter si vous avez des suggestions d’amélioration.

Afficher un module Divi dans une lightbox

Contact

14 + 13 =

  • 25% 25%
  • 50% 50%
  • 75% 75%

Your content goes here. Edit or remove this text inline or in the module Content settings.

Le nom va ici

Votre titre va ici

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

14 + 3 =

Divi WordPress Theme

Derniers articles

Créer un slider full screen avec effet de zoom sur Divi

Les sliders ne sont pas recommandés pour tout type de projet. Aujourd'hui la plupart des webdesigner vous recommanderaient plutôt d'utiliser une image fixe en arrière-plan pour privilégier le chargement rapide de la page. Mais dans certains cas il est plus important...

Comment créer un site internet professionnel facilement ?

Dirigeants d'entreprise, entrepreneurs ou artisans, pour promouvoir votre activité sur internet il est nécessaire d'avoir un site attrayant, mais aussi fonctionnel pour les utilisateurs et optimisé pour le référencement sur les moteurs de recherche. Créer un site...

Catégories

Ressources

Divi Child Theme

Téléchargez gratuitement le Child Theme pour Divi ou apprenez à construire un theme pour n’importe quel Theme Wordpress.

Articles récents

Créer un slider full screen avec effet de zoom sur Divi

Créer un slider full screen avec effet de zoom sur Divi

Les sliders ne sont pas recommandés pour tout type de projet. Aujourd'hui la plupart des webdesigner vous recommanderaient plutôt d'utiliser une image fixe en arrière-plan pour privilégier le chargement rapide de la page. Mais dans certains cas il est plus important...

Comment créer un site internet professionnel facilement ?

Comment créer un site internet professionnel facilement ?

Dirigeants d'entreprise, entrepreneurs ou artisans, pour promouvoir votre activité sur internet il est nécessaire d'avoir un site attrayant, mais aussi fonctionnel pour les utilisateurs et optimisé pour le référencement sur les moteurs de recherche. Créer un site...

Pin It on Pinterest

Vous aimez cet article ?

Partagez-le avec vos amis !