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;
} .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>
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 😉
Bonjour j ai pris le theme style shop sa marche pas ????
https://imageshack.com/a/img924/1442/i4fJEa.png
Bonjour, il y a une faute sur le nom de la classe au début de l’étape 1 (Aller ensuite dans l’onglet Personnaliser CSS et dans Classe CSS ajouter une classe appelé “et_fullscreen-slider”)
Il faut mettre « et_fullscreen_slider » !
C’est un « _ » (underscore) et non un « – » (tiret)
Merci, je ne comprenais pas pourquoi ça ne marchait pas pour moi, mais en corrigeant cette erreur tout fonctionne parfaitement