Tabs Produits Responsive

📖 Documentation du Widget Tabs Produits Responsive - Metal Rouge SAMR

Vue d'ensemble

Le widget Tabs Produits Responsive est un composant Elementor avancé qui permet de présenter plusieurs produits ou services dans un système d'onglets interactif. Il s'adapte automatiquement aux différents appareils et offre de nombreuses options de personnalisation pour créer des présentations professionnelles et engageantes.

---

🚀 Fonctionnalités principales

✨ Interface adaptive intelligente

• Responsive automatique : Se transforme en accordéon sur mobile pour une meilleure expérience tactile

• Navigation par URL : Accès direct aux onglets via des liens (ex: #produit-a)

• Onglets défilants : Scroll horizontal automatique si trop d'onglets

• Navigation clavier : Support complet des raccourcis clavier (Tab, flèches, Entrée)

🎨 Modes d'affichage flexibles

• Mode normal : Affichage complet avec titre, description, prix et lien

• Mode contenu masqué : Seules les images sont visibles pour un rendu épuré

• Centrage automatique : Les onglets sans contenu textuel centrent automatiquement leur image

• Largeurs d'onglets : Adaptée au contenu, uniforme ou personnalisée

📐 Système d'espacement avancé

• Espacement normal : Marges classiques entre les onglets

• Space Between : Espace uniquement entre les onglets

• Space Around : Espace autour de chaque onglet

• Space Evenly : Espacement égal partout

• Gap personnalisé : Contrôle précis de l'espacement

🎭 Animations professionnelles

• Animations d'entrée : Fondu, glissement, zoom, rotation, retournement

• Animations de sortie : Transitions fluides pour l'ancien contenu

• Animation échelonnée : Délai entre l'image et le texte pour un effet séquentiel

• Courbes d'animation : Du linéaire au rebond pour des effets modernes

---

📋 Installation et ajout du widget

Prérequis

• WordPress 5.0+

• Elementor Pro 3.0+

• Plugin Metal Rouge SAMR Extension activé

Ajout sur une page

1. Ouvrir l'éditeur Elementor sur votre page

2. Rechercher "Tabs Produits Responsive" dans le panneau widgets

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

4. Le widget se trouve dans "Metal Rouge SAMR"

---

⚙️ Configuration du contenu

🎯 Onglet Contenu > Onglets Produits

Ajout des produits

Pour chaque produit, vous pouvez configurer :

Nom du Produit : "MacBook Pro 16"
ID de l'onglet : "macbook-pro" (optionnel, pour les liens directs)
Image du Produit : Sélection depuis la médiathèque
Description : Texte riche avec mise en forme
Prix : "€2,499" (optionnel)
Lien : URL vers page produit, fiche technique, etc. (optionnel)
Icône : Icône Font Awesome pour l'onglet (optionnel)

Conseils pour les contenus

• Titres courts : 2-4 mots pour un affichage optimal

• IDs personnalisés : lettres minuscules, chiffres et tirets uniquement

• Images optimisées : Format 16:9 recommandé, 800x450px minimum

• Descriptions équilibrées : Même longueur approximative pour une cohérence visuelle

🎨 Onglet Contenu > Configuration d'Affichage

Mode contenu masqué

Masquer le contenu textuel : Oui/Non
- Activé : Seules les images des produits sont visibles
- Désactivé : Affichage complet (recommandé)

Avantages du mode masqué :
✅ Présentation épurée et visuelle
✅ L'image prend plus de place pour un impact maximal
✅ Idéal pour des galeries de produits

Centrage automatique des images (NOUVEAU)

Centrage automatique : Oui (recommandé)
- Détecte automatiquement les onglets sans contenu textuel
- Centre l'image pour ces onglets spécifiques
- Parfait pour mélanger onglets avec et sans texte
- Transition progressive vers l'affichage du contenu

Critères de détection :
• Description vide
• Prix vide  
• Lien vide

📱 Onglet Contenu > Configuration Responsive

Comportement mobile

Comportement Mobile : Accordéon (recommandé)
- Garder les onglets : Interface onglets conservée sur mobile
- Transformer en accordéon : Empilage vertical avec headers cliquables
- Empiler verticalement : Onglets verticaux classiques

Point de rupture mobile : 768px (320-1024px)

Navigation avancée

Onglets défilants : Oui (recommandé)
- Scroll horizontal automatique si débordement
- Indicateurs visuels de scroll disponible
- Centrage automatique de l'onglet actif

Navigation par URL : Oui (recommandé)
- Accès direct : monsite.com/page#produit-a
- Historique navigateur : bouton retour fonctionnel
- Partage de liens : URL directe vers un onglet

Mettre à jour l'URL : Non (recommandé)
- Oui : URL change à chaque clic d'onglet
- Non : URL fixe, navigation sans historique

---

📐 Configuration des dimensions

🎯 Onglet Layout > Dimensions et Position du Widget

Contrôle de la largeur

Largeur du Widget : 100% (défaut)
- 70-80% : Effet plus élégant avec espaces latéraux
- 100% : Utilise toute la largeur disponible
- Valeur fixe : 800px pour une largeur précise

Position du Widget : Centre (recommandé)
- Gauche : Alignement à gauche du conteneur
- Centre : Centré dans le conteneur parent
- Droite : Alignement à droite

Marges et espacement

Marges du Widget : Personnalisables
- Top/Bottom : 20-40px pour séparer des autres éléments
- Left/Right : 0px généralement (widget centré)
- Responsive : Marges différentes selon l'appareil

---

🎨 Personnalisation visuelle des onglets

🎭 Onglet Style > Style des Onglets

Disposition générale

Disposition : Horizontale (recommandé)
- Horizontale : Onglets en ligne
- Verticale : Onglets en colonne (desktop uniquement)

Alignement : Centre (défaut)
- Gauche/Centre/Droite : Position des onglets
- Justifié : Répartition sur toute la largeur

Largeur des onglets (NOUVEAU)

Type de largeur : Adaptée au contenu (défaut)

Adaptée au contenu :
• Chaque onglet s'adapte à son texte
• Largeurs variables selon le contenu
• Idéal pour des noms de produits de longueurs différentes

Largeur uniforme :
• Tous les onglets ont la même largeur minimale
• Largeur minimale uniforme : 120px (80-300px)
• Design propre et équilibré
• Recommandé pour un look professionnel

Largeur personnalisée :
• Largeur fixe identique pour tous
• Largeur personnalisée : 150px (100-400px)
• Contrôle précis de l'apparence
• Peut tronquer les textes longs

Espacement des onglets (NOUVEAU)

Type d'espacement : Normal (défaut)

Normal (margin) :
• Espacement standard avec marges
• Margin personnalisable par onglet
• Compatible avec tous les alignements

Space Between :
• Espace uniquement entre les onglets
• Premier et dernier onglet collés aux bords
• Répartition automatique de l'espace

Space Around :
• Espace autour de chaque onglet
• Espaces égaux de chaque côté
• Espaces des bords = moitié des espaces internes

Space Evenly :
• Espace égal partout
• Même espacement partout, y compris les bords
• Répartition parfaitement uniforme

Gap personnalisé :
• Espacement uniforme : 10px (0-100px)
• Contrôle précis avec propriété CSS gap
• Compatible avec tous les modes de largeur

États visuels des onglets

État Normal

Couleur d'arrière-plan : #f8f9fa (gris clair)
Couleur du texte : #6c757d (gris moyen)
Bordure : Personnalisable (type, largeur, couleur)

État Survol

Couleur d'arrière-plan : #e9ecef (gris plus foncé)
Couleur du texte : #495057 (gris foncé)
Couleur de bordure : Personnalisable
Transition : Animation douce automatique

État Actif

Couleur d'arrière-plan : #dc2626 (rouge Metal Rouge)
Couleur du texte : #ffffff (blanc)
Couleur de bordure : #dc2626 (rouge Metal Rouge)
Ombre : Effet d'élévation automatique

Typographie et espacement

Typographie : Police, taille, poids configurables
Padding : 12px 24px (défaut)
- Top/Bottom : Hauteur interne des onglets
- Left/Right : Largeur interne du texte

Margin : Selon le type d'espacement
- Disponible uniquement en mode "Normal"
- Désactivé pour les autres modes d'espacement

Rayon de bordure : 8px 8px 0 0 (défaut)
- Coins arrondis en haut uniquement
- Raccordement avec le contenu

Ombre : Personnalisable
- Profondeur et diffusion réglables
- Couleur et opacité ajustables

---

🎨 Personnalisation du contenu

🖼️ Onglet Style > Style du Contenu

Arrière-plan du contenu

Type : Couleur unie (défaut)
- Couleur : #ffffff (blanc)
- Dégradé : Options avancées disponibles

Cohérence visuelle :
• Même couleur que l'arrière-plan du site
• Contraste suffisant avec le texte (4.5:1 minimum)
• Harmonie avec les couleurs des onglets

Bordures et forme

Bordure : Solide par défaut
- Largeur : 1px sur tous les côtés
- Couleur : #e9ecef (gris clair)
- Raccordement avec les onglets

Rayon de bordure : 0 8px 8px 8px (défaut)
- Pas d'arrondi en haut-gauche (raccord avec l'onglet actif)
- Coins arrondis sur les autres angles

