Comment créer une bannière flottante dans Divi (sans plugin)

Publié: 2024-10-08

Les bannières flottantes attirent efficacement l'attention des utilisateurs et présentent des messages clés ou importants sans perturber l'expérience utilisateur globale. Lorsqu'elles sont combinées à un déclencheur de défilement, ces bannières apparaissent dynamiquement à mesure que les visiteurs parcourent la page, améliorant ainsi l'engagement des utilisateurs en offrant des informations opportunes au bon moment.

Cet article vous guidera dans la création d’une bannière flottante visuellement attrayante et efficace dans Divi sans l’aide de plugins tiers supplémentaires. De la personnalisation de son apparence au déclenchement de son affichage en fonction du comportement de défilement, vous pouvez chronométrer stratégiquement l'apparition des bannières flottantes lors du défilement. Dans le même temps, vous pouvez également promouvoir efficacement des offres, des annonces ou des appels à l’action de manière fluide.

Comment créer la bannière flottante dans Divi basée sur le comportement de défilement (sans plugin)

Étape 1 : Créer ou modifier un modèle de corps personnalisé

Sur votre tableau de bord WordPress, accédez à Divi -> Theme Builder . Sur la page Theme Builder, créez un nouveau modèle de corps ou modifiez-en un existant en cliquant sur le bouton Ajouter un corps global ou personnalisé ou en sélectionnant le modèle que vous souhaitez modifier.

Pour cet exemple, nous afficherons la bannière flottante dans un seul modèle de publication, nous sélectionnons donc notre modèle Tous les messages pour le modifier.

Ajouter une nouvelle section

Une fois que vous êtes entré dans l’éditeur de modèles de corps personnalisé, créez une nouvelle section pour votre page. Pour que l'élément de bannière flottante paraisse proportionnel et pas trop grand sur votre page, nous définissons la taille de la section à 25 % de largeur.

Étape 2 : ajouter le contenu de la bannière flottante

Ajouter un module

Ensuite, nous allons ajouter le contenu de la bannière flottante. Cliquez sur le bouton « + » à l’intérieur de la section pour ajouter un nouveau module. Ensuite, sélectionnez n'importe quel module que vous souhaitez afficher sous forme de contenu de bannière flottante, tel que le module Texte, Bouton, Appel à l'action, etc. Pour cet exemple, nous sélectionnons le module Appel à l'action .

Personnaliser le module

Une fois que vous avez ajouté le module que vous souhaitez utiliser pour afficher le contenu de votre bannière flottante, la prochaine chose que nous ferons est de peaufiner et de styliser le module. Vous pouvez personnaliser le module selon vos préférences, pour cet exemple (module Appel à l'action), nous appliquons certaines modifications, telles que le remplacement du titre et du corps du texte, l'ajout d'un bouton et d'une URL de lien, la modification de la couleur du module d'arrière-plan, l'ajout d'une marge, ajout d'un rayon de bordure, etc.

  • Ajouter la classe CSS

Ensuite, ajoutez une classe CSS personnalisée appelée « floating-banner-content » dans l'onglet avancé du module.

Une fois que vous avez terminé de concevoir le contenu de la bannière flottante, n'oubliez pas d'enregistrer toutes les modifications.

Étape 3 : ajouter l'extrait CSS et JavaScript personnalisé

Ensuite, nous ajouterons l’extrait CSS et JavaScript personnalisé dans les options du thème Divi.

Ajouter le CSS personnalisé

Accédez à vos options de thème Divi et sélectionnez CSS personnalisé (Tableau de bord WordPress -> Divi -> Options de thème Divi -> Général -> CSS personnalisé ). Ensuite, copiez l'extrait CSS ci-dessous et collez-le dans le champ disponible. 

 Écran @media uniquement et (min-width : 768px) { .floating-banner-content {
  poste : fixe ;
  haut : 130 px ;
  gauche : 80 % ;
  transformer : traduireX(-50 %);
  box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2);
  indice z : 9999 ;
  opacité : 0 ;
  visibilité : cachée ;
  transition : opacité 0,3 s facilité d'entrée-sortie, visibilité 0,3 s facilité d'entrée-sortie ;
}
}

