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