Le module Curseur de Défilement également appelé Slider en anglais apporte de nombreuses fonctionnalités comme l’utilisation de l’effet parallaxe ou de vidéo en arrière plan. En s’inspirant du module En-tête plein écran, nous allons voir ici comment créer un Slider plein écran.

Etape 1 : Ajout du module Curseur de défilement

Pour cela, ajouter une Section plein largeur > insérer un module > Curseur de défilement plein écran

Aller ensuite dans l’onglet Personnaliser CSS et dans Classe CSS ajouter une classe appelé “et_fullscreen-slider”

Revenir ensuite sur le premier onglet Paramètres Généraux puis Ajouter nouveau Diapo.

Puis remplir les différents champs :

  • En-tête: [entrer votre titre]
  • Texte de bouton : [entrer votre texte]
  • URL bouton : [entrer votre lien URL pour le bouton]
  • Image de fond : [ajouter une image]

Répétez ces étapes pour chaque diapo créée.

Sauvegardez et Quittez.

Etape 2 : Ajouter le code CSS et Javascript

A partir du dashboard WordPress, allez à Divi > Options du thème > et dans l’onglet Général aller à Personnaliser CSS et ajoutez ce code :


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

Maintenant, allez sur l’onglet Intégration et ajouter le code Javascript ci-dessous dans Ajouter ligne de code à la < head > de votre blog :


<script>
(function($) {
$(window).on('load resize', function() {
$('.et_fullscreen_slider').each(function() {
et_fullscreen_slider($(this));
});
});
function et_fullscreen_slider(et_slider) {
var et_viewport_width = $(window).width(),
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) {
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>

Et voilà !

Conclusion

Vous pouvez maintenant créer un Slider plein écran sur Divi grâce à ce tutoriel élaboré par ElegantThemes. Si vous avez des questions, n’hésitez pas à ajouter un commentaire 😉