Module slider de Divi : modifier sa hauteur et faire un slider plein écran

par Pierre Bichet | 26 avril 2018 | Tutoriels Divi | 20 commentaires

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 ?

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

FAUGERE David sur 26 avril 2018 à 09h38

Merci pierre pour ce tuto, pourrais tu aussi nous expliquer comment vous avez fait pour l’animation sur l’image de l’écran d’accueil du site divi-community qui s’agrandi lentement.

David
Pierre sur 26 avril 2018 à 09h59

Bonjour David et merci !
Le header de l’accueil est fait avec le plugin qui propose plusieurs options complémentaires au module par défaut de Divi.
lecerf sur 7 juillet 2018 à 12h27

Bonjour,
Merci beaucoup pour ce tuto qui m’a solutionner les problèmes d’adaptations d’images en slider plein écran. j’en était venu à chercher une extension slider gratuit mais j’ai besoin aussi de la fonction parallax qui n’est pas sur les versions gratuites de ces extensions.
milles merci encore
Pierre sur 9 juillet 2018 à 12h18

À ton service, c’est super si ça a pu t’être utile !
Matheo sur 11 août 2018 à 13h20

Bonjour,
Merci pour ce tuto très pratique mais qui ne marche malheureusement pas pour moi…
La section s’adapte en effet à la hauteur de mon écran mais par contre lorsque je mets une image de fond sur mes slides l’images ne prend qu’une partie de l’écran et me laisse un rectangle gris… Mais malgré ça les flèches de défilements sont bien placées au centre de l’écran.. Auriez-vous une solution ?
Julien sur 20 août 2018 à 15h58

Bonjour. As-tu essayé de donner une taille de 100% à tes images?
Alain sur 8 juillet 2019 à 08h56

Bonjour,
J’ai mis en place ce script. Il fonctionne à condition qu’il n’y ait pas de titre et/ou de texte dans la diapo. Sinon, la hauteur redevient “normale”.
Avez-vous une solution à ce problème ?
Cordialement,
Alain
Julien Guiard sur 12 juillet 2019 à 08h52

Bonjour, difficile à dire comme ça, il faudrait voir sur le site directement 😉
Alain sur 12 juillet 2019 à 09h37

Bonjour,
Merci pour la prise en compte de ma demande.
Mais en fait, je n’avais pas assez fouillé les possibilité de DIVI : il suffit d’activer : Plein écran ! Et là tout est bon.
Désolé d’avoir poster une demande qui ne sert pas à grand chose.
OLIBE sur 13 octobre 2019 à 18h19

Merci pour cet article !
Nico sur 5 février 2020 à 17h49

Bravo et merci pour ce tuto.

Ca marche pour moi, cela m’a bien aidé merci. Mais à la place du texte j’aimerai insérer un logo (ne faire défiler que des photos à l’arrière et laisser mon logo fixe centré), comment faire car du coup si j’insère l’image elle reste à gauche.

Merci pour votre aide et bonne continuation.
Vincent sur 17 février 2020 à 12h06

Bonjour,
Merci pour beaucoup pour ce tuto vraiment top.
J’ai eu un petit souci en le mettant en place: mon slider passe sous le menu ce qui rogne le haut de l’image.
Est-il possible de bloquer le slider pour qu’il commence sous le menu ?
Merci par avance
Julien Guiard sur 20 février 2020 à 07h44

Bonjour; as-tu essayé de modifier la marge supérieure du module?
Sébastien sur 3 mars 2020 à 10h23

Merci pour le tuto ! Tout à fait d’accord quand à l’utilisation d’un slider : “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.”
Du coup dans cette idée là, comment pourrions nous passer notre slider d’images plein écran en background de la page et ainsi ajouter du contenu (via les autres module de DIVI) en premier plan et non pas en dessous dans la suite de la page ?

Merci pour vos retours !
Pierre Bichet sur 3 mars 2020 à 12h02

À tester en détails, mais quelques règles CSS pour attribuer au slider une position fixe et un z-index inférieur à celui du contenu de la page devraient faire l’affaire.
Sébastien sur 3 mars 2020 à 12h07

Merci !
lecerf sur 8 avril 2020 à 12h48

Bonjour,

pour info :

J’ai suivi ce tuto pour faire ma page d’accueil en pleine page mais j’avais un problème d’un petit espace blanc en bas de page. Je n’utilise pas le pied de page et j’avais utiliser ce code :
#main-footer {
display: none;
}

en le changeant par :
.footer-bottom {
display: none;
}
çà a résolu mon problème

merci
Sébastien sur 24 avril 2020 à 10h50

Bonjour, merci pour ce tuto, cependant j’ai un petit soucis, sur iphone 6 par exemple, le fond ne se met pas plein écran de suite, je dois basculer le téléphone plusieurs fois pour avoir un affichage plein écran.

D’avance merci pour votre réponse,

Bonne journée.
Sabrina sur 13 novembre 2020 à 10h56

Bonjour

Comment faire pour avoir un titre figer sur un défilement de diapo? Impossible de le faire
Merci pour votre aide
Pierre Bichet sur 16 novembre 2020 à 17h32

Il te suffit d’ajouter le même titre sur toutes tes diapos et de supprimer l’animation de celui-ci en précisant animation-name: none; dans ton module diapo, onglet “avancé -> personnaliser CSS -> titre de la diapo”.