Elementor #1501

Bouton 1
Cliquez ici

✅ Méthode 1 – Sticky natif d’Elementor (recommandée)

(Fonctionne avec Elementor gratuit, options avancées avec Elementor Pro)

Étapes :

  1. Sélectionne ton bouton

    • Clique sur le widget Bouton

  2. Paramètres avancés

    • Onglet Avancé

    • Section Positionnement

    • Position → Fixe

  3. Choisis l’emplacement

    • Horizontal : gauche / droite / centré

    • Vertical : haut / bas

    • Ajuste les offsets (ex. : bas = 20px)

  4. Responsive (important)

    • Toujours dans Avancé

    • Masquer le bouton sur :

      • Ordinateur

      • Tablette

      • Mobile

        👉 Idéal pour afficher un bouton sticky uniquement sur mobile (ex : “Appeler”).

⭐ Cas d’usage courant

  • Bouton Appeler

  • Bouton S’inscrire

  • Bouton Contact

  • Bouton Retour en haut

✅ Méthode 2 – Sticky avec une colonne (plus flexible)

Utile si tu veux plusieurs boutons sticky.

  1. Mets tes boutons dans une colonne

  2. Clique sur la colonne

  3. Onglet Avancé

  4. Position → Fixe

  5. Ajuste :

    • Largeur de colonne

    • Z-index (ex : 9999)

💡 Astuce :

Active “Limiter à la zone” pour éviter les conflits avec le footer.

✅ Méthode 3 – Sticky uniquement après scroll (Elementor Pro)

(Très pro visuellement)

  1. Sélectionne le bouton

  2. Onglet Avancé

  3. Effets de mouvement

  4. Active Sticky

  5. Choisis :

    • Haut / bas

    • Afficher après défilement (ex : 300px)

    • Masquer après défilement

👉 Parfait pour un CTA discret.

✅ Méthode 4 – Sticky avec CSS (si besoin précis)

Pour un contrôle total.

Exemple CSS :

.bouton-sticky {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}

Étapes :

  1. Ajoute une classe CSS au bouton (Avancé → Classes CSS)

  2. Colle le CSS dans :

    • Apparence → Personnaliser → CSS additionnel

      ou

    • Elementor → CSS personnalisé (Pro)

 

Retour en haut