Use Key Data Boxes Block

With the Key detail boxes Gutenberg block (immomakler/single-data-boxes) you display the most important data of a property — price, area, number of rooms and more — as visually appealing boxes. Each box shows an icon, a label and the corresponding value. The block matches the functionality and output of the Elementor widget of the same name, “Key detail boxes”, and can be individually configured for each instance.

Requirements

WordPress with the Gutenberg editor (WordPress 5.0 or later)
WP-ImmoMakler (any edition)

Inserting the block

Edit a property or open a template

Open an existing property in the editor or a block-based template for the Property post type (requires a block theme or the Site Editor).
Insert the block

Click the + icon and search for Key detail boxes, or navigate to the Widgets category. Insert the block.
Check the preview

A live preview using the data of an existing sample property is displayed immediately in the editor. On the actual property page, the data of the respective property is shown.

Configuring fields (entries)

In the block panel Entries (left sidebar, Settings tab) you manage which data fields are displayed as boxes.

Changing the order

Use the arrow up and arrow down buttons next to each entry to adjust the display order.

Showing/hiding entries

Click the × symbol of an entry to remove it. Use + Add entry at the end of the list to add new fields.

Configuring an entry

Click the arrow-down button of an entry to expand its settings:

Setting	Description
Field	The property data field whose value is displayed in the box (e.g. `kaufpreis`, `wohnflaeche`).
Icon	Icon from the WP-ImmoMakler standard library. Automatic selects the icon matching the field (e.g. house icon for purchase price, area icon for m² fields).
Override label	Optional text that replaces the automatic field label (e.g. “Price” instead of “Purchase price”).
When empty	Controls what happens when the field has no value for the property: Hide box (default) or Show placeholder.
Placeholder	Only visible when “Show placeholder” is selected: –, n/a or not specified.

Layout & display

In the block panel Appearance you control how the boxes are arranged:

Display style

Option	Description
Flex (fluid)	Boxes arrange themselves side by side and wrap automatically — suitable for a variable number of boxes.
Grid	Boxes are arranged in a fixed grid. With the grid style, the number of columns (1–6) becomes configurable.

Box layout

Controls how icon, label and value are arranged within a box:

Option	Arrangement
Stacked (default)	Icon, label and value stacked. The exact order is configurable via “Order (Stacked)”.
Icon left — label/value right	Icon in the left column, label top-right, value below.
Icon left/value right — label below	Icon top-left, value top-right, label centred below.

Order (Stacked)

Only for the Stacked box layout: select one of the six possible arrangements of icon (I), label (L) and value (V):

I → L → V (default)
I → V → L
L → I → V
L → V → I
V → I → L
V → L → I

Styling

The appearance of the boxes (colours, spacing, font sizes, etc.) is adjusted via the block toolbar menu and the Design options in the sidebar — just like other WordPress blocks. For further customisation you can write your own CSS rules for the block classes in your theme:

/* Wrapper list */
.immomakler-data-list { }

/* Individual box */
.immomakler-data-box { }

/* Icon, label, value */
.immomakler-data-icon { }
.immomakler-data-label { }
.immomakler-data-value { }