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

Avec plus de 901.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.

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#

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

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

Voulez-vous vendre vos produits sur internet ?

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress et créez facilement votre boutique en ligne. Parfait pour les débutants.

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

13 Partages
Partagez5
Tweetez1
Enregistrer7