Utiliser le bloc Boîtes de données clés

Avec le bloc Gutenberg Boîtes de données de référence (immomakler/single-data-boxes), vous présentez les données essentielles d’un bien immobilier — prix, surface, nombre de pièces, etc. — sous forme de boîtes visuellement distinctes. Chaque boîte affiche une icône, une étiquette et la valeur correspondante. Le bloc correspond en termes de fonctionnalités et de rendu au widget Elementor du même nom, « Boîtes de données de référence », et peut être configuré individuellement pour chaque instance.

Prérequis

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

Insérer le bloc

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).
Insérer le bloc

Cliquez sur le symbole + et recherchez Boîtes de données de référence, ou naviguez vers la catégorie Widgets. Insérez le bloc.
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 champs (entrées)

Dans le panneau de bloc Entrées (barre latérale gauche, onglet Paramètres), vous gérez quels champs de données sont affichés sous forme de boîtes.

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.

Afficher/masquer une entrée

Cliquez sur le symbole × d’une entrée pour la supprimer. Utilisez + Ajouter une entrée 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 dans la boîte (p. ex. `kaufpreis`, `wohnflaeche`).
Icône	Icône de la bibliothèque standard WP-ImmoMakler. Automatique sélectionne l’icône correspondant au champ (p. ex. icône maison pour le prix d’achat, icône surface pour les champs m²).
Remplacer l’étiquette	Texte optionnel qui remplace l’étiquette automatique du champ (p. ex. « Prix » à la place de « Prix d’achat »).
Si vide	Détermine ce qui se passe si le champ est vide pour l’objet : Masquer la boîte (par défaut) ou Afficher un espace réservé.
Espace réservé	Visible uniquement avec « Afficher un espace réservé » : –, N.A. ou Non renseigné.

Mise en page et affichage

Dans le panneau de bloc Apparence, vous gérez l’organisation des boîtes :

Style d’affichage

Option	Description
Flex (fluide)	Les boîtes se placent côte à côte et passent automatiquement à la ligne — adapté à un nombre variable de boîtes.
Grille	Les boîtes sont organisées dans une grille fixe. Avec le style Grille, le nombre de colonnes (1–6) devient configurable.

Mise en page des boîtes

Gère l’organisation de l’icône, de l’étiquette et de la valeur à l’intérieur d’une boîte :

Option	Organisation
Empilé (par défaut)	Icône, étiquette et valeur les uns au-dessus des autres. L’ordre précis est configurable via « Ordre (Empilé) ».
Icône à gauche – Étiquette/Valeur à droite	Icône dans la colonne gauche, étiquette en haut à droite, valeur en dessous.
Icône gauche/Valeur droite – Étiquette dessous	Icône en haut à gauche, valeur en haut à droite, étiquette centrée en dessous.

Ordre (Empilé)

Uniquement pour la mise en page Empilé : choisissez l’une des six dispositions possibles d’Icône (I), Étiquette (E) et Valeur (V) :

I → E → V (par défaut)
I → V → E
E → I → V
E → V → I
V → I → E
V → E → I

Style

Vous adaptez l’apparence des boîtes (couleurs, espacement, tailles de police, etc.) via le menu de la barre d’outils du bloc et les options Design dans la barre latérale — exactement comme pour les autres blocs WordPress. Pour des personnalisations plus poussées, vous pouvez écrire vos propres règles CSS pour les classes du bloc dans votre thème :

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

/* Boîte individuelle */
.immomakler-data-box { }

/* Icône, étiquette, valeur */
.immomakler-data-icon { }
.immomakler-data-label { }
.immomakler-data-value { }