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

Direction du retournement

Vitesse d'animation

📏 Onglet Contenu > Dimensions

Largeur de la carte

Type de hauteur

Options avancées

Hauteur personnalisée

Hauteur minimale

📝 Configuration du contenu des faces

🎨 Onglet Contenu > Face avant

Icône

Titre

Description

Image de fond

🎨 Onglet Contenu > Face arrière

Icône

Titre

Description

Bouton d'action

Image de fond

🎨 Personnalisation visuelle

🎭 Onglet Style > Style général

Bordures

Arrondi des coins

🎨 Onglet Style > Style face avant

Arrière-plan

Ombre portée

Style de l'icône

Style du titre

Style de la description

🎨 Onglet Style > Style face arrière

Arrière-plan

Style des éléments

Style du bouton

🔧 Configuration avancée

📱 Responsive Design

Tailles recommandées par appareil

Adaptation automatique

🎨 Cohérence visuelle

Palette de couleurs recommandée

Bonnes pratiques typographiques

🔗 Configuration des liens

Types de liens supportés

Paramètres de lien

🧪 Tests et vérifications

✅ Checklist avant mise en ligne

Contenu

Design

Fonctionnement

🔍 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

PrécédentNavigation par sectionsSuivantÉtapes interactives

Mis à jour