Padding : 30px (défaut)
- Espace interne pour le contenu
- Responsive : Automatiquement réduit sur mobile

Ombre du contenu

Ombre par défaut : 0 4px 14px rgba(0,0,0,0.1)
- Effet de profondeur subtil
- Élévation du contenu par rapport à la page
- Cohérence avec l'ombre des onglets actifs

🖼️ Onglet Style > Style de l'Image

Position et alignement

Position de l'image : Gauche (défaut)
- Gauche/Droite : Image à côté du texte
- Haut/Bas : Image au-dessus/en-dessous du texte
- Responsive : Automatiquement "Haut" sur mobile/tablette

Alignement de l'image : Début (défaut)
- Début/Centre/Fin : Position verticale de l'image
- Disponible pour positions Haut/Bas uniquement
- Responsive : Automatiquement "Centre" sur mobile

Dimensions

Largeur de l'image : 40% (défaut desktop)
- Desktop : 40% (20-100%)
- Tablette : 100% (automatique)
- Mobile : 100% (automatique)

Hauteur de l'image : 300px (défaut)
- Object-fit : cover (recadrage automatique)
- Responsive : 250px tablette, 200px mobile
- Proportions préservées

Style visuel

Rayon de bordure : 8px (tous les coins)
- Coins arrondis pour un rendu moderne
- Cohérence avec le design général

