Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Le module de curseur Divi pleine largeur a quelques fonctionnalités intéressantes, notamment la possibilité d’ajouter des curseurs avec parallaxe et arrière-plan vidéo. Une fonctionnalité qui le rendrait encore plus puissant est la possibilité de passer à un curseur plein écran. Le module d’en-tête Divi pleine largeur a déjà cette option plein écran. Nous avons donc pensé que ce serait une bonne idée de vous montrer comment ajouter la même fonctionnalité à ces curseurs pleine largeur.

L’ajout de fonctionnalités plein écran au module Divi Fullwidth Slider est extrêmement facile à mettre en œuvre avec quelques lignes de CSS et de Javascript. En seulement 5 minutes, vous pouvez convertir votre curseur pleine largeur en un curseur de mode plein écran qui s’étend sur tout l’écran lorsque la page se charge, tout comme ces en-têtes plein écran.

Commençons.

Implémentation de la fonctionnalité de curseur plein écran avec Divi

Étape 1: ajoutez un module de curseur pleine largeur et des diapositives

Ajoutez une section pleine largeur à l’aide de Divi Builder et cliquez sur « Insérer un module ».

Ajoutez un module de curseur pleine largeur.

Dans les paramètres du module slider pour toute la largeur sous CSS personnalisé, ajoutez une classe CSS nommée « et_fullscreen_slider ».

Ajoutez une nouvelle diapositive sous Paramètres généraux.

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

Titre: [enter your heading]
Texte du bouton: [enter your button text]
URL du bouton: [enter your button url]
Image de fond: [add your background image] (J’utilise une image de unsplash.com)

Répétez cette étape pour autant de diapositives que nécessaire.

Sortie sûre

Ajout de CSS et Javascript personnalisés

Accédez à dans le tableau de bord WordPress Divi → options de thème 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;
}

Ensuite, cliquez sur l’onglet Intégration et ajoutez le javascript suivant à la zone de texte intitulée « Ajouter du code à l’en-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_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 && !$('.et_vertical_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>


C’est ça!

Emballer

Vous disposez maintenant d’un curseur plein écran pour votre site Web. Utilisez cette option pour créer des curseurs magnifiques et efficaces pour votre zone de héros qui rempliront tous les écrans sur n’importe quel appareil.

J’espère que vous apprécierez cet ajout utile à votre site Divi.

Si vous avez des questions, n’hésitez pas à publier le sujet dans les commentaires.

De bas en haut!





Source link

Recent Posts