Bloc Liste des surfaces

Avec le bloc Gutenberg Liste des surfaces (immomakler/single-data-areas), vous affichez les surfaces d’un bien immobilier sous forme de liste de définition à deux colonnes avec libellé et valeur. Contrairement au bloc Données du bien immobilier, qui affiche toutes les données clés en une fois, la Liste des surfaces se limite aux champs de surface — et vous définissez, pour chaque instance de bloc, lesquels apparaissent. Sa structure et ses options de style correspondent à celles du bloc Liste des prix.

Prérequis

• WordPress avec l’éditeur Gutenberg
• WP-ImmoMakler (toute édition)
• Un bien immobilier en contexte : le bloc lit les surfaces du bien immobilier actuellement affiché. Placez-le donc dans un template du Site Editor pour le type de publication Bien immobilier ou sur une page modèle — voir Créer une page de détail. Sur une page ordinaire sans bien immobilier, le bloc reste vide.

Insérer le bloc

1. Ouvrir un template ou une page modèle

   Ouvrez dans le Site Editor le template pour le type de publication Bien immobilier (nécessite un thème de blocs) ou la page modèle sur laquelle la vue détail de vos biens immobiliers est construite.

2. Insérer le bloc

   Cliquez sur l’icône + et recherchez Liste des surfaces, ou accédez à la catégorie Widgets. Insérez le bloc.

3. Sélectionner les champs

   Dans la barre latérale, sous Champs, désactivez les champs de surface qui ne doivent pas apparaître dans cette liste. Par défaut, tous les champs sont activés.

4. Vérifier l’aperçu et enregistrer

   Dans l’éditeur, le bloc affiche immédiatement un aperçu en direct avec les données du bien immobilier de prévisualisation. Enregistrez le template — les surfaces du bien concerné apparaissent sur la page réelle du bien immobilier.

Options

Dans la barre latérale (onglet Paramètres), vous trouverez les panneaux suivants :

Panneau	Option	Valeur par défaut	Description
Paramètres	Afficher la légende	Oui	Affiche les libellés des champs de surface dans une colonne dédiée à côté des valeurs. Désactivée, le bloc n’affiche que les valeurs les unes sous les autres.
Champs	un interrupteur par champ de surface	tous Oui	Détermine quels champs de surface cette instance de bloc peut afficher (liste complète ci-dessous).
Cellules de tableau	Distance intérieure (haut / droite / bas / gauche)	10 / 3 / 3 / 3 px	Espacement à l’intérieur de chaque cellule de la liste.
Cellules de tableau	Bordure	Aucun	Ligne de séparation entre les lignes : Aucun, Continu, Tirets, Pointillés ou Double. Les trois options suivantes n’apparaissent qu’une fois une bordure sélectionnée.
Cellules de tableau	Largeur de la bordure (px) / Couleur de la bordure	1 px / valeur par défaut du thème	Épaisseur et couleur des lignes de séparation.
Cellules de tableau	« Trennlinien: Außenabstand (px) » (lignes de séparation : marge extérieure)	0	Prolonge les lignes de séparation vers l’extérieur, au-delà de l’espacement intérieur du bloc.
Cellules de tableau	« Vertikale Trennlinie zwischen Spalten » (ligne verticale entre les colonnes)	Non	Trace en plus une ligne verticale entre la colonne des libellés et celle des valeurs, dans le style de la bordure sélectionnée.
Étiquetage	« Spaltenbreite (%) » (largeur de colonne)	55	Largeur de la colonne des libellés ; la colonne des valeurs occupe le reste.
Étiquetage	« Schriftgröße (px) » / « Schriftgewicht » / Couleur du texte	Valeur par défaut du thème	Typographie des libellés (taille de police, graisse de police, couleur du texte).
Valeurs	« Textausrichtung » (alignement du texte)	Gauche	Alignement des valeurs dans leur colonne : Gauche ou Droite.
Valeurs	« Schriftgröße (px) » / « Schriftgewicht » / Couleur du texte	Valeur par défaut du thème	Typographie des valeurs (taille de police, graisse de police, couleur du texte).

Le bloc prend également en charge les options standard de WordPress pour le remplissage et la marge dans l’onglet Design.

Note

Un champ activé n’apparaît dans le frontend que si le bien immobilier concerné contient effectivement une valeur pour ce champ. Les champs sans valeur sont automatiquement masqués — un appartement en copropriété n’affiche donc pas de hauteur du hall vide, même si l’interrupteur est activé. Si un bien immobilier ne comporte aucune indication de surface, le bloc n’affiche rien.

Champs de surface disponibles

Le panneau Champs répertorie les champs de surface dans l’ordre dans lequel WP-ImmoMakler les affiche également :

Libellé	Key
Surface habitable	wohnflaeche
Surface utile	nutzflaeche
Surface de bureau	bueroflaeche
Surface totale	gesamtflaeche
Surface de boutique	ladenflaeche
Espace de stockage	lagerflaeche
Surface de vente	verkaufsflaeche
Surface commerciale	gewerbeflaeche
Espace libre	freiflaeche
Sous-espace de bureau	bueroteilflaeche
Surface administrative	verwaltungsflaeche
Espace restauration	gastroflaeche
Surface des combles	dachbodenflaeche
Surface de la cave	kellerflaeche
Surface du balcon	balkonflaeche
Surface de la terrasse	terrassenflaeche
Surface balcon/terrasse	balkon_terrasse_flaeche
Surface du jardin	gartenflaeche
Autre surface	sonstflaeche
Surface louable	vermietbare_flaeche
Surface pouvant être chauffée	beheizbare_flaeche
Surface (texte libre)	flaeche_freitext
Surface habitable (texte libre)	wohnflaeche_freitext
Surface du terrain (texte libre)	grundstuecksflaeche_freitext
Surface à partir de	flaechevon
Surface jusqu’à	flaechebis
Divisible à partir de	teilbar_ab
Surface du terrain	grundstuecksflaeche
Façade vitrée	fensterfront
Façade vitrée (m²)	fensterfront_qm
Façade du terrain	grundstuecksfront
Hauteur du hall	hallenhoehe
Volume	kubatur
Indice d’utilisation	ausnuetzungsziffer
Surface au sol (GRZ)	grz
Coefficient de surface de plancher (GFZ)	gfz
Coefficient d’utilisation du sol (BMZ)	bmz
Surface brute de plancher (BGF)	bgf

Mise en forme via CSS

Chaque ligne de la liste porte une classe selon le modèle immomakler-data-{key}, ce qui vous permet de styliser des champs de surface spécifiques dans votre thème :

/* Liste */
.wp-block-immomakler-single-data-areas .immomakler-single-data-areas__list { }

/* Libellé et valeur d'un champ spécifique */
.wp-block-immomakler-single-data-areas dt.immomakler-data-wohnflaeche { }
.wp-block-immomakler-single-data-areas dd.immomakler-data-wohnflaeche { }

Cela pourrait aussi vous intéresser

• Liste de prix — afficher les champs de prix d’un bien immobilier dans la même mise en page de liste
• Données du bien immobilier — afficher toutes les données clés d’un bien immobilier sous forme de liste de définition
• Boîtes de données clés — mettre en avant les données clés les plus importantes sous forme de boîtes
• Créer une page de détail — construire la vue détail dans le Site Editor ou sur une page modèle