Use Key Data Icon List Block

With the Key detail icon list Gutenberg block (immomakler/single-icon-list) you display property key data — areas, number of rooms, parking spaces and more — as a compact, horizontally flowing icon list. Each item consists of an icon and the corresponding value. The block matches the functionality and output of the Elementor widget of the same name, “Key detail icon list”.

Requirements

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

Inserting the block

1. 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).

2. Insert the block

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

3. 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 items

In the block panel Items (left sidebar, Settings tab) you manage which fields appear in the icon list.

Changing the order

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

Adding or removing items

Click the × symbol of an entry to remove it. Use + Add item 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 (e.g. wohnflaeche, anzahl_zimmer).
Icon	Icon from the WP-ImmoMakler standard library. Automatic selects the icon matching the field.

Tip

Fields without a value for the respective property are automatically hidden — the icon list only shows fields that are actually populated.

Note

The default selection contains 11 typical area and quantity values (living area, usable area, office area, retail area, storage area, sales area, commercial area, number of rooms, total area, plot area, parking spaces). Price and other fields are not pre-selected — these can be added via + Add item.

Configuring the list

In the block panel List you control spacing and alignment of the items:

Setting	Description
Spacing between items (px)	Horizontal spacing between the icon-value pairs. Default: 16 px.
Row spacing (px)	Spacing between rows when items wrap. Default: 8 px.
Alignment	Alignment of the icon list in the block: Left, Centre or Right.

Icon style

In the block panel Icon you adjust the appearance of all icons:

Setting	Description
Colour	Colour of the SVG icons. If not specified, the theme text colour is used.
Size (px)	Width and height of the icons. Default: 16 px, range: 8–96 px.
Spacing to text (px)	Spacing between the icon and the corresponding value. Default: 6 px.

Text style

In the block panel Text you adjust the colour of the value text:

Setting	Description
Colour	Text colour of the displayed field values. If not specified, the theme text colour is used.

CSS classes for custom styling

For further customisation you can add your own CSS rules in your theme:

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

/* Individual icon-value pair */
.immomakler-icon-list__item { }

/* Icon container */
.immomakler-icon-list__icon { }

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

Difference from Key Data Boxes

Both blocks display property key data — the difference lies in their focus:

	Key Data Icon List	Key Data Boxes
Display	Compact, flowing icon + value list	Visually separated boxes with icon, label and value
Label	None (only value visible, label as tooltip)	Yes, as a standalone element per box
Layout options	Simple: spacing, alignment	Extensive: Flex/Grid, box layout, order
Suited for	Compact summary, e.g. in list views or sidebars	Detail pages with highlighted key data

You might also be interested in

• Use Key Data Boxes Block
• Use Prices List Block
• Use Gallery Block
• Gutenberg Blocks Overview