skip to Main Content

Comment créer un slider en plein écran sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Le slider de pleine largeur est livré avec des fonctionnalités impressionnantes, y compris avec la possibilité d’ajouter des sliders avec des arrière-plans vidéo. Mais, une caractéristique qui la rend encore plus puissante est la possibilité d’étendre le slider pour s’afficher en mode plein écran. Nous allons donc vous montrer comment ajouter une fonctionnalité plein écran sur un slider.

L’ajout d’une fonctionnalité plein écran au module slider de Divi est extrêmement facile à mettre en œuvre avec quelques lignes de CSS et JavaScript. En seulement 5 minutes, vous pouvez convertir votre slider pleine largeur en slider de plein écran qui se dilate pour remplir tout l’écran, un peu comme les en-têtes plein écran.

La mise en œuvre de la fonctionnalité de slider plein écran sur Divi

Si vous n’avez pas lu notre tutoriel sur la présentation de l’interface de Divi, je vous invite à le faire.

Étape 1: Ajouter un slider avec des diapositives en mode pleine largeur

Utilisez le « Builder Divi », ajoutez une section « pleine largeur » et cliquez sur «  Insérer un module ».

Comment ajouter un module sur divi builder

Ajouter un module pleine largeur.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

ajouter un module slider sur Divi#

Dans les Paramètres du slider un plein écran, sous l’onglet « CSS Personnalisé », ajoutez une classe CSS appelée « et_fullscreen_slider ».

Css avancé modification de slider divi

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Dans « Paramètres généraux » ajouter une nouvelle diapositive.

Ajouter une diaspositive sur divi

Dans les paramètres des diapositives, sous paramètres généraux mettez à jour les éléments suivants :

  • Rubrique : [entrez votre rubrique]
  • Bouton Texte : [entrez votre texte bouton]
  • URL Bouton : [entrez votre URL bouton]
  • Image de fond : [ajouter votre image de fond] (j’utilise une image de unsplash.com)

Paramètres des diapositive divi

Répétez cette étape pour autant de diapositives que vous souhaitez ajouter.

Une fois que c’est fait, cliquez sur « Save & Exit ».

Comment ajouter du CSS & JavaScript personnalisé

À partir du tableau de bord WordPress, allez vers « Divi → Options du thème » et sous « Paramètres généraux », entrez le CSS suivant dans la zone de texte CSS personnalisé:

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

.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;
}

cliquez sur l’onglet suivant et ajoutez le javascript suivant à la zone de texte intitulée « Ajouter le code à la tête 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>

Pour finir

Maintenant, vous disposez d’un slider en mode plein écran pour votre site web. Utilisez-le pour créer des sliders efficaces en pleine largeur pour la plupart des navigateurs.

Si vous avez des questions, n’hésitez pas à nous les poser.

Autres tutoriels Divi

Cet article comporte 12 commentaires

  1. Bonjour, super tuto.
    Par contre il ne s’affiche pas plein écran sur iphone par exemple, en basculant l’iphone le slider s’affiche de temps en temps en plein écran mais pas tout le temps…. comme si il n’était pas responsive, vous auriez une idée pour résoudre ce petit problème ?

    D’avance merci,
    Cordialement,

  2. Bon après-midi, comment puis-je personnaliser la taille de la diapositive en fonction de la taille de l’image de la bannière afin que je ne peux pas recadrer l’image?

  3. Bonjour,
    Merci pour cet article. J’ai lu qu’il n’était pas forcement nécessaire d’installer un thème enfant avec Divi tant qu’on ne modifiait pas trop le CSS.
    Là, il y a quand même un peu de personnalisation…
    Donc conseillez-vous un thème enfant avant d’appliquer votre super Tuto ?
    D’avance merci pour tous vos bons conseils, je m’en inspire souvent 🙂

  4. Bonjour, très bon article !
    J’ai suivi ce qui était indiqué dans l’article mais mon slider ne s’affiche pas en plein écran sur DIVI.
    Pouvez-vous m’aider ? Je souhaiterai le mettre sur ma page d’accueil.

    Merci pour votre aide

  5. Bonjour,
    Je construis ma page d’accueil avec builder… lorsque je fais une previsualisation , je vois la page.
    Le problème c’est que lorsque j’enregistre ma page et que je l’ouvre à nouveau, le slider n’apparaît pas.
    Quelqu’ un pourrait-il m’aider svp ?

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
11 Partages
Partagez5
Tweetez1
Enregistrer5