Créer un Slider plein écran avec Divi

Snippet

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 😉

7 Commentaires

  1. daniel edery

    Bonjour j ai pris le theme style shop sa marche pas ????

    Réponse
  2. Fabien

    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)

    Réponse
    • Anne-Laure VRL

      Merci, je ne comprenais pas pourquoi ça ne marchait pas pour moi, mais en corrigeant cette erreur tout fonctionne parfaitement

      Réponse
  3. Florian

    Bonjour,
    Comment intégrer un ordre de défilement aléatoire dans le diapo ? Afin que ce ne soit pas toujours la même image qui soit présente en premier.

    Merci de votre aide

    Réponse

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *