Carte à Retourner

📖 Documentation du Widget Carte à Retourner - Métal Rouge SAMR

Vue d'ensemble

Le widget Carte à Retourner (Flip Card) est un composant Elementor qui crée des cartes interactives avec deux faces : une face avant visible par défaut et une face arrière révélée au survol ou au clic. Parfait pour présenter des services, équipes, ou produits de manière engageante avec une adaptation intelligente mobile.

---

🚀 Fonctionnalités principales

✨ Animation interactive

• Déclencheurs multiples : Survol ou clic selon vos préférences

• Adaptation mobile automatique : Bascule intelligente en mode clic sur mobile/tablette

• Directions d'animation : Retournement horizontal ou vertical

• Vitesse configurable : De 200ms à 2000ms pour s'adapter à votre style

• Animation fluide : Transitions CSS3 optimisées pour tous les navigateurs

🎨 Contenu riche

• Face avant : Icône, titre, description, image de fond

• Face arrière : Icône, titre, description détaillée, bouton d'action, image de fond

• Icônes personnalisées : Bibliothèque complète d'icônes Font Awesome

• Bouton d'action : Lien vers pages, sections, emails, téléphones

📐 Dimensions flexibles

• Hauteur adaptative : S'ajuste automatiquement au contenu

• Hauteur fixe : Contrôle précis pour un design uniforme

• Mode étirement : Remplit entièrement l'espace disponible

• Largeur responsive : Configuration pour tous les appareils

📱 Expérience mobile optimisée

• Détection automatique : Passage en mode clic sur écrans < 1024px

• Boutons tactiles : Zone de clic optimisée pour les doigts

• Pas de conflit hover : Désactivation automatique des effets de survol

• Navigation tactile intuitive : Curseur adaptatif selon le mode

---

📋 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 "Carte à Retourner" dans le panneau widgets

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

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

---

⚙️ Configuration du contenu

🎯 Onglet Contenu > Paramètres généraux

Déclencheur d'animation

Déclencheur : Survol / Clic
- Survol : Animation au passage de la souris (recommandé desktop)
- Clic : Animation au clic/tap (recommandé mobile)
- Adaptation automatique : Clic forcé sur mobile (<1024px)

Direction du retournement

Direction : Horizontal / Vertical
- Horizontal : Rotation sur l'axe Y (effet livre)
- Vertical : Rotation sur l'axe X (effet volet)

Vitesse d'animation

Vitesse : 600ms (200-2000ms)
- 200-400ms : Très rapide
- 500-800ms : Normal (recommandé)
- 900-1500ms : Lent
- 1600-2000ms : Très lent

📏 Onglet Contenu > Dimensions

Largeur de la carte

Largeur : 100% (ou valeur personnalisée)
Unités : px, %, vw
Range : 200px-800px ou 10%-100%

Type de hauteur

Adaptative au contenu : S'ajuste automatiquement
Hauteur fixe : Contrôle précis en pixels

Options avancées

Étirer pour remplir le widget : Oui/Non
Force la carte à occuper toute la hauteur disponible
Utile pour des layouts en grille uniforme

Hauteur personnalisée

Hauteur de la carte : 300px (200-800px)
Disponible uniquement en mode "Hauteur fixe"

Hauteur minimale

Hauteur minimale : 250px (100-500px)
Disponible en mode "Adaptative"
Évite les cartes trop petites

---

📝 Configuration du contenu des faces

🎨 Onglet Contenu > Face avant

Icône

Icône : Sélection depuis la bibliothèque Font Awesome
Par défaut : Étoile (fas fa-star)
Optionnel : Peut être laissé vide

Titre

Titre : "Titre de la carte"
Balise HTML : H1, H2, H3 (défaut), H4, H5, H6, P, SPAN, DIV
Influence le SEO et la hiérarchie du contenu

Description

Description : Texte de présentation court
Balise HTML : P (défaut), DIV, SPAN, H1-H6
Optionnel mais recommandé pour l'engagement

Image de fond

Image de fond : Sélection depuis la médiathèque
Optionnelle, s'affiche derrière le contenu
Opacité automatique pour garder le texte lisible

