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.

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

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é:

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

[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]TÉLÉCHARGER LE THÈME DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriels » target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]TÉLÉCHARGER LES TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Autres tutoriels Divi