Comme je l’avais promis, voici un tutoriel au sein duquel nous allons voir comment personnaliser le slider de DIVI en utilisant ses paramètres et du CSS pour ajouter des boites de navigation sous les images.

L’idée a germé sur Facebook au sein du groupe Elegant Themes User Community quand une discussion à démarré à propos de la possibilité de réaliser un slider avec des boites de navigations liées aux image, à l’aide de DIVI.

L’idée étant d’avoir trois images avec trois boites de navigation liées et un petit triangle qui surmonte la boite en rapport avec l’image sélectionnée. Au click sur une boite, on est dirigé vers l’image qui lui est associée.

Ainsi lorsque l’image liée à une boite de navigation n’est pas active, la boite ressemble à ceci

Et une fois l’image associée active elle ressemblera à ça

Quelqu’un a alors suggéré d’utiliser Javascript et une autre personne a suggéré que ce n’était pas nécessaire dans la mesure où DIVI utilisait déjà du javascript pour contrôler la navigation au sein des images du slider. Ainsi il est apparu qu’une solution purement en CSS devait permettre d’obtenir le résultat escompté, ajout des boites et du petit triangle marquant la sélection d’une image donnée.

J’ai trouvé l’idée sympathique et décidé de la mettre en pratique. Je sais qu’il existe plusieurs façons d’obtenir le résultat escompté (comme par exemple personnaliser le code php du module slider, ou en utilisant javascript, en utilisant des images…) mais le but ici est de proposer une solution basée sur l’existant et de n’utiliser que du CSS.

Le problème principal réside dans le fait qu’il n’existe aucun emplacement accessible pour insérer du texte au sein des balises <a> des contrôles de navigation. De surcroit, le texte initialement contenu dans les contrôles de navigation (le numéro de l’image) a été caché par une commande text-indent en négatif.

Ainsi pour insérer du « texte » dans nos boites, nous devons les cibler par leur numéro d’enfant. Le contrôle numéro UN sera le premier enfant de type <a> et ainsi de suite pour les autres contrôles…

Si nous voulons trois boites de navigation, nous devons leur donner la largeur de 100% / 3, ainsi chaque boite sera de 33.333333% de large. Si nous voulons quatre boites, nous devons leur donner une largeur de 25%.

En ciblant chaque boite avec son numéro d’enfant, nous pouvons lui ajouter du contenu (le titre de la boite), régler la couleur de son texte et de son arrière plan.

Voilà ce à quoi notre slider va ressembler

De manière à obtenir un résultat similaire, vous devez télécharger le fichier zip ci dessous et en extraire le fichier json :

Modèle de page avec Slider personnalisé

Vous devez ensuite importer le fichier .json au sein de la bibliothèque DIVI.

Ensuite il faudra ajouter une page et  télécharger le modèle de page importé depuis la bibliothèque. (Vous pourrez ensuite sauvegarder la section du Slider dans la bibliothèque pour l’importer ailleurs sur votre site, ou encors supprimer tout ce qui ne vous est pas utile sur le modèle de page.)

Ensuite il faudra ajouter le CSS suivant à votre thème enfant ou dans la section CSS personnalisé de DIVI (L’utilisation d’un thème enfant est toutefois vivement recommandée.)

/* SLIDER CSS - creaweb2b.com */

/* Remplacement de la position du bas des controles */

.testslider .et-pb-controllers {
bottom: -10px;
}

/* Couleur de fond de chaque boite */

.testslider .et-pb-controllers a:nth-child(1) {background-color:#895001!important;}
.testslider .et-pb-controllers a:nth-child(2) {background-color:#05b5c4!important;}
.testslider .et-pb-controllers a:nth-child(3) {background-color:#9ea507!important;}

/* Réglage des styles pour l'écriture du texte des boites */

.testslider .et-pb-controllers a::before {
color: #fff;
font-size: 25px;
text-shadow: 0 0 2px #666;
}

/* C'est ici qu'on détermine ce que l'on affichera comme titre pour chaque boite (remplacez le contenu entre parenthèses aprés content */

.testslider .et-pb-controllers a:nth-child(1)::before {
content: "Brandy";
}

.testslider .et-pb-controllers a:nth-child(2)::before {
content: "Sea sunrise";
}

.testslider .et-pb-controllers a:nth-child(3)::before {
content: "Green Lemon";
}

/* Transformation des contrôles en boîtes */

.testslider .et-pb-controllers a {
border-radius: 0;
display: inline-block;
font-size: 0; /* Ici on va masque le titre natif de chaque contrôle */
height: 60px;
margin-right: 0;
padding-top: 15px;
text-indent: 0;
width: 33.333333%; /* Ici on veut 3 boites - Si vous en souhaitez plus ou moins changez ce réglage en divisant 100% par le nombre de boites désirées  */
}

/* Ajout du petit triangle */

.testslider .et-pb-controllers a.et-pb-active-control::after {
background-color: inherit !important;
content: "";
display: block;
height: 25px;
margin-left: auto;
margin-right: auto;
position: relative;
top: -61px;
transform: rotate(45deg);
width: 25px;
z-index: 9;
}

/* Réglage de la hauteur du slider à 640px */

@media only screen and ( min-width:981px ) {
.testslider, .testslider .et_pb_container {
height: 640px !important;
}
.testslider, .testslider .et_pb_slide {
max-height: 640px;
}
}

/* Quelques réglages pour les écrans des tablettes et mobiles */

@media only screen and ( max-width:768px ) {
.testslider .et-pb-controllers {
height: 20px;
}
.testslider .et-pb-controllers a::before {font-size:8px;}
.testslider .et-pb-controllers a.et-pb-active-control::after {
height: 8px;
top: -31px;
width: 8px;
}
.testslider .et-pb-controllers a {
height: 20px;
padding-top: 0;
}
}

Des descriptions et boutons ont été ajoutés aux images. J’ai trouvé sympathique de rappeler la couleur de chaque boite pour le bouton de l’image associée. Si vous le souhaitez vous pouvez personnaliser ces réglages dans les paramètres de chaque image ou encore supprimer la description et le bouton.

Les images utilisées proviennent de Pixabay.