Écran @media uniquement et (min-width : 768px) { .floating-banner-content.active {
  opacité : 1 ;
  visibilité : visible ;
}
}

Ajouter le code JavaScript

Sur la page Options de Divi Them, accédez à l’onglet Intégration . Ensuite, collez l'extrait JavaScript ci-dessous dans le champ Ajouter du code au <head> de votre blog . 

 <script>
jQuery(document).ready(function($) {
    var bannière = $('.floating-banner-content');

    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        si (scrollTop >= 400) {
            bannière.addClass('active');
        } autre {
            bannière.removeClass('active');
        }
    });
});
</script>

Une fois les extraits CSS et JavaScript personnalisés ajoutés, appliquez les modifications en cliquant sur le bouton Enregistrer les modifications .

Pour voir le résultat, vous pouvez prévisualiser l'un de vos articles ou pages (selon l'endroit où vous placez l'élément de bannière flottante).

À quoi ont servi les codes CSS et JavaScript ?

Répartition du code CSS

  • @media only screen and ( min-width: 768px ) :
    • Cette requête multimédia cible spécifiquement les appareils dotés d'une largeur d'écran minimale de 768 pixels (c'est-à-dire les tablettes et plus). Cela garantit que la bannière flottante est adaptée aux appareils qui peuvent l’afficher confortablement.
  • .floating-banner-content :
    • Ce sélecteur cible les éléments avec la classe « floating-banner-content », qui est appliquée au module contenant le contenu de la bannière.
  • Styles pour le .floating-banner-content :
    • position: fixed; : Il restera en place même lorsque l'utilisateur fera défiler la page.
    • top: 130px; : Définit la position supérieure de la bannière à 130 pixels du haut de la fenêtre.
    • left: 80%; : Positionne la bannière à 80 % de la largeur de la fenêtre à partir du bord gauche.
    • transform: translateX(-50%); : Centre la bannière horizontalement en la translation de 50% vers la gauche.
    • box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : Ajoute une ombre subtile à la bannière pour plus de profondeur.
    • z-index: 9999; : garantit que la bannière apparaît au-dessus des autres éléments de la page.
    • opacity: 0; : Masque initialement la bannière en définissant son opacité à 0.
    • visibility: hidden; : Masque le contenu de la bannière jusqu'à ce qu'elle soit rendue visible.
    • transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : applique un effet de transition fluide lorsque l'opacité et la visibilité de la bannière changent.
  • .floating-banner-content.active :
    • Ce sélecteur cible les éléments avec la classe « floating-banner-content » qui a également la classe « active ». Cette classe est ajoutée à la bannière lorsqu'elle doit être visible.
  • Styles pour l'élément .floating-banner-content.active :
    • opacity: 1; : Rend la bannière visible en définissant son opacité à 1.
    • visibility: visible; : Affiche le contenu de la bannière.

Résumé du code JavaScript

Ce code JavaScript contrôle efficacement la visibilité de la bannière flottante en fonction de la position de défilement de l'utilisateur.

La bannière devient visible lorsque l'utilisateur fait défiler vers le bas un certain seuil ( 400 pixels dans ce cas).

Lorsque l'utilisateur remonte au-dessus du seuil, la bannière disparaît. Ce comportement offre une expérience utilisateur dynamique et engageante.

L'essentiel

Dans cet article, nous avons découvert comment créer une bannière flottante dynamique et attrayante dans Divi sans plugins supplémentaires. En suivant le guide étape par étape, vous avez appris à créer une bannière visuellement attrayante, à personnaliser son apparence et à contrôler sa visibilité en fonction du comportement de défilement.

La bannière flottante vous permet de transmettre des messages importants, de mettre en évidence des offres clés ou d'améliorer l'expérience utilisateur globale de votre site Web. Avec un peu de créativité et de personnalisation, vous pouvez créer une bannière flottante qui s'intègre parfaitement à la conception de votre site Web et captive vos visiteurs.