Navigation par sections

📖 Documentation du Widget Navigation par Section - Métal Rouge SAMR

Vue d'ensemble

Le widget Navigation par Section est un composant Elementor intelligent qui crée automatiquement une navigation latérale pour toutes les sections de votre page. Il détecte les sections, génère des points de navigation cliquables et affiche le nom des sections sur mobile.

---

🚀 Fonctionnalités principales

✨ Navigation intelligente

• Détection automatique : Trouve toutes les sections avec des ID sur votre page

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

• Points interactifs : Indicateurs visuels de progression avec tooltips

• Navigation clavier : Support complet des flèches directionnelles

• Position dynamique : Suit automatiquement la section active

📱 Expérience mobile optimisée

• Indicateur de section : Affiche temporairement le nom de la section actuelle

• Position intelligente : Détecte automatiquement la meilleure position selon votre header

• Durée configurable : Contrôle du temps d'affichage de l'indicateur

• Navigation tactile : Optimisé pour les écrans tactiles

🎨 Personnalisation avancée

• Styles complets : Points, lignes, tooltips, indicateurs personnalisables

• Masquage intelligent : Cache automatiquement quand non utilisé

• Responsive design : Adapté à tous les appareils

• Animations fluides : Transitions et effets visuels professionnels

---

📋 Installation et ajout du widget

Prérequis

• WordPress 5.0+

• Elementor Pro 3.0+

• Plugin Métal Rouge SAMR Extension activé

• Sections avec ID : Vos sections doivent avoir des identifiants CSS

Ajout sur une page

1. Ouvrir l'éditeur Elementor sur votre page

2. Rechercher "Navigation par Section" dans le panneau widgets

3. Glisser-déposer le widget n'importe où sur votre page

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

---

🎯 Configuration des sections cibles

✅ Préparer vos sections

Étape 1 : Ajouter des ID aux sections

1. Sélectionner une section dans Elementor

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

3. ID CSS : Saisir un nom unique (ex: about-us)

4. Répéter pour toutes vos sections importantes

Étape 2 : Bonnes pratiques de nommage

✅ Recommandé :
- about-us (À propos)
- our-services (Nos services)
- contact-form (Formulaire de contact)
- team-members (Notre équipe)

❌ À éviter :
- Section1, div2 (non descriptif)
- À Propos (espaces et accents)
- section très longue (trop long)

---

⚙️ Configuration du widget

🎯 Onglet Contenu > Navigation

Position de la navigation

Position : Gauche / Droite de l'écran
Distance du bord : 30px (0-100px)

Comportement de défilement

Vitesse de défilement : 800ms (100-2000ms)
- 100-400ms : Très rapide
- 500-800ms : Normal (recommandé)
- 900-1500ms : Lent
- 1600-2000ms : Très lent

Décalage de défilement

Valeur : 80px (compensation pour header fixe)
Unité : px, rem, em, vh, dvh, %

💡 Exemples :
- Header fixe 8vh → Décalage 8vh
- Header responsive → Utiliser rem ou vh
- Pas de header fixe → 0 ou rien

Masquage automatique

Activer : Oui/Non
Cache la navigation quand elle n'est pas utilisée
Réapparaît au scroll ou survol

📱 Onglet Contenu > Paramètres Responsifs

Visibilité par appareil

Masquer sur Mobile : Oui/Non
Masquer sur Tablette : Oui/Non
Masquer sur Desktop : Oui/Non

Indicateur mobile

Position de l'indicateur :
- Automatique : Détection intelligente selon le header
- Au-dessus navigation : Fixe en haut
- Côté droit : Sur le côté droit de l'écran
- Personnalisée : Position manuelle avec décalage

Décalage depuis le haut : 20px (0-200px)
Durée d'affichage : 3 secondes (1-10s)

---

🎨 Personnalisation visuelle

🔵 Style des Points

États des points

Point normal :
- Taille : 12px (8-20px)
- Couleur : #cccccc (gris clair)
- Bordure : Optionnelle

Point actif :
- Taille : 16px (12-24px)  
- Couleur : #dc2626 (rouge Metal Rouge)
- Bordure : Plus épaisse

Point complété :
- Couleur : #4ade80 (vert de validation)
- Indication visuelle que la section a été parcourue

Espacement

Espacement entre points : 30px (20-50px)
Adapté automatiquement selon le nombre de sections

📏 Style de la Ligne de Progression

Ligne de fond

Couleur : #e5e7eb (gris très clair)
Largeur : 2px (1-5px)
Relie tous les points entre eux

Ligne de progression

Couleur : #dc2626 (rouge Metal Rouge)
Largeur : 2px (identique à la ligne de fond)
S'étend jusqu'au point actuel
Animation fluide lors du changement de section

🏷️ Style des Tooltips

Apparence

Couleur de fond : #1f2937 (gris foncé)
Couleur du texte : #ffffff (blanc)
Police : Héritée du thème
Taille : 14px (12-16px)
Padding : 8px 12px
Rayon des bordures : 6px

