La gestion de la hauteur des sliders dans Divi est un peu obscure étant donné qu’il n’y a pas d’option dédiée dans le builder.
Voici donc quelques astuces qui pourront vous aider.
J’en profite également pour vous expliquer comment passer votre slider en affichage plein écran.

Modifier la hauteur d’un slider avec le Divi Builder

Bien qu’il n’y ait pas de champ ou curseur dédié permettant de modifier la hauteur des slides dans le builder, il y a une petite astuce qui consiste à jouer sur la marge interne haute et basse (le padding-top et le padding-bottom en CSS).
Une fois votre module Diapo inséré, allez dans Paramètres -> Style -> Espacement -> Personnaliser la marge interne et saisissez les valeurs qui vous conviennent.

Je précise que ces réglages se fond au niveau des paramètres du module et non de ceux de chaque diapo ; ceci afin de conserver une hauteur constante entre chaque slide.

Ci-dessous un exemple avec une marge interne haute et basse à 200 px.

Et ci-dessous un autre exemple avec une marge interne haute et basse à 20 px.

À vous maintenant de trouver les réglages qui correspondent au rendu que vous recherchez.
Vous pouvez utiliser des valeurs différentes pour la marge haute et la marge basse mais gardez à l’esprit que ceci aura un impact sur le centrage vertical de l’image de fond et du contenu de chaque slide.

Ce qui est pratique avec cette technique, c’est qu’on bénéficie de l’ajustement des dimensions sur tablette et mobile.
Ainsi vous pourrez régler finement la hauteur de votre slider sur les différentes tailles d’écran, comme le montre la capture d’écran ci-dessous.

Modifier la hauteur d’un slider en CSS

Bien sur, il est également possible de définir la hauteur des sliders avec les feuilles de styles.
Pour ce faire, il faut donc ajouter du code CSS dans Divi -> Options du thème -> Personnaliser CSS ou dans le fichier style.css de votre thème enfant.

Comment définir une même hauteur pour tous les sliders de votre site

/* Ordi */
.et_pb_slider .et_pb_slide .et_pb_container {
	height: auto !important;
	min-height: 600px !important;
}
/* Tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	.et_pb_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}
/* Téléphone */
@media only screen and (max-width: 767px) {
	.et_pb_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 400px !important;
	}
}

/* Ajuster le padding */
.et_pb_slider .et_pb_slide {
	padding-bottom: 0px !important;
}
.et_pb_slider div.et_pb_slide_description, 
.et_pb_slider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
	padding-top: 1%;
	padding-bottom: 1%;
}

Détaillons ces quelques lignes de code

Comme vous pouvez le voir en commentaires, le code est séparé en 4 parties distinctes :

• la hauteur du slider sur les écrans d’ordi
• la hauteur du slider sur les écrans de type tablette
• la hauteur du slider sur les écrans de type smartphone
• l’ajustement du padding pour que le contenu du slider soit bien centré verticalement

Il vous suffit d’ajuster les valeurs de min-height pour les 3 tailles d’écrans.

Comment définir une même hauteur pour tous les sliders présents sur une même page

/* Ordi */
.page-id-999 .et_pb_slider .et_pb_slide .et_pb_container {
	height: auto !important;
	min-height: 600px !important;
}
/* Tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	.page-id-999 .et_pb_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}
/* Téléphone */
@media only screen and (max-width: 767px) {
	.page-id-999 .et_pb_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 400px !important;
	}
}

/* Ajuster le padding */
.page-id-999 .et_pb_slider .et_pb_slide {
	padding-bottom: 0px !important;
}
.page-id-999 .et_pb_slider div.et_pb_slide_description, 
.page-id-999 .et_pb_slider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
	padding-top: 1%;
	padding-bottom: 1%;
}

Détaillons ces quelques lignes de code

Le principe est le même qu’expliqué précédemment, hormis qu’il faut préciser la classe permettant de cibler la page à laquelle vous souhaitez restreindre vos ajustements.
Remplacez 999 par l’identifiant de votre page.

Pour trouvez l’identifiant d’une page, une des méthodes consiste à utiliser les outils de développement du navigateur (lire notre tuto sur ce sujet) et repérer sur la balise body, la classe page-id-999 (999 étant donné à titre d’exemple).

Comment définir la hauteur d’un slider bien précis

Il est toujours intéressant de savoir que Divi numérote ses sliders en leur ajoutant une classe du type .et_pb_slider_0 pour le premier slider de la page, .et_pb_slider_1 pour le deuxième, etc.
Mais le plus simple est d’ajouter une classe au slider pour lequel on souhaite ajuster la hauteur en allant dans le module diapo Paramètres -> Avancé -> ID et classes CSS -> Classe CSS Ainsi notre code CSS ressemblera à ça (on remplace la classe .et_pb_slider par notre classe personnalisée, ici .mon_slider) :

