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.)
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
Partager la publication "Module slider de Divi : modifier sa hauteur et faire un slider plein écran"
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.
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.
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.
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
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”.
À la recherche d’un plugin permettant d’aller plus loin avec Divi ? Vous êtes au bon endroit ! Aujourd’hui on vous présente l’extension “Divi Essential” qui possède 63 modules avancés et un total de 500 layouts. Tout est très facile à personnaliser et à styliser car...
Le ratio des images mises en avant des modules "blog" et "portefeuille" ainsi que les vignettes du module "galerie" de Divi ne convient pas toujours à la mise en page que l'on souhaite pour son site.Voyons donc comment le modifier avec quelques lignes de CSS. Le...
C'est une fonctionnalité que l'on croise de plus en plus régulièrement depuis quelques temps sur les sites mobiles et les applications : les menus horizontaux scrollables.Finis les menus hamburgers classiques sur lesquels il faut cliquer pour afficher le menu, la...
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
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.
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
À ton service, c’est super si ça a pu t’être utile !
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 ?
Bonjour. As-tu essayé de donner une taille de 100% à tes images?
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
Bonjour, difficile à dire comme ça, il faudrait voir sur le site directement 😉
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.
Merci pour cet article !
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.
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
Bonjour; as-tu essayé de modifier la marge supérieure du module?
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 !
À 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.
Merci !
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
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.
Bonjour
Comment faire pour avoir un titre figer sur un défilement de diapo? Impossible de le faire
Merci pour votre aide
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”.