Créer un Slider plein écran avec Divi

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