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

Texte : "Découvrir nos services"
Lien : #section-services (ID de l'élément à atteindre)
Ouvrir dans un nouvel onglet : Oui/Non (généralement Non pour les ancres)

Élément cible

Élément cible : section-services
(ID de la section sans le # - sera ajouté automatiquement)

Paramètres de défilement

Vitesse de défilement : 800ms (200-2000ms)
Plus faible = Plus rapide, Plus élevé = Plus lent

Décalage de défilement

Valeur : 80px (ou rem, em, vh, %)
Unité : px (pixels), rem, em, vh (viewport height), % (pourcentage)

💡 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

Icône : Sélectionner depuis la bibliothèque Elementor
Bibliothèque : Font Awesome, Eicons, etc.

Position de l'icône

Position : Gauche / Droite du texte
Espacement : 10px (distance entre icône et texte)

🆔 Onglet Contenu > Paramètres avancés

ID personnalisé

ID du bouton : mon-bouton-personnalise
(Sans le #, caractères autorisés: A-z, 0-9, tiret bas)

---

🎨 Personnalisation visuelle

🎭 Style du Bouton

État Normal

Couleur du texte : #ffffff (blanc)
Couleur d'arrière-plan : #dc2626 (rouge Metal Rouge)
Bordure : Type, largeur, couleur
Rayon des bordures : 5px (coins arrondis)
Ombre portée : Configuration complète disponible

État Hover (au survol)

Couleur du texte : #ffffff
Couleur d'arrière-plan : #b91c1c (rouge plus foncé)
Transition : 300ms (durée de l'animation)
Transform : Scale, rotate, translate possibles

État Focus (sélection clavier)

Contour : Couleur et épaisseur de la bordure de focus
Accessibilité : Améliore la navigation clavier

📏 Dimensions et Espacement

Taille du bouton

Taille : Petite / Moyenne / Grande / Personnalisée
Padding : Espacement interne (haut, droite, bas, gauche)
Marge : Espacement externe responsive

Largeur du bouton

Largeur : Auto / Pleine largeur / Personnalisée
Largeur personnalisée : Valeur précise en px, %, rem
Alignement : Gauche / Centre / Droite

🔤 Typographie

Police et taille

Famille de police : Hériter du thème / Personnalisée
Taille de police : 16px (responsive configurable)
Poids : Normal / Gras / Extra-gras
Style : Normal / Italique

Formatage du texte

Transformation : Aucune / Majuscules / Minuscules / Capitalize
Décoration : Aucune / Souligné / Barré
Espacement des lettres : 0px (ajustement fin)

---

🎯 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

Section "À propos" → ID: about → Bouton: #about
Section "Services" → ID: services → Bouton: #services  
Section "Contact" → ID: contact → Bouton: #contact

Menu de navigation

Bouton "Accueil" → #hero
Bouton "Notre équipe" → #team
Bouton "Nos projets" → #portfolio
Bouton "Nous contacter" → #contact-form

---

🔧 Configuration avancée

⚡ Paramètres de performance

Vitesse optimale

Pages courtes (< 3 sections) : 600-800ms
Pages moyennes (3-6 sections) : 800-1000ms
Pages longues (> 6 sections) : 1000-1200ms

Décalage intelligent

Header fixe standard : 80px
Header avec sous-menu : 120px
Pas de header fixe : 0px
Header responsive : Utiliser rem ou vh

🎨 Styles personnalisés

Classes CSS disponibles

/* Bouton principal */
.metal-rouge-button {
    /* Vos styles personnalisés */
}

/* État de défilement actif */
.metal-rouge-button.scrolling {
    opacity: 0.8;
    transform: scale(0.98);
}

/* Icône du bouton */
.metal-rouge-button .mr-button-icon-left,
.metal-rouge-button .mr-button-icon-right {
    /* Styles d'icône */
}

📱 Responsive avancé

Décalages responsives

Desktop : 80px
Tablette : 60px
Mobile : 40px

Tailles de bouton

Desktop : Padding 15px 30px
Tablette : Padding 12px 24px
Mobile : Padding 10px 20px

---

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Fonctionnement

• Ancres créées et nommées correctement

• Boutons configurés avec les bons liens

• Défilement fluide testé sur toutes les sections

• Décalage correct par rapport au header

• Vitesse appropriée pour la longueur de page

Apparence

• Couleurs cohérentes avec la charte graphique

• Typographie harmonieuse avec le site

• Icônes alignées et bien espacées

• États hover visuellement distincts

• Responsive design testé sur mobile/tablette

Accessibilité

• Navigation clavier fonctionnelle (Tab, Entrée)

• Contrastes suffisants pour la lisibilité

• Focus visible pour les utilisateurs clavier

• Texte du bouton descriptif du contenu cible

🔍 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

❌ Éviter : section1, div2, element3
✅ Préférer : about-us, our-services, contact-form

❌ Éviter : À Propos, Nos Services
✅ Préférer : about, services (sans espaces ni accents)

🚀 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