Ombre : Personnalisable
- Profondeur réglable
- Effet d'élévation de l'image

Margin : Espacements configurables
- Desktop : 0 20px 0 0 (espace à droite)
- Tablette : 0 0 20px 0 (espace en bas)
- Mobile : 0 0 15px 0 (espace réduit)

📝 Onglet Style > Style du Texte

Titre du produit

Couleur : #333333 (gris très foncé)
Typographie : Police principale (H3 équivalent)
Alignement : Gauche (défaut)
- Desktop : Gauche (aligné avec l'image)
- Tablette/Mobile : Centre (automatique)

Margin : 0 0 15px 0 (espace en bas)

Description du produit

Couleur : #666666 (gris moyen)
Typographie : Police de texte standard
Alignement : Gauche/Centre/Droite/Justifié
- Justifié recommandé pour les longs textes
- Cohérence avec l'alignement du titre

Prix du produit

Couleur : #dc2626 (rouge Metal Rouge)
Typographie : Police d'accent (mise en valeur)
Alignement : Gauche (défaut)
- Tablette/Mobile : Centre (automatique)
- Effet visuel : Attraction de l'attention

Lien du produit

Alignement : Gauche (défaut)
- Tablette/Mobile : Centre (automatique)
- Style : Bouton Elementor automatique
- Couleurs : Héritées du thème Elementor

---

🎭 Animations et transitions avancées

⚡ Onglet Style > Animations et Transitions

Types d'animation d'entrée

Fondu (défaut) :
• Apparition progressive par transparence
• Effet subtil et professionnel
• Recommandé pour tous les contenus

Glissement horizontal :
• Arrivée depuis la droite
• Dynamique et moderne
• Idéal pour les présentations produits

Glissement vertical :
• Arrivée depuis le bas
• Effet d'élévation
• Parfait pour les contenus textuels

Zoom :
• Agrandissement progressif
• Impact visuel fort
• Attention sur le contenu

Rotation :
• Rotation + agrandissement
• Effet créatif et original
• À utiliser avec modération

Retournement horizontal/vertical :
• Effet 3D spectaculaire
• Très moderne et accrocheur
• Impact visuel maximum

Types d'animation de sortie

Fondu sortant (défaut) :
• Disparition par transparence
• Transition douce et naturelle

Glissement directionnel :
• Sortie vers gauche/droite/haut/bas
• Coordination avec l'animation d'entrée
• Effet de balayage

Rétrécissement :
• Réduction progressive
• Opposition au zoom d'entrée
• Effet de focalisation

Rotation sortante :
• Rotation + rétrécissement
• Effet symétrique à l'entrée
• Cohérence visuelle

Paramètres de timing

Durée d'animation d'entrée : 400ms (défaut)
- 100-300ms : Très rapide, efficace
- 400-600ms : Normal, recommandé
- 700-1000ms : Lent, dramatique

Durée d'animation de sortie : 250ms (défaut)
- Généralement plus rapide que l'entrée
- Évite l'attente lors du changement
- 100-400ms recommandé

Courbe d'animation : Décélération (défaut)
- Linéaire : Vitesse constante, mécanique
- Naturel : Accélération puis décélération
- Accélération : Démarrage lent puis rapide
- Décélération : Démarrage rapide puis lent (recommandé)
- Accélération/Décélération : Effet de balancier
- Rebond : Effet élastique moderne

Délai d'échelonnement : 50ms (défaut)
- Décalage entre l'animation de l'image et du texte
- 0ms : Animation simultanée
- 50-100ms : Effet séquentiel subtil (recommandé)
- 100-200ms : Effet marqué, créatif

Effets de survol

Effets de survol : Activé (défaut)
- Zoom léger des images au survol
- Animation des onglets au survol
- Feedback visuel interactif

Intensité du zoom : 1.03 (défaut)
- 1.01-1.02 : Effet très subtil
- 1.03-1.05 : Effet normal (recommandé)
- 1.06-1.10 : Effet marqué
- 1.10+ : Effet très prononcé

---

📱 Comportement responsive intelligent

🎯 Adaptation automatique

Breakpoints et transitions

Desktop (≥1024px) :
• Disposition horizontale classique
• Tous les types d'espacement disponibles
• Navigation par survol et clic
• Onglets défilants si débordement

Tablette (768-1023px) :
• Adaptation automatique des dimensions
• Image repositionnée en haut
• Alignement centré automatique
• Espacement réduit

Mobile (<768px) :
• Transformation selon le comportement choisi
• Padding réduit automatiquement
• Navigation tactile optimisée
• Animations simplifiées

Mode accordéon (recommandé mobile)

Fonctionnement :
• Navigation transformée en headers cliquables
• Contenu empilé verticalement
• Un seul onglet ouvert à la fois
• Transition fluide du mode desktop

Avantages :
✅ Interface tactile native
✅ Navigation intuitive
✅ Économie d'espace vertical
✅ Accessibilité optimisée

Mode onglets conservé

Fonctionnement :
• Interface onglets préservée
• Défilement horizontal automatique
• Taille réduite pour le tactile
• Tous les contrôles accessibles

Utilisation :
• Peu d'onglets (2-4 maximum)
• Noms courts
• Préférence pour la cohérence visuelle

Mode empilé vertical

Fonctionnement :
• Onglets empilés verticalement
• Navigation classique préservée
• Contenu affiché normalement
• Layout en colonne unique

Utilisation :
• Interface hybride
• Transition douce vers mobile
• Préférence pour la familiarité

---

🔧 Fonctionnalités avancées

🌐 Navigation par URL

Configuration des liens directs

Utilisation :
monsite.com/ma-page#produit-a
monsite.com/ma-page#macbook-pro
monsite.com/ma-page?tab=produit-b

Fonctionnalités :
✅ Accès direct depuis l'extérieur
✅ Partage de liens spécifiques
✅ Navigation avec bouton retour
✅ Bookmarks fonctionnels
✅ Intégration SEO améliorée

Gestion de l'historique

Mettre à jour l'URL : Non (recommandé)
• L'URL reste stable pendant la navigation
• Pas de pollution de l'historique
• Bouton retour amène à la page précédente

Mettre à jour l'URL : Oui
• L'URL change à chaque clic d'onglet
• Historique de navigation détaillé
• Bouton retour navigue entre les onglets

🎯 Centrage automatique intelligent (NOUVEAU)

Détection automatique

Critères de détection d'onglet vide :
• Description vide ou contenant seulement des espaces
• Prix vide ou contenant seulement des espaces  
• Lien vide ou non défini

Comportement automatique :
• Image centrée horizontalement et verticalement
• Padding ajusté pour un meilleur équilibre
• Titre de l'onglet toujours visible
• Transition fluide entre les modes

Cas d'usage typiques

Galerie mixte :
• Onglet 1 : Produit avec description complète
• Onglet 2 : Image seule (centrage automatique)
• Onglet 3 : Produit avec prix uniquement
• Onglet 4 : Image seule (centrage automatique)

Présentation progressive :
• Phase 1 : Images seules pour l'impact visuel
• Phase 2 : Ajout progressif des descriptions
• Phase 3 : Finalisation avec prix et liens
• Transition fluide sans reconfiguration

⚙️ Gestion du débordement

Système intelligent

Détection automatique :
• Calcul de l'espace disponible
• Mesure de la largeur totale des onglets
• Activation automatique du scroll si nécessaire

Indicateurs visuels :
• Dégradés de transparence aux extrémités
• Indication visuelle du scroll disponible
• Masquage automatique si pas de débordement

Comportements adaptatifs :
• Alignement forcé à gauche en cas de débordement
• Préservation des modes d'espacement si possible
• Centrage automatique de l'onglet actif

---

📝 Checklist rapide d'utilisation

➕ Créer un système d'onglets produits

1. Glisser le widget "Tabs Produits Responsive" dans votre section

2. Configurer les produits :

   • Ajouter 3-5 produits avec noms courts

   • Sélectionner des images cohérentes (16:9 recommandé)

   • Rédiger des descriptions équilibrées

   • Ajouter prix et liens si pertinent

3. Choisir les modes d'affichage :

   • Garder "Centrage automatique" activé

   • Mode responsive "Accordéon" pour mobile

   • Navigation URL activée pour le partage

4. Personnaliser l'apparence :

   • Couleurs selon votre charte graphique

   • Type de largeur "Uniforme" pour un look pro

   • Espacement "Space Between" pour une répartition élégante

5. Configurer les animations :

   • Animation d'entrée "Fondu" ou "Glissement horizontal"

   • Durée 400ms pour l'entrée, 250ms pour la sortie

   • Délai d'échelonnement 50ms pour l'effet séquentiel

⚙️ Modifier un système existant

1. Sélectionner le widget dans Elementor

2. Ajuster le contenu :

   • Modifier textes et images selon les besoins

   • Ajouter/supprimer des onglets si nécessaire

   • Vérifier la cohérence des longueurs de contenu

3. Optimiser l'apparence :

   • Ajuster les couleurs si évolution de charte

   • Modifier les espacements selon le nouveau contenu

   • Tester les animations sur différents appareils

4. Valider les fonctionnalités :

   • Tester tous les liens et leur destination

   • Vérifier le responsive sur mobile/tablette

   • Contrôler la navigation URL si utilisée

🎨 Créer un design cohérent

1. Définir la palette : 3-4 couleurs maximum

2. Choisir la typographie : Cohérence avec le site

3. Configurer les dimensions : Largeur 70-80% centrée

4. Harmoniser les espacements : Multiples de 8px

5. Tester l'accessibilité : Contraste et navigation clavier

🚀 Optimiser les performances

1. Compresser les images : <100KB par image

2. Choisir animations légères : Fondu plutôt qu'effets complexes

3. Limiter le nombre d'onglets : 6 maximum pour la performance

4. Tester la vitesse : Outils PageSpeed Insights

5. Configurer le cache : Plugins et serveur

✅ Validation finale

1. Test complet : Tous les onglets, tous les liens

2. Responsive vérifié : Desktop, tablette, mobile

3. Accessibilité controlée : Navigation clavier, contrastes

4. Performance mesurée : Temps de chargement acceptable

5. SEO optimisé : URLs, textes, images avec alt