Comportement

Apparition : Au survol des points
Position : Dynamique selon l'espace disponible
Flèche : Pointe vers le point correspondant
Animation : Fondu d'apparition/disparition

📱 Style de l'Indicateur Mobile

Apparence générale

Couleur de fond : #1f2937 (gris foncé semi-transparent)
Couleur du texte : #ffffff (blanc)
Police : 16px, poids normal
Padding : 12px 20px
Rayon des bordures : 10px
Ombre portée : Subtile pour la profondeur

Animations

Apparition : Glissement depuis le haut avec fondu
Disparition : Fondu avec léger déplacement
Durée d'animation : 400ms
Easing : Cubic-bezier pour fluidité naturelle

---

🔧 Configuration avancée

📋 Corrections de noms de sections

Le widget inclut un système intelligent de correction des noms :

Accès : WordPress Admin > Métal Rouge SAMR > Corrections de Sections

Corrections automatiques par défaut

"hero" → "Accueil"
"about" → "À propos"  
"services" → "Nos services"
"portfolio" → "Nos réalisations"
"team" → "Notre équipe"
"contact" → "Contact"
"testimonials" → "Témoignages"
"pricing" → "Tarifs"
"faq" → "Questions fréquentes"

Ajouter des corrections personnalisées

1. Identifier l'ID de section problématique

2. Ajouter une correction : id-section → Nom Affiché

3. Sauvegarder les modifications

4. Tester sur votre page

🎛️ Paramètres de performance

Détection des sections

Sélecteurs automatiques :
- Sections Elementor : .elementor-section[id]
- Containers : .elementor-container[id]  
- Divs avec ID : div[id]
- Articles : article[id]
- Headers : header[id]

Exclusions intelligentes :
- IDs générés automatiquement par Elementor
- Éléments de tabs et accordéons
- Modals et popups
- Éléments masqués

Optimisations automatiques

Observer de mutations : Détecte les changements de DOM
Throttling du scroll : Optimise les performances
Nettoyage automatique : Évite les fuites mémoire
Protection contre les boucles : Sécurité avancée

---

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Structure de la page

• Sections identifiées : Toutes ont des ID CSS uniques

• Noms descriptifs : ID compréhensibles et cohérents

• Sections visibles : Contenu suffisant pour la navigation

• Ordre logique : Sections dans l'ordre de lecture

Configuration du widget

• Position appropriée : Gauche ou droite selon le design

• Vitesse adaptée : Ni trop rapide ni trop lente

• Décalage correct : Compense le header fixe

• Masquage configuré : Selon vos préférences UX

Apparence

• Couleurs cohérentes : Respectent votre charte graphique

• Tailles appropriées : Points et textes lisibles

• Tooltips informatifs : Noms de sections clairs

• Responsive testé : Fonctionne sur tous les appareils

Mobile

• Indicateur positionné : N'interfère pas avec le contenu

• Durée appropriée : Ni trop court ni trop long

• Navigation tactile : Points assez grands pour le doigt

• Performance fluide : Pas de ralentissement

🔍 Test complet du widget

Test de base

1. Ajouter le widget sur une page avec sections

2. Vérifier la détection : Points générés automatiquement

3. Tester la navigation : Clic sur chaque point

4. Observer les animations : Défilement fluide et progression

5. Vérifier les tooltips : Noms corrects au survol

Test responsive

1. Mode desktop : Navigation verticale standard

2. Mode tablette : Vérifier l'adaptabilité

3. Mode mobile : Indicateur de section fonctionnel

4. Rotation d'écran : Comportement lors du changement d'orientation

Test avancé

1. Navigation clavier : Flèches haut/bas (desktop) et gauche/droite (mobile)

2. Changement de contenu : Widget s'adapte aux modifications

3. Performance : Pas de ralentissement avec beaucoup de sections

4. Cas limites : Une seule section, sections très courtes

---

💡 Bonnes pratiques

🎯 Structure de page optimale

• 6-12 sections maximum : Plus lisible et performant

• Contenu équilibré : Sections ni trop courtes ni trop longues

• Ordre logique : Flux de lecture naturel

• Noms descriptifs : ID significatifs pour l'utilisateur

📱 Expérience utilisateur

• Position cohérente : Même côté sur toutes les pages

• Feedback visuel : États hover et active bien distincts

• Accessibilité : Navigation clavier fonctionnelle

• Performance : Animations fluides sans ralentissement

🎨 Design harmonieux

• Couleurs de marque : Respecter la charte graphique

• Cohérence visuelle : Même style sur tout le site

• Contraste suffisant : Lisibilité sur tous les fonds

• Tailles appropriées : Lisibles sans être intrusives

🔧 Maintenance

• Tests réguliers : Vérifier après chaque modification de contenu

• Mise à jour : Adapter les corrections de noms si nécessaire

• Performance : Surveiller les temps de chargement

• Feedback utilisateur : Écouter les retours sur l'expérience de navigation