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. Chaque boîte affiche une étiquette et la valeur correspondante, si vous le souhaitez accompagnées d’une icône. 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.

Boîtes de données de référence dans le frontend avec ID du bien, prix d'achat, surface habitable, terrain, pièces et places de stationnement

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 parmi les icônes pour les données des biens immobiliers de WP-ImmoMakler. Automatique (selon le champ) sélectionne l’icône correspondant au champ, par exemple un calendrier pour l’année de construction ou un plan pour les pièces. Vous pouvez aussi choisir une icône précise pour chaque champ. Par défaut, c’est Pas d’icône : sans votre sélection, aucune icône n’apparaît et les blocs existants restent inchangés.
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. Dès qu’au moins une entrée a une icône, les options indiquent aussi la position de l’icône :

Option	Organisation
Empilé (par défaut)	Icône, étiquette et valeur les uns au-dessus des autres. Vous définissez l’ordre précis sous Ordre (Empilé).
Icône à gauche — étiquette en haut, valeur en bas à droite	L’icône se trouve à gauche ; l’étiquette et la valeur se trouvent à droite, l’une sous l’autre.
Icône en haut à gauche, valeur en haut à droite, étiquette dessous	L’icône et la valeur sont côte à côte, l’étiquette en dessous.

Ordre (Empilé)

Uniquement pour la mise en page Empilé : sans icônes, vous choisissez si l’étiquette se place au-dessus ou en dessous de la valeur. Dès qu’au moins une entrée a une icône, les six dispositions d’icône, d’étiquette et de valeur sont proposées :

Icône → étiquette → valeur (par défaut)
Icône → valeur → étiquette
Étiquette → icône → valeur
Étiquette → valeur → icône
Valeur → icône → étiquette
Valeur → étiquette → icône

Icône

Dès qu’au moins une entrée a une icône, le panneau Icône apparaît dans la barre latérale. Vous y définissez pour toutes les icônes du bloc :

Paramètre	Description
Taille (px)	Hauteur et largeur des icônes, 24 px par défaut.
Couleur	Couleur des icônes. Sans sélection, les icônes reprennent la couleur de texte du bloc.

Dans la mise en page empilée, l’icône suit l’alignement de l’étiquette. Avec Épaisseur de trait des icônes, vous définissez pour ce bloc une épaisseur de trait différente de celle du site ; la valeur par défaut est Comme dans les réglages. La forme des icônes s’applique à l’ensemble du site, voir Icônes pour les données des biens immobiliers.

En mode une seule ligne, le bloc n’affiche pas d’icônes.

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 { }