/* Ordi */
.mon_slider .et_pb_slide .et_pb_container {
	height: auto !important;
	min-height: 600px !important;
}
/* Tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	.mon_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 500px !important;
	}
}
/* Téléphone */
@media only screen and (max-width: 767px) {
	.mon_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		min-height: 400px !important;
	}
}

/* Ajuster le padding */
.mon_slider .et_pb_slide {
	padding-bottom: 0px !important;
}
.mon_slider div.et_pb_slide_description, 
.mon_slider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
	padding-top: 1%;
	padding-bottom: 1%;
}

Créer un slider plein écran avec le Divi builder

Pour terminer, voyons comment combler une autre lacune de Divi : à savoir l’impossibilité de passer un slider en plein écran via le module Diapo.

Insérez un module

Commencez par ajouter une nouvelle section dans votre page :

• Si vous êtes en train de travailler dans le builder classique (en backend), choisissez Section en pleine largeur
• Si vous êtes en train de travailler dans le visual builder (en frontend), choisissez Plein écran
  Et oui, une fois encore, nous devons faire face aux problèmes de traductions du thème qui peuvent réellement embrouiller l’utilisateur…

Ceci fait, insérez le module répondant au doux nom de Curseur de défilement plein écran et paramétrez-le selon vos besoins.

Dans ce module, ajoutez la classe slider-plein-ecran (ou une autre si vous le souhaitez) dans Paramètres -> Avancé -> ID et classes CSS -> Classe CSS

Une touche de CSS

Il vous faut maintenant réinitialiser sur 100% la hauteur du conteneur et du contenu de votre slider.
Pour ce faire, ajoutez ce quelques lignes de CSS dans Divi -> Options du thème -> Personnaliser CSS ou dans le fichier style.css de votre thème enfant.
(Pensez à changer la classe .slider-plein-ecran si vous avez choisi de la nommer différemment.)

.slider-plein-ecran .et_pb_slides,
.slider-plein-ecran .et_pb_slide,
.slider-plein-ecran .et_pb_container {
    min-height: 100% !important;
    height: 100% !important;
}

Et un soupçon de JavaScript

Pour terminer, il vous faut calculer la hauteur réelle de votre slider car celle-ci dépend de plusieurs paramètres :

• si vous êtes connecté à l’admin de votre site et que la barre d’administration est affichée
• si vous avez affiché la barre de menu secondaire
• si vous utilisez bien un menu horizontal et en fonction de sa hauteur

<script>
    (function($) {
        $(window).on('load resize', function() {
            $('.slider-plein-ecran').each(function() {
                et_fullscreen_slider($(this));
            });
        });

        function et_fullscreen_slider(et_slider) {
            var et_viewport_height = $(window).height(),
                et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
                $admin_bar = $('#wpadminbar'),
                $main_header = $('#main-header'),
                $top_header = $('#top-header');
            $(et_slider).height('auto');
            if ($admin_bar.length) {
                var et_viewport_height = et_viewport_height - $admin_bar.height();
            }
            if ($top_header.length) {
                var et_viewport_height = et_viewport_height - $top_header.height();
            }
            if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
                var et_viewport_height = et_viewport_height - $main_header.height();
            }
            if (et_viewport_height > et_slider_height) {
                $(et_slider).height(et_viewport_height);
            }
        }
    })(jQuery);
</script>

Où insérer ce code ?

• Si vous n’utilisez qu’un seul slider plein écran sur votre site, le mieux est d’ajouter un module Code en pleine largeur juste avant votre module Curseur de défilement plein écran, ainsi ce code ne sera chargé que sur la page où se trouve votre slider
• Si vous utilisez plusieurs sliders plein écran sur votre site, collez ce code dans Divi -> Options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog

(Pensez à changer la classe .slider-plein-ecran en ligne 4 si vous avez choisi de la nommer différemment.)

Le mot de fin

Voila, maintenant vous êtes parés pour bien gérer la hauteur de vos sliders.
Gardez tout de même à l’esprit que d’un point de vue ergonomique, les sliders ne sont pas forcément adaptés quand il s’agit d’afficher du contenu important car il est évident que lorsqu’une info est visible, les autres ne le sont pas… et je ne connais personne qui reste à regarder un slider défiler ou très peu qui prennent le temps d’utiliser les flèches pour passer d’un slide à l’autre.
Personnellement, je trouve que la meilleure utilisation qu’on puisse faire d’un slider est encore pour faire défiler quelques photos afin d’animer un peu son site.
Et vous qu’en pensez-vous ?

Partager