Un bouton flottant, calé en bas à droite, attire l’œil sans empiéter sur le contenu : c’est l’allié idéal pour booster vos conversions (contact, téléchargement, réservation…). Dans cet article, vous découvrirez pas à pas comment réaliser ce fameux bouton dans Divi, 100 % visuel et sans plugin externe. Nous appliquerons des réglages entièrement personnalisable afin que vous obteniez le résultat souhaité. Vous saurez le reproduire les yeux fermés !

Pourquoi choisir un bouton flottant ?

• Visibilité permanente : toujours à l’écran, même lors du scroll.
• Expérience mobile : sur smartphone, il remplace avantageusement une barre de menu trop chargée.
• Conversion : un call‑to‑action (CTA) isolé dans l’angle a un CTR nettement supérieur à un lien noyé dans la page.
• Simplicité : Divi propose déjà tous les outils pour le créer, inutile d’alourdir WordPress.

Pré‑requis à la création du bouton

1. Thème Divi (ou Divi Builder) installé et à jour.
2. Droits d’admin pour modifier les pages ou le Theme Builder.
3. Idéalement : une page de test ou un environnement de staging pour éviter de casser le site en prod.

Astuce : Si vous jonglez entre plusieurs sites clients, créez un layout global que vous pourrez importer/exporter via la Bibliothèque Divi. Vous gagnerez un temps fou !

 Ajouter le module de base

1. Accédez à l’onglet « Theme Builder » depuis le back-office WordPress
   
2. Sélectionnez la ou les pages sur lesquels vous souhaitez ajouter le bouton (Tous les articles ici).
3. Créez une section régulière en bas de page (peu importe l’endroit : elle deviendra flottante).
4. À l’intérieur, ajoutez un module « Résumé » (« Blurb » en anglais), à savoir qu’il est tout à fait possible également d’utiliser le module « Bouton ».
   

Pourquoi résumé plutôt qu’un bouton?
• Le module bouton ne permet pas d’y ajouoter une image facilement.
• Les styles Divi pour le module « Résumé » sont très complets ; on n’aura qu’à masquer le texte.

Remplacement des éléments

Onglet Contenu ▸ Texte

• Titre : vide (supprimez le placeholder).
• Texte : vide également.

Onglet Contenu ▸ Image/Icone

• Utiliser une icone (plus modulable qu’une image mais les 2 sont possibles)

Onglet Contenu ▸ Lien

• URL : collez votre cible (page de contact, messagerie, PDF…).
• Cible : “Nouvel onglet” si nécessaire.

Onglet Contenu ▸ Fond

• Couleur de fond: Transparent (rgba(0,0,0,0))

Style de l’icône dans un cercle

Onglet Style ▸ Icône

Réglage	Valeur
Taille icône	64px au choix
Couleur arrière‑plan icône	au choix (#000000 pour noir, #ff5c00 pour orange…)
Rayon de bordure	64px (pour obtenir un cercle parfait)
Rembourrage (Padding interne)	10px partout (ajustez selon la densité visuelle souhaitée)

Si vous changez la taille d’icône, adaptez la valeur de rayon de bordure à la moitié de la largeur totale (icône + padding) pour garder un cercle.

Positionnement avancé du bouton fixe

Onglet Avancé ▸ Identifiant & Classes CSS

• ID CSS : bouton-flottant
• Classe CSS : laissez vide (ou ajoutez‑en une si vous voulez plusieurs variantes).

Onglet Avancé ▸ Positionnement

Réglage Divi	Valeur
Position	Fixe
Emplacement	Bas droite
Décalage horizontal	24px
Décalage vertical	24px
Index Z	500 (ou plus si d’autres éléments flottants se superposent)

Divi encode automatiquement ces valeurs en inline‑CSS ; nous n’aurons donc pas à ajouter de code pour la position.

Ajouter du CSS manuel (facultatif mais recommandé)

Certaines versions de Divi appliquent des overflow:hidden ou des transitions par défaut. Pour un contrôle total, ajoutez ce snippet dans Apparence ▸ Personnaliser ▸ CSS additionnel (ou Divi ▸ Options du thème ▸ CSS personnalisé) :

/* Bouton flottant générique */
#bouton-flottant {
  transition: transform 0.2s ease-in-out;
}

/* Effet d’agrandissement au survol */
#bouton-flottant:hover {
  transform: scale(1.08) rotate(0.01deg); /* Le pivot évite un bug d'aliasing sur Chrome */
}

/* Variante : cacher sur écrans > 980px, montrer seulement sur mobile */
@media (min-width: 981px) {
  #bouton-flottant {
    display: none;
  }
}

