Fiche de fonctionnalité et tableau des fonctionnalités
Créez des fiches de fonctionnalités avec des icônes ou des images au sein d'une grille de fonctionnalités adaptative : utilisez la sélection d'images et d'icônes vectorielles intégrée à la bibliothèque multimédia d'Attr pour mettre en avant vos équipements, vos récompenses, vos services ou vos modules pédagogiques sans quitter l'éditeur de page.
Les blocs « Carte de fonctionnalité » et « Grille de fonctionnalités » transforment une série d’éléments phares structurés en une mise en page soignée et facile à parcourir, quelle que soit la page. Chaque carte peut être agrémentée d’une icône vectorielle nette, d’une photo ou d’un badge issu de votre bibliothèque Médias, ou des deux : une icône facultative peut apparaître sous forme de badge en haut à gauche de la carte lorsque vous utilisez également une image.
Utilisez une grille de fonctionnalités lorsque vous souhaitez disposer plusieurs cartes dans une mise en page en colonnes adaptative (services, équipement, récompenses). Insérez une seule carte de fonctionnalité lorsque vous n’avez besoin que d’un seul élément mis en avant au sein d’une colonne.
Pour savoir comment les blocs s’intègrent dans les sections et les lignes, consultez Mise en page et contenu. Pour les notions de base sur la barre latérale, consultez Barre latérale et barre d’outils de l’éditeur de page.
Prérequis
- Une page ouverte dans Pages → Modifier → Éditeur de page
- Facultatif : des images déjà importées dans Médias (logos, photos d’équipement, labels de récompenses, vignettes de modules)
- Facultatif : une structure Section → Ligne → Colonne — ou laissez l’éditeur organiser le bloc automatiquement lorsque vous le déposez sur le canevas
Ajouter une grille « Fonctionnalités »
- Dans la barre latérale de droite, cliquez sur Blocs (icône « plus »).
- Sous Produits et formulaires (ou Avancé, selon votre palette de blocs), faites glisser Grille de fonctionnalités dans une colonne.
- La grille est fournie avec des cartes de démarrage que vous pouvez modifier ou remplacer.
- Sélectionnez la grille sur le canevas → Modifier → Attr pour définir les colonnes, l’espacement et l’arrière-plan de la section.
- Sélectionnez une carte individuelle dans la grille pour la personnaliser, ou utilisez Ajouter une carte sur la grille pour enrichir l’ensemble.
- Enregistrez la page et publiez-la lorsque vous êtes prêt.
Ajouter une seule carte « Fonctionnalités »
- Ouvrez Blocs et faites glisser Carte « Fonctionnalités » dans une colonne (souvent au sein d’une ligne à plusieurs colonnes).
- Sélectionnez la carte → Modifier → Attr pour choisir l’icône, l’image, les couleurs et le style de la carte.
- Cliquez sur le titre et la description sur le canevas pour modifier le texte en ligne (WYSIWYG).
La plupart des studios commencent par une grille de cartes de présentation pour les pages « À propos », « Services », « Matériel » ou « Récompenses » ; utilisez une carte de présentation isolée pour une mise en avant dans la barre latérale ou un argument de vente unique.
Comment est construite une carte de fonctionnalité
Chaque carte de fonctionnalité est une petite surface comportant jusqu’à quatre couches que les visiteurs reconnaissent instantanément :
| Couche | Ce que voient les visiteurs | Où la modifier |
|---|---|---|
| Visuel | Icône, image ou image accompagnée d’un badge d’icône facultatif | Attr → Image et Icône |
| Titre | Titre court (nom de la récompense, modèle de matériel, niveau de service) | Cliquez sur le titre sur le canevas |
| Description | Ligne d’accompagnement (année, caractéristiques techniques, argumentaire en une phrase) | Cliquez sur le paragraphe sur le canevas |
| Lien (facultatif) | Image cliquable ouvrant une page presse, une URL d’affiliation ou une galerie | Attr → Image → Lien d’image |
Les cartes héritent des paramètres Thème de votre site pour la couleur de fond et l’ombre, ce qui garantit leur lisibilité aussi bien dans les palettes claires que sombres — voir Thème et identité visuelle du site.
Modes de carte : icône, image et superposition
Vous ne sélectionnez pas de « mode » distinct dans un menu déroulant : la carte s’adapte en fonction de ce que vous définissez dans Attr :
Mode icône (par défaut)
Laissez le champ Source de l'image vide. Choisissez une icône sous Icône → Sélectionner une icône. L'icône apparaît dans un conteneur arrondi au-dessus du titre — idéal pour les puces de service, les étapes de workflow ou les catégories d'outils lorsqu'une photo n'est pas nécessaire.
Les nouvelles cartes ajoutées via Ajouter une carte sur une grille démarrent en mode icône.
Mode image
Définissez Source de l’image à partir de votre bibliothèque Médias (ou collez une URL). L’image s’affiche au-dessus du titre. Effacez le champ Source de l’image pour revenir à une mise en page avec icône uniquement.
Les badges et logos au format PNG avec transparence fonctionnent particulièrement bien pour les labels de distinction et les marques de marque.
Mode superposition (image + icône facultative)
Lorsqu’une carte comporte une image et que vous sélectionnez une icône, celle-ci s’affiche dans le coin supérieur gauche de la carte sous la forme d’un petit badge — ce qui est utile lorsque vous souhaitez superposer un symbole de catégorie (vidéo, paysage, drone) au-dessus du logo d’une publication ou d’une photo de produit.
Utilisez Supprimer l’icône sous Icône si vous souhaitez un badge épuré contenant uniquement une image (fréquent sur les murs des récompenses).
Icône uniquement Image uniquement Image + superposition d’icône
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ [icône] │ │ [photo] │ │[i] [photo] │
│ Titre │ │ Titre │ │ Titre │
│ Description │ │ Description │ │ Description │
└─────────────┘ └─────────────┘ └─────────────┘
Sélecteurs de ressources intégrés (pas de changement d’onglet)
Pour optimiser le flux de travail de votre studio, les fiches de fonctionnalités utilisent des sélecteurs natifs directement dans le panneau Attr : vous restez sur le canevas de la page tout en choisissant vos visuels.
Sélecteur d’images de la bibliothèque multimédia
Sous Image → Source de l’image, utilisez le bouton représentant une icône d’image pour ouvrir votre bibliothèque Multimédia. Sélectionnez n’importe quelle image que vous avez déjà importée ; le choix d’un autre élément remplace celui qui est actuellement sélectionné (même principe que le bloc Image autonome).
- Utilisez les éléments web optimisés de la bibliothèque Médias plutôt que de créer des liens directs vers des fichiers originaux volumineux.
- Les fichiers PNG avec transparence conviennent parfaitement aux labels de récompenses, aux logos de sponsors et aux découpes d’équipements.
- Vous pouvez toujours coller une URL externe dans Source de l’image lorsque vous avez besoin d’un élément ponctuel, puis flouter le champ pour l’appliquer.
Commencez par importer de nouveaux fichiers sous Médias s’ils ne figurent pas encore dans la bibliothèque — voir Importer vos premières photos.
Sélecteur d’icônes vectorielles
Sous Icône → Sélectionner une icône, ouvrez la bibliothèque d’icônes consultable. Des milliers de symboles vectoriels nets s’adaptent parfaitement à la typographie et aux couleurs de votre site.
- Effectuez une recherche par mot-clé — appareil photo, drone, récompense, horloge, utilisateurs — pour trouver l’icône qui correspond à votre texte.
- Ajustez la Taille de l’icône, la couleur de l’icône, l’arrière-plan de l’icône et l’arrondi du contour de l’icône sans quitter le panneau.
- L’option Supprimer l’icône efface le badge tout en conservant votre image ou votre texte.
Les icônes s’affichent sous forme de vecteurs sur la page publiée ; elles restent donc nettes sur les écrans Retina et les appareils mobiles.
Configurer une carte de fonctionnalité unique (Attr)
Sélectionnez une carte de fonctionnalité sur le canevas → Modifier → Attr.
Image
| Commande | Fonction |
|---|---|
| Source de l’image | Champ URL et bouton de sélection Médias ; laissez vide pour les cartes contenant uniquement une icône |
| Lien vers l’image | URL facultative ouverte lorsqu’un visiteur clique sur l’image (et non sur la carte entière) ; utile pour les communiqués de presse, les pages d’affiliation ou les photos primées |
Le lien ne concerne que l’image, à l’instar du comportement habituel des badges de récompense et des vignettes d’équipement.
Icône
| Commande | Fonction |
|---|---|
| Sélectionner une icône | Ouvre le sélecteur d’icônes vectorielles |
| Supprimer l’icône | Masque le conteneur de l’icône (mise en avant de l’image seule ou du texte seul) |
| Taille de l’icône | De petite à très grande |
| Couleur de l’icône | Couleur du contour du vecteur |
| Arrière-plan de l’icône | Remplissage derrière l’icône |
| Arrondi du conteneur d’icône | Rayon des coins de la pastille d’icône |
| Alignement | À gauche, au centre ou à droite pour l’icône et le texte pris ensemble |
Style de la carte
| Commande | Fonction |
|---|---|
| Arrière-plan de la carte | Remplissage de la surface (les valeurs par défaut suivent votre thème) |
| Rayon de la bordure | Coins arrondis de la carte |
| Ombre | Profondeur prédéfinie allant de « aucune » à « très grande » |
| Afficher la bordure | Bordure fine facultative |
| Effet au survol | Léger soulèvement au survol lorsque cette option est activée |
Utilisez Style dans la même barre latérale si vous avez besoin d’ajustements ponctuels de l’espacement ; la plupart des réglages de finition des cartes se trouvent sous Attr.
Configurer une grille de fonctionnalités (Attr)
Sélectionnez l’élément conteneur Grille de fonctionnalités (et non une carte interne) → Modifier → Attr.
Mise en page
| Commande | Fonction |
|---|---|
| Colonnes | 1 à 6 colonnes sur ordinateur ; les cartes s’adaptent automatiquement sur tablette et mobile |
| Ajouter une carte | Insère une autre carte de base à la fin de la grille |
| Espacement | Espace entre les cartes (curseur) |
| Arrière-plan de la section | Bande derrière l'ensemble de la grille (transparente par défaut) |
La modification du nombre de colonnes n'ajuste que la mise en page ; elle ne supprime pas les cartes. Pour supprimer des cartes en trop, sélectionnez-les sur le canevas puis supprimez-les, ou utilisez les calques.
Style de toutes les cartes
Ces paramètres appliquent le même style d’icône et de carte à toutes les cartes de la grille — une solution rapide lorsque vous souhaitez créer un tableau d’honneur ou un catalogue d’équipements uniforme.
| Commande | Fonction |
|---|---|
| Taille de l’icône / Couleur de l’icône / Arrière-plan de l’icône | Stylisation groupée des icônes |
| Alignement | Alignement groupé du texte et des icônes |
| Rayon de la carte / Ombre de la carte | Style des éléments de présentation des cartes par lots |
Sélectionnez ensuite une carte individuelle pour remplacer les paramètres d’une ligne (une couleur d’accentuation différente sur un service « en vedette », par exemple).
Modification des titres et du corps du texte
Les titres et les descriptions sont modifiables directement sur le canevas : cliquez dans le texte comme dans un traitement de texte. Vous n’avez pas besoin d’un bloc de texte enrichi distinct pour le contenu des cartes.
Privilégiez les titres courts (nom du prix, nom du produit, niveau de service). Utilisez la description pour indiquer l’année, la catégorie, les caractéristiques techniques ou pour ajouter une phrase d’accompagnement.
Exemples concrets d’utilisation créative
La grille « Features » est l’un des blocs non multimédias les plus flexibles de l’éditeur. Au-delà du format générique « trois colonnes de puces », ces mises en page sont couramment utilisées sur les sites créatifs professionnels.
Prix, distinctions et récompenses
Mettez en avant la reconnaissance de votre secteur d’activité sans créer une page collage encombrée.
- Image : sceau de la publication ou badge du lauréat (fichier PNG issu de Médias).
- Titre : nom du prix et classement (2e prix, Beaux-arts — Vidéo).
- Description : organisme et année.
- Lien vers l’image : image primée, communiqué de presse ou galerie du concours.
- Superposition (facultative) : Petite icône de catégorie (vidéo, paysage) en haut à gauche lorsque le badge seul ne permet pas d’identifier le support.
Il s’agit du même modèle que celui utilisé par les studios pour les pages intitulées Récompenses et distinctions ou Reconnaissance.
Matériel photographique et équipement de production
Les clients des secteurs de la publicité, de l’astrophotographie et du paysage veulent la preuve que vous êtes capable de mener à bien des projets techniquement exigeants. Consacrez une grille sur la page À propos ou Matériel à votre équipement de terrain :
- Image : photo de produit épurée — boîtier, drone, porte-filtre, tracker.
- Titre : nom du modèle ou fonction de l’élément du kit.
- Description : une ligne technique (Phase One IQ4 150 MP — dos grand format).
- Lien vers l’image : Programme d’affiliation, page du fabricant ou votre article détaillé sur le matériel.
Le mode icône convient aux catégories (Éclairage, Supports, Filtres) lorsque vous préférez les symboles aux photos.
Services de studio et contrats de prestation
Décomposez les étapes de recrutement en niveaux faciles à parcourir — souvent trois colonnes sur ordinateur :
- Fiche 1 — Production sur site — Image phare ou photo « behind the scenes » ; lien vers une étude de cas dans le portfolio.
- Fiche 2 — Livraison et archivage des fichiers — Graphique représentant une clé USB ou une galerie ; lien vers la présentation du portail client.
- Fiche 3 — Post-production et impression — Détail des couleurs ou de l’impression ; lien vers la page des produits imprimés.
Associez la grille aux Témoignages ci-dessous pour renforcer la crédibilité — voir Blocs de l’éditeur et référence de mise en page.
Ateliers et modules de formation
Définissez les blocs du programme pour les safaris sur le terrain, le mentorat en ligne ou les ventes incitatives de cours :
- Titre : Nom du module (Planification de la photographie du ciel nocturne, Traitement de piles RAW complexes).
- Image : Image représentative ou schéma.
- Lien vers l’image : page de paiement, de liste d’attente ou de programme.
Utilisez la fonctionnalité Événements dans la section si vous souhaitez que les modules apparaissent progressivement lors du défilement — Événements et interactions de l’éditeur de page.
Mise en page et comportement sur mobile
Placez la grille à l’intérieur d’une Section avec un espacement vertical suffisant. Sur les fenêtres d’affichage étroites, les grilles à plusieurs colonnes s’empilent automatiquement en une seule colonne — prévisualisez avec l’option Mobile dans la barre d’outils de l’éditeur avant de publier.
Pour la largeur maximale des lignes et l’équilibre des colonnes, consultez Mise en page et contenu.
Conseils pour une grille professionnelle
- Proportions d’images cohérentes — Des rapports d’aspect similaires entre les cartes donnent une impression de cohérence ; recadrez les images dans Médias avant de les sélectionner.
- Une idée par carte — Les visiteurs parcourent le contenu du regard ; évitez les paragraphes dans le champ de description.
- Couleurs issues du thème — Privilégiez les codes de surface du thème plutôt que les codes hexadécimaux codés en dur afin que le mode sombre reste lisible.
- Liens pertinents — Les liens vers des images doivent rediriger vers du contenu qui justifie le clic (galerie, article, produit), et non vers des pages d’accueil génériques.
- Réutilisez les médias — Enregistrez une seule fois les logos et les icônes dans Médias ; réutilisez-les sur toutes les pages et dans les articles de blog.
Dépannage
| Symptôme | Que vérifier |
|---|---|
| L’icône change dans Attr mais le canevas semble inchangé | La carte est peut-être uniquement composée d’une image et ne comporte pas encore d’icône — choisissez une icône ou utilisez Supprimer l’icône puis resélectionnez-en une ; enregistrez et actualisez l’aperçu |
| L’icône se trouve entre l’image et le texte au lieu d’être en haut à gauche | Resélectionnez l’icône ou remplacez l’image une seule fois — le placement synchronise l’icône avec le coin de la carte lorsqu’une image est présente |
| Le sélecteur d’images est vide | Importez d’abord les ressources dans Médias |
| Lien vers l’image est désactivé | Définissez d’abord la Source de l’image |
| Les colonnes de la grille semblent trop serrées sur mobile | Réduisez le nombre de colonnes ou raccourcissez les titres ; prévisualisez en mode Mobile |
| Les styles diffèrent entre l’éditeur et le site en ligne | Enregistrez la page, publiez-la, actualisez-la manuellement ; consultez Dépannage des problèmes de publication |
| La page WordPress migrée affiche des encadrés de remplacement en pointillés | Réimportez ou reconstruisez la page à l’aide des outils de migration actuels — contactez l’assistance si vous gérez une importation héritée |
Articles connexes
- Référence des blocs et de la mise en page de l’éditeur — catalogue complet des blocs
- Ajouter des médias aux pages — intégration des ressources de la médiathèque dans les blocs
- Événements et interactions de l’éditeur de page — animations sur les sections de la grille
- Thème et identité visuelle du site — couleurs et surfaces héritées par les cartes
Vérification de votre configuration
- Ajoutez une grille « Fonctionnalités » comportant trois cartes à une page brouillon.
- Sur une carte, définissez une image à partir de Médias et un lien vers une image.
- Sur une autre, utilisez uniquement une icône avec une couleur distincte.
- Sur la troisième, combinez une image et une icône en superposition.
- Enregistrez la page, prévisualisez-la sur ordinateur et sur mobile, publiez-la, puis vérifiez que l’URL publique correspond bien à celle de l’éditeur.