Comment concevoir des cartes WordPress avec Elementor

Dans un environnement numérique où l’expérience utilisateur (UX) est décisive, les cartes de service offrent une façon claire et visuellement attractive de présenter des informations clés. Elementor, le constructeur de pages le plus populaire pour WordPress, permet de créer ces cartes rapidement tout en conservant une totale maîtrise du design. Cet article décrit, étape par étape, la méthode que j’ai utilisée pour reproduire la carte présentée sur la page « Cartes des services » de Humanis (https://new.humanis.org/cartes-des-services/). Vous pourrez ainsi intégrer ce composant dans votre propre site WordPress et enrichir votre portfolio professionnel.

1. Pré‑requis

• WordPress installé (version ≥ 5.9) : Plateforme de base pour héberger le site.
• Plugin Elementor (version gratuite ou Pro) : Outil de création visuelle qui fournit les widgets nécessaires.
• Thème compatible Elementor (ex. Oxpitan) : Garantit une mise en page fluide sans interférences CSS.
• Accès FTP / gestionnaire de fichiers : Pour ajouter éventuellement des icônes personnalisées ou du CSS supplémentaire.
• Images / icônes (format SVG ou PNG) : Illustrent chaque service de manière cohérente.

‍

2. Structure de la carte

Une carte typique se compose de :

• Conteneur principal – section ou colonne qui encadre l’ensemble.
• Image ou icône – visuel représentant le service.
• Titre – nom du service, généralement en <h3>.
• Description courte – texte de 1‑2 lignes résumant le service.
• Lien « En savoir plus » – bouton ou texte cliquable menant à la page détaillée.

Cette hiérarchie assure une bonne lisibilité et facilite le référencement sémantique (balises H3, paragraphes, attribut alt sur les images).

‍

3. Étapes de construction dans Elementor

Étape 1 – Créer une nouvelle section

1. Ouvrez la page où vous souhaitez insérer les cartes (ou créez une page vierge).
2. Cliquez sur « Ajouter une section » → choisissez la mise en page « Structure à trois colonnes » (ou le nombre de cartes souhaité).
3. Dans les paramètres de la section, définissez l’espacement interne (padding) à 20px et l’espacement externe (margin) à 0 pour garder les cartes bien séparées.

Étape 2 – Ajouter un widget « Inner Section » (facultatif)

Si vous désirez séparer l’image du texte dans deux rangées verticales, insérez un Inner Section à l’intérieur de chaque colonne :

• Rangée 1 : image/icone.
• Rangée 2 : titre, description, bouton.

Cela simplifie le contrôle du positionnement et du responsive.

Étape 3 – Insérer l’image ou l’icône

1. Glissez‑déposez le widget « Image » (ou « Icon » si vous utilisez des icônes Font Awesome).
2. Choisissez votre fichier SVG/PNG.
3. Dans l’onglet Style, définissez une largeur maximale de 80px et centrez l’image (alignement = centre).
4. Ajoutez un effet hover (ex. légère rotation ou opacité) via l’onglet Avancé → Motion Effects.

Étape 4 – Ajouter le titre

1. Utilisez le widget « Titre ».
2. Sélectionnez le niveau H3 pour respecter la hiérarchie sémantique.
3. Personnalisez la typographie (ex. Montserrat, 18 px, poids 600) et la couleur principale de votre charte graphique.
4. Activez le spacing (margin-bottom: 10px) pour séparer le titre du texte.

Étape 5 – Ajouter la description

1. Insérez un widget « Texte » sous le titre.
2. Rédigez une phrase concise (max ≈ 150 caractères).
3. Réglez la taille de police à 14 px, la hauteur de ligne à 1.5, et la couleur en gris moyen (#555).
4. Limitez la hauteur du bloc texte afin que toutes les cartes conservent la même hauteur même si les descriptions varient légèrement.

Étape 6 – Créer le lien « En savoir plus »

1. Ajoutez un widget « Bouton » ou « Texte avec lien ».
2. Texte recommandé : « En savoir plus » ou « Découvrir ».
3. Style du bouton : fond transparent, bordure fine (1px solid #0077CC), texte couleur primaire.
4. En hover, inversez les couleurs (fond primaire, texte blanc).
5. Reliez le bouton à la page détaillée du service.

Étape 7 – Styliser le conteneur de la carte

1. Sélectionnez la colonne contenant la carte.
2. Dans l’onglet Style → Border, ajoutez une bordure légère (1px solid #E0E0E0).
3. Appliquez un rayon de bordure de 8px pour un rendu arrondi.
4. Ajoutez une ombre portée subtile (box-shadow: 0 2px 6px rgba(0,0,0,0.08)).
5. Configurez le background en blanc (#FFF).

Étape 8 – Responsivité

• Tablette : passez à deux colonnes (dans Responsive → Column Width).
• Mobile : chaque carte occupe toute la largeur (100 %).
• Vérifiez que les images restent centrées et que le texte ne déborde pas.
• Utilisez les réglages Margin/Padding spécifiques aux points de rupture pour affiner l’espacement.

Étape 9 – Sauvegarder et réutiliser (template)

1. Une fois la première carte terminée, cliquez sur la flèche du panneau de la colonne → « Enregistrer comme modèle ».
2. Donnez‑lui un nom (ex. Carte Service – Elementor).
3. Vous pouvez maintenant insérer ce modèle partout via le widget « Modèle », ce qui accélère la création de nouvelles cartes.

4. Astuces avancées pour un rendu professionnel

• CSS personnalisé (dans Avancé → Custom CSS) – ex. transition: transform .3s ease; pour un effet de levée au survol : Renforce l’interaction et donne une impression de fluidité.
• ‍Utilisation de variables CSS (var(--primary-color)) pour harmoniser les couleurs entre cartes et le reste du site : Facilite les mises à jour de la charte graphique.
• ‍Lazy‑load des images (option native d’Elementor) afin d’améliorer le temps de chargement : Optimise les performances SEO.