Explications
• Le transition adoucit l’animation.
• Le léger rotate(0.01deg) corrige un tremblement d’antialiasing (astuce peu connue !).
• Le media query vous montre comment cibler ou exclure certains appareils.

Empêcher le bouton de passer sous le Footer

Le script ci‑dessous maintient le bouton au‑dessus du pied‑de‑page : dès que le footer entre dans la zone visible, la valeur bottom du bouton est recalculée pour rester à 20 px du bord inférieur de l’écran ; dès que le footer disparaît, le bouton revient à sa position initiale (20 px). Copiez/collez ce bloc dans Divi ▸ Options du thème ▸ Intégration ▸ “Ajouter du code au <body>” ou dans un module « Code » global, puis enregistrez :

<script>
document.addEventListener('DOMContentLoaded', function () {
    const button = document.getElementById('bouton-flottant');
    const footer = document.querySelector('footer');

    function adjustButtonPosition() {
        const footerRect = footer.getBoundingClientRect();
        const buttonRect = button.getBoundingClientRect();

        if (footerRect.top < window.innerHeight && footerRect.top > 0) {
            button.style.bottom = `${window.innerHeight - footerRect.top + 20}px`;
        } else {
            button.style.bottom = '20px';
        }
    }

    window.addEventListener('scroll', adjustButtonPosition);
});
</script>

 

Tester sur plusieurs appareils

1. Utilisez l’outil Responsive intégré à Divi (icône smartphone/tablette) pour vérifier la position.
2. Sur mobile, assurez‑vous que le pouce atteint confortablement le coin inférieur droit ; si votre thème a déjà un “cookie banner”, montez le bouton de quelques pixels.
3. Contrôlez les contrastes : WCAG AA recommande un ratio 3:1 entre l’icône et son fond pour les éléments graphiques.

Rendre le bouton fixe réutilisable avec Divi

Divi vous permet de transformer votre module en Élément global :

• Survolez la section (ou seulement le module) → clic droit → Enregistrer dans la bibliothèque.
• Cochez “Élément global” puis nommez‑le Bouton CTA Flottant.

Lorsque vous l’insérez ailleurs, toute modification appliquée se répercute sur chaque page : pratique pour de grandes boutiques.

Variantes et bonnes pratiques

Cas d’usage	Icône conseillée	Couleur cercle	Lien
Appel téléphonique	Logo Téléhpone	Vert ou bleu	tel:+33123456789
WhatsApp Support	Logo WhatsApp	Vert officiel	https://wa.me/xxxxxxxx
Messenger	Logo Messenger	Bleu Messenger	https://m.me/nompage
Panier rapide	Logo Panier	Couleur accent e‑commerce	/checkout
Remonter en haut	Flèche ↑	Gris clair	#top (ancre)

• Accessibilité : ajoutez un title et un aria-label au lien (Divi ▸ Attributs).
• Performance : limitez les ombres portées ou animations trop lourdes qui déclenchent le repaint sur mobile.
• SEO : le bouton étant un lien interne, utilisez l’attribut rel="noopener" pour les URL externes afin d’éviter les failles window.opener.

Aller plus loin avec le Theme Builder Divi

Si vous voulez que le bouton soit visible sur tout le site :

1. Divi ▸ Theme Builder.
2. Créez un Global Footer (ou Header, peu importe tant qu’il s’affiche partout).
3. Collez‑y notre module bouton déjà configuré.
4. Assurez‑vous que le footer a une hauteur minimale de 0 ; comme le bouton est position:fixed, il ne prendra pas d’espace.

C’est la façon la plus propre de maintenir un seul exemplaire du bouton.

Dépannage : 5 problèmes courants

Symptôme	Cause probable	Solution
Le bouton n’apparaît pas	ID mal orthographié ou module masqué	Vérifiez l’ID dans “Avancé” et l’onglet Visibilité
Il flotte au milieu de l’écran	Position réglée sur Absolute et non Fixed	Repassez à “Fixe”
Il passe sous un élément	Z‑index trop faible	Montez à 9999 si nécessaire
L’icône est écrasée	Conflit de line-height	Dans “Style ▸ Icône”, forcez Line-height: 1em via CSS
Il clignote au scroll	Problème de will-change sur Safari iOS	Ajoutez will-change: transform dans le CSS perso

Le bouton fixe au scroll avec Divi

Félicitations ! Vous savez maintenant créer un bouton fixe ultra‑léger, élégant et accessible directement depuis Divi.

En appliquant ces meilleures pratiques, votre call‑to‑action restera visible sans agacer l’internaute, tout en respectant les standards d’accessibilité et de performance. N’hésitez pas à décliner ce bouton (couleurs, icônes, médias ciblés) : Divi rend la personnalisation quasi illimitée.