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 :

 .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 😉