Utiliser le bloc Liste d'icônes de données clés

Avec le bloc Gutenberg Liste des icônes de référence (immomakler/single-icon-list), vous présentez les données clés d’un bien immobilier — surfaces, nombre de pièces, places de stationnement, etc. — sous forme de liste d’icônes compacte à flux horizontal. Chaque élément se compose d’une icône et de la valeur correspondante. Le bloc correspond en termes de fonctionnalités et de rendu au widget Elementor du même nom, « Liste des icônes de référence ».

Prérequis

• WordPress avec l’éditeur Gutenberg (à partir de WordPress 5.0)
• WP-ImmoMakler (toute édition)

Insérer le bloc

1. Modifier un bien ou ouvrir un template

   Ouvrez un bien immobilier existant dans l’éditeur ou un template basé sur des blocs pour le type de publication Bien immobilier (requiert un thème de blocs ou le Site Editor).

2. Insérer le bloc

   Cliquez sur le symbole + et recherchez Liste des icônes de référence, ou naviguez vers la catégorie Widgets. Insérez le bloc.

3. Vérifier l’aperçu

   Dans l’éditeur, un aperçu en temps réel s’affiche immédiatement avec les données d’un exemple de bien existant. Sur la page réelle du bien, les données de l’objet correspondant sont affichées.

Configurer les éléments

Dans le panneau de bloc Éléments (barre latérale gauche, onglet Paramètres), vous gérez quels champs apparaissent dans la liste d’icônes.

Modifier l’ordre

Utilisez les boutons flèche vers le haut et flèche vers le bas à côté de chaque entrée pour ajuster l’ordre d’affichage.

Ajouter ou supprimer des éléments

Cliquez sur le symbole × d’une entrée pour la supprimer. Utilisez + Ajouter un élément en bas de la liste pour ajouter de nouveaux champs.

Configurer une entrée

Cliquez sur le bouton flèche vers le bas d’une entrée pour déplier ses paramètres :

Paramètre	Description
Champ	Le champ de données du bien dont la valeur est affichée (p. ex. wohnflaeche, anzahl_zimmer).
Icône	Icône de la bibliothèque standard WP-ImmoMakler. Automatique sélectionne l’icône correspondant au champ.

Astuce

Les champs sans valeur pour le bien correspondant sont automatiquement masqués — la liste d’icônes n’affiche que les champs qui ont réellement des données.

Note

La sélection par défaut contient 11 valeurs typiques de surface et de quantité (surface habitable, surface utile, surface de bureaux, surface commerciale, surface de stockage, surface de vente, surface professionnelle, nombre de pièces, surface totale, surface du terrain, places de stationnement). Les champs de prix et autres ne sont pas présélectionnés — ils peuvent être ajoutés via + Ajouter un élément.

Configurer la liste

Dans le panneau de bloc Liste, vous gérez les espacements et l’alignement des éléments :

Paramètre	Description
Espacement entre éléments (px)	Espace horizontal entre les paires icône-valeur. Par défaut : 16 px.
Interligne (px)	Espace entre les lignes lorsque les éléments passent à la ligne. Par défaut : 8 px.
Alignement	Alignement de la liste d’icônes dans le bloc : Gauche, Centre ou Droite.

Style des icônes

Dans le panneau de bloc Icône, vous adaptez l’apparence de toutes les icônes :

Paramètre	Description
Couleur	Couleur des icônes SVG. Sans valeur, la couleur du texte du thème est utilisée.
Taille (px)	Largeur et hauteur des icônes. Par défaut : 16 px, plage : 8–96 px.
Espacement avec le texte (px)	Espace entre l’icône et la valeur correspondante. Par défaut : 6 px.

Style du texte

Dans le panneau de bloc Texte, vous adaptez la couleur du texte des valeurs :

Paramètre	Description
Couleur	Couleur du texte des valeurs de champ affichées. Sans valeur, la couleur du texte du thème est utilisée.

Classes CSS pour des personnalisations supplémentaires

Pour une personnalisation plus poussée, vous pouvez utiliser vos propres règles CSS dans votre thème :

/* Liste enveloppe */
.immomakler-icon-list { }

/* Paire icône-valeur individuelle */
.immomakler-icon-list__item { }

/* Conteneur d'icône */
.immomakler-icon-list__icon { }

/* Valeur */
.immomakler-icon-list__text { }

Différence avec Boîtes de données clés

Les deux blocs affichent les données clés d’un bien immobilier — la différence réside dans leur approche :

	Liste d’icônes de données clés	Boîtes de données clés
Affichage	Liste compacte d’icônes + valeurs en flux	Boîtes visuellement délimitées avec icône, étiquette et valeur
Étiquette	Aucune (seulement la valeur visible, étiquette en infobulle)	Oui, en tant qu’élément indépendant par boîte
Options de mise en page	Simples : espacement, alignement	Étendues : Flex/Grille, mise en page des boîtes, ordre
Adapté pour	Résumé compact, p. ex. dans les vues de liste ou les barres latérales	Pages de détail avec données clés mises en avant

Cela pourrait aussi vous intéresser

• Utiliser le bloc Boîtes de données clés
• Utiliser le bloc Liste de prix
• Utiliser le bloc Galerie
• Aperçu des blocs Gutenberg