Bouton WordPress amélioré

📖 Documentation du Widget Bouton Amélioré - Métal Rouge SAMR

Vue d'ensemble

Le widget Bouton Amélioré est un composant Elementor qui crée des boutons interactifs avec défilement fluide (smooth scroll) vers des sections spécifiques de votre page. Il offre une personnalisation visuelle complète et une navigation intelligente.

🚀 Fonctionnalités principales

✨ Navigation intelligente

  • Défilement fluide : Animation smooth vers les sections ciblées

  • Décalage personnalisable : Compensation automatique pour les en-têtes fixes

  • Ancres URL : Mise à jour de l'adresse dans le navigateur

  • Vitesse configurable : Contrôle de la rapidité du défilement

🎯 Ciblage précis

  • Liens d'ancrage : Navigation vers des ID d'éléments (#mon-element)

  • Validation automatique : Vérification de l'existence des éléments cibles

  • Fallback intelligent : Comportement par défaut si l'élément n'existe pas

🎨 Personnalisation complète

  • Icônes intégrées : Choix d'icônes avec positionnement gauche/droite

  • États visuels : Normal, hover, focus avec transitions

  • Responsive design : Adapté à tous les appareils

  • ID personnalisé : Attribution d'identifiant unique

📋 Installation et ajout du widget

Prérequis

  • WordPress 5.0+

  • Elementor Pro 3.0+

  • Plugin Métal Rouge SAMR Extension activé

Ajout sur une page

  1. Ouvrir l'éditeur Elementor sur votre page

  2. Rechercher "Bouton" dans le panneau widgets Métal Rouge SAMR

  3. Glisser-déposer le widget dans votre section

  4. Le widget se trouve dans "Métal Rouge SAMR"

⚙️ Configuration du contenu

🏷️ Onglet Contenu > Bouton

Texte et lien

Élément cible

Paramètres de défilement

Décalage de défilement

💡 Astuce : Le décalage compense les en-têtes fixes. Si votre header fait 8vh de haut, mettez 8vh de décalage. (8vh est la valeur actuelle du header de metal-rouge.fr)

🎨 Onglet Contenu > Icône

Choix de l'icône

Position de l'icône

🆔 Onglet Contenu > Paramètres avancés

ID personnalisé

🎨 Personnalisation visuelle

🎭 Style du Bouton

État Normal

État Hover (au survol)

État Focus (sélection clavier)

📏 Dimensions et Espacement

Taille du bouton

Largeur du bouton

🔤 Typographie

Police et taille

Formatage du texte

🎯 Configuration des ancres

✅ Création d'une ancre

Dans Elementor

  1. Sélectionner l'élément cible (section, colonne, widget)

  2. Onglet Avancé > Paramètres avancés

  3. ID CSS : Saisir mon-ancre (sans #)

  4. Sauvegarder la page

Dans le widget Bouton

  1. Élément cible : Saisir mon-ancre (même nom)

  2. Lien : #mon-ancre (avec #)

  3. Tester le fonctionnement

🎯 Exemples d'utilisation

Navigation de sections

Menu de navigation

🔧 Configuration avancée

⚡ Paramètres de performance

Vitesse optimale

Décalage intelligent

🎨 Styles personnalisés

Classes CSS disponibles

📱 Responsive avancé

Décalages responsives

Tailles de bouton

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Fonctionnement

Apparence

Accessibilité

🔍 Test complet du widget

Navigation basique

  1. Créer une ancre : Section → Avancé → ID CSS : test-section

  2. Configurer le bouton : Élément cible : test-section

  3. Cliquer sur le bouton : Vérifier le défilement fluide

  4. Observer l'URL : Doit afficher #test-section

Test responsive

  1. Mode desktop : Défilement avec décalage normal

  2. Mode tablette : Vérifier la vitesse et décalage

  3. Mode mobile : Test tactile et espacement adapté

  4. Navigation clavier : Tab + Entrée sur tous les appareils

💡 Bonnes pratiques

🎯 Nommage des ancres

🚀 Performance

  • Limiter le nombre de boutons avec défilement sur une page

  • Utiliser des ID uniques pour éviter les conflits

  • Tester régulièrement après ajout de contenu

  • Optimiser les images des sections ciblées

📱 Expérience utilisateur

  • Textes de boutons explicites : "Voir nos services" plutôt que "Cliquer ici"

  • Cohérence visuelle : Même style pour tous les boutons de navigation

  • Feedback visuel : États hover et active bien distincts

  • Accessibilité : Navigation clavier fonctionnelle

📝 Checklist rapide d'utilisation

➕ Créer un bouton de navigation

  1. Créer l'ancre cible : Section → Avancé → ID CSS

  2. Ajouter le widget Bouton dans votre contenu

  3. Configurer le lien : #nom-de-lancre

  4. Définir l'élément cible : nom-de-lancre (sans #)

  5. Ajuster vitesse et décalage selon vos besoins

  6. Personnaliser l'apparence selon votre charte

  7. Tester le fonctionnement avant publication

⚙️ Modifier un bouton existant

  1. Sélectionner le bouton dans Elementor

  2. Modifier le texte/lien si nécessaire

  3. Ajuster les paramètres de défilement

  4. Personnaliser l'apparence si besoin

  5. Tester les modifications avant sauvegarde

PrécédentListing des offres d'emploiSuivantDashicons (icones cachées de WordPress)

Mis à jour