Eckdaten-Icon-Liste Block einsetzen

Ce contenu n’est pas encore disponible dans votre langue.

Mit dem Gutenberg-Block Eckdaten-Icon-Liste (immomakler/single-icon-list) stellen Sie Immobilien-Eckdaten — Flächen, Zimmeranzahl, Stellplätze u.v.m. — als kompakte, horizontal fließende Icon-Liste dar. Jedes Element besteht aus einem Icon und dem zugehörigen Wert. Der Block entspricht in Funktionsumfang und Ausgabe dem gleichnamigen Elementor-Widget „Eckdaten-Icon-Liste”.

Voraussetzungen

WordPress mit Gutenberg-Editor (ab WordPress 5.0)
WP-ImmoMakler (beliebige Edition)

Block einfügen

Immobilie bearbeiten oder Template öffnen

Öffnen Sie eine bestehende Immobilie im Editor oder ein Block-basiertes Template für den Beitragstyp Immobilie (erfordert ein Block-Theme oder den Site Editor).
Block einfügen

Klicken Sie auf das +-Symbol und suchen Sie nach Eckdaten-Icon-Liste oder navigieren Sie zur Kategorie Widgets. Fügen Sie den Block ein.
Vorschau prüfen

Im Editor wird sofort eine Live-Vorschau mit den Daten einer vorhandenen Beispiel-Immobilie angezeigt. Auf der tatsächlichen Immobilien-Seite erscheinen die Daten des jeweiligen Objekts.

Elemente konfigurieren

Im Block-Panel Elemente (linke Seitenleiste, Reiter Einstellungen) verwalten Sie, welche Felder in der Icon-Liste erscheinen.

Reihenfolge ändern

Verwenden Sie die Pfeil-nach-oben und Pfeil-nach-unten-Schaltflächen neben jedem Eintrag, um die Anzeigereihenfolge anzupassen.

Element hinzufügen oder entfernen

Klicken Sie auf das ×-Symbol eines Eintrags, um ihn zu entfernen. Über + Element hinzufügen am Ende der Liste fügen Sie neue Felder hinzu.

Eintrag konfigurieren

Klicken Sie auf den Pfeil-nach-unten-Button eines Eintrags, um seine Einstellungen aufzuklappen:

Einstellung	Beschreibung
Feld	Das Immobilien-Datenfeld, dessen Wert angezeigt wird (z. B. `wohnflaeche`, `anzahl_zimmer`).
Icon	Icon aus der WP-ImmoMakler Standardbibliothek. Automatisch wählt das zum Feld passende Icon.

Liste konfigurieren

Im Block-Panel Liste steuern Sie Abstände und Ausrichtung der Elemente:

Einstellung	Beschreibung
Abstand zwischen Elementen (px)	Horizontaler Abstand zwischen den Icon-Wert-Paaren. Standard: 16 px.
Zeilenabstand (px)	Abstand zwischen den Zeilen, wenn Elemente umbrechen. Standard: 8 px.
Ausrichtung	Ausrichtung der Icon-Liste im Block: Links, Mitte oder Rechts.

Icon-Stil

Im Block-Panel Icon passen Sie das Erscheinungsbild aller Icons an:

Einstellung	Beschreibung
Farbe	Farbe der SVG-Icons. Ohne Angabe wird die Textfarbe des Themes übernommen.
Größe (px)	Breite und Höhe der Icons. Standard: 16 px, Bereich: 8–96 px.
Abstand zum Text (px)	Abstand zwischen Icon und dem zugehörigen Wert. Standard: 6 px.

Text-Stil

Im Block-Panel Text passen Sie die Farbe des Wertetexts an:

Einstellung	Beschreibung
Farbe	Textfarbe der angezeigten Feldwerte. Ohne Angabe wird die Textfarbe des Themes übernommen.

CSS-Klassen für eigene Anpassungen

Für weitergehende Gestaltung können Sie in Ihrem Theme eigene CSS-Regeln verwenden:

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

/* Einzelnes Icon-Wert-Paar */
.immomakler-icon-list__item { }

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

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

Unterschied zu Eckdaten-Boxen

Beide Blöcke zeigen Immobilien-Eckdaten an — der Unterschied liegt im Fokus:

	Eckdaten-Icon-Liste	Eckdaten-Boxen
Darstellung	Kompakte, fließende Icon + Wert-Liste	Optisch abgegrenzte Boxen mit Icon, Beschriftung und Wert
Beschriftung	Keine (nur Wert sichtbar, Beschriftung als Tooltip)	Ja, als eigenständiges Element pro Box
Layout-Optionen	Einfach: Abstand, Ausrichtung	Umfangreich: Flex/Grid, Box-Layout, Reihenfolge
Geeignet für	Kompakte Kurzinfo, z. B. in Listenansichten oder Seitenleisten	Detailseiten mit hervorgehobenen Eckdaten