🎨 Onglet Contenu > Face arrière

Icône

Icône : Différente de la face avant pour la distinction
Par défaut : Cœur (fas fa-heart)
Complète l'information de la face avant

Titre

Titre : "Titre de la face arrière"
Généralement plus détaillé que la face avant
Balise HTML configurable (H3 par défaut)

Description

Description : Informations détaillées, call-to-action
Texte plus long pour expliquer l'offre/service
Zone de texte multi-lignes

Bouton d'action

Texte du bouton : "En savoir plus"
Lien du bouton : URL complète, ancre, email, téléphone
Exemples :
- https://metal-rouge.fr/services
- #section-contact
- mailto:[email protected]
- tel:[phone]

Image de fond

Image de fond : Différente de la face avant
Renforce l'impact visuel de la face arrière
Opacité automatique pour la lisibilité

---

🎨 Personnalisation visuelle

🎭 Onglet Style > Style général

Bordures

Type de bordure : Aucone / Solide / Pointillé / Double
Largeur : 0-10px sur tous les côtés
Couleur : Personnalisable

Arrondi des coins

Rayon des bordures : 8px par défaut
Valeurs indépendantes : Haut-gauche, Haut-droite, etc.
Unités : px, % (% pour cercles parfaits)

🎨 Onglet Style > Style face avant

Arrière-plan

Type : Couleur unie / Dégradé
Couleur unie : #667eea (bleu par défaut)
Dégradé : 
- Couleur A : #667eea
- Couleur B : #764ba2
- Angle : 135° (personnalisable)

Ombre portée

Ombre par défaut :
- Horizontal : 0px
- Vertical : 4px
- Flou : 15px
- Couleur : rgba(0,0,0,0.1)
Configuration avancée disponible

Style de l'icône

Couleur : #ffffff (blanc par défaut)
Taille : 40px (20-100px)
Position : Centrée au-dessus du titre

Style du titre

Couleur : #ffffff (blanc)
Typographie : Police, taille, poids configurable
Espacement : Margin et padding ajustables

Style de la description

Couleur : #ffffff (blanc)
Typographie : Généralement plus petite que le titre
Opacité : Légèrement transparente pour hiérarchie

🎨 Onglet Style > Style face arrière

Arrière-plan

Type : Dégradé par défaut
Couleurs par défaut :
- Couleur A : #f093fb (rose)
- Couleur B : #f5576c (rouge)
- Angle : 135°
Personnalisable selon votre charte

Style des éléments

Icône :
- Couleur : #ffffff
- Taille : 40px (identique à la face avant)

Titre :
- Couleur : #ffffff
- Typographie : Configurable indépendamment

Description :
- Couleur : #ffffff
- Typographie : Généralement plus détaillée

Style du bouton

Couleur du texte : #ffffff
Couleur de fond : rgba(255,255,255,0.2) (semi-transparent)
Couleur au survol : rgba(255,255,255,0.3)
Typographie : Police et taille configurables

🆕 Mobile optimisé :
- Taille tactile : 44px minimum (recommandation Apple/Google)
- Zone de clic étendue : +10px autour du bouton
- Effet tactile : Léger scale au tap

---

🔧 Configuration avancée

📱 Responsive Design

Tailles recommandées par appareil

Desktop (>1024px) :
- Largeur : 100% ou 350px
- Hauteur : 300-400px

Tablette (768-1024px) :
- Largeur : 100%
- Hauteur : 280-350px

Mobile (<768px) :
- Largeur : 100%
- Hauteur : 250-300px
- Padding réduit automatiquement

Adaptation automatique

Police des icônes : 30px sur mobile (vs 40px desktop)
Espacement du contenu : 20px sur mobile (vs 30px desktop)
Hauteur minimale : 220px sur mobile (vs 250px desktop)

🎨 Cohérence visuelle

Palette de couleurs recommandée

Face avant : Couleur principale de votre charte
Face arrière : Couleur complémentaire ou dégradé
Texte : Toujours contraster avec l'arrière-plan
Bouton : Couleur d'accent ou transparence élégante

Bonnes pratiques typographiques

Hiérarchie claire : Titre > Description > Bouton
Lisibilité : Contraste minimum 4.5:1
Cohérence : Même police sur tout le site
Responsive : Tailles adaptées aux appareils

🔗 Configuration des liens

Types de liens supportés

Pages internes : /services, /about
Liens externes : https://example.com
Ancres de page : #section-contact
Emails : mailto:[email protected]
Téléphones : tel:[phone]
Téléchargements : URL vers fichiers PDF, etc.

Paramètres de lien

Ouverture : Même onglet / Nouvel onglet
Attribut nofollow : Oui/Non (SEO)
Titre du lien : Texte au survol (accessibilité)

---

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Contenu

• Icônes sélectionnées et cohérentes avec le message

• Titres informatifs et engageants

• Descriptions claires et incitatives

• Bouton d'action avec lien fonctionnel

• Images de fond optimisées et pertinentes

Design

• Couleurs cohérentes avec la charte graphique

• Contraste suffisant pour la lisibilité

• Typographie harmonieuse avec le site

• Dimensions appropriées pour le contenu

• Animations fluides et non-distrayantes

Fonctionnement

• Déclencheur testé (survol/clic)

• Animation fluide sur tous les navigateurs

• Liens fonctionnels et ouverts correctement

• Responsive testé sur mobile et tablette

• Accessibilité vérifiée (navigation clavier)

🔍 Test complet du widget

Test de base

1. Ajouter le widget dans une section

2. Configurer la face avant : icône, titre, description

3. Configurer la face arrière : contenu détaillé + bouton

4. Tester l'animation : survol ou clic selon configuration

5. Vérifier le lien du bouton d'action

Test responsive

1. Mode desktop : Animation et proportions

2. Mode tablette : Adaptation des tailles

3. Mode mobile : Touch et lisibilité

4. Navigation clavier : Tab et Entrée fonctionnels

Test avancé

1. Différents contenus : Textes courts/longs

2. Images de fond : Impact sur la lisibilité

3. Multiples cartes : Cohérence dans une grille

4. Performance : Fluidité avec plusieurs cartes

---

💡 Conseils d'utilisation

🎯 Contenu efficace

• Face avant : Accrocheur et synthétique

• Face arrière : Informatif avec call-to-action clair

• Équilibre : Même longueur de contenu pour cohérence visuelle

• Pertinence : Bouton d'action en rapport avec le contenu

🎨 Design harmonieux

• Cohérence : Même style pour toutes les cartes d'une série

• Contraste : Couleurs différentes mais complémentaires

• Hiérarchie : Taille et poids des textes logiques

• Espacement : Marges uniformes entre les cartes

📱 Expérience utilisateur

• Intuitivité : Déclencheur évident (survol/clic)

• Feedback : Animation assez rapide pour être fluide

• Accessibilité : Navigation clavier fonctionnelle

• Mobile : Tap facile sur les cartes tactiles

🔧 Performance

• Images optimisées : Compression et taille appropriée

• Animations légères : Éviter les effets trop complexes

• Cache friendly : Styles statiques autant que possible

• Test régulier : Vérifier après les mises à jour

---

📝 Checklist rapide d'utilisation

➕ Créer une carte à retourner

1. Glisser le widget dans votre section

2. Choisir le déclencheur : Survol (recommandé) ou Clic

3. Configurer la face avant :

   • Sélectionner une icône représentative

   • Saisir un titre accrocheur

   • Ajouter une description courte

4. Configurer la face arrière :

   • Choisir une icône complémentaire

   • Titre plus détaillé

   • Description complète avec bénéfices

   • Bouton avec lien fonctionnel

5. Personnaliser l'apparence selon votre charte

6. Tester l'animation avant publication

⚙️ Modifier une carte existante

1. Sélectionner la carte dans Elementor

2. Modifier le contenu nécessaire

3. Ajuster les couleurs si besoin

4. Tester les modifications en preview

5. Publier une fois satisfait

🎨 Créer une série de cartes cohérentes

1. Configurer la première carte complètement

2. Dupliquer le widget pour les autres cartes

3. Modifier uniquement le contenu (garder les styles)

4. Aligner les cartes dans une grille Elementor

5. Vérifier la cohérence visuelle globale