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

⚙️ Configuration du widget

🎯 Onglet Contenu > Navigation

Position de la navigation

Comportement de défilement

Décalage de défilement

Masquage automatique

📱 Onglet Contenu > Paramètres Responsifs

Visibilité par appareil

Indicateur mobile

🎨 Personnalisation visuelle

🔵 Style des Points

États des points

Espacement

📏 Style de la Ligne de Progression

Ligne de fond

Ligne de progression

🏷️ Style des Tooltips

Apparence

Comportement

📱 Style de l'Indicateur Mobile

Apparence générale

Animations

🔧 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

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

Optimisations automatiques

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Structure de la page

Configuration du widget

Apparence

Mobile

🔍 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

PrécédentDashicons (icones cachées de WordPress)SuivantCarte à Retourner

Mis à jour