Insertar bloque Cajas de datos clave

Con el bloque de Gutenberg Cajas de datos básicos (immomakler/single-data-boxes) muestra los datos más importantes de un inmueble — precio, superficie, número de habitaciones y mucho más — como cajas visualmente atractivas. Cada caja muestra un icono, una etiqueta y el valor correspondiente. El bloque tiene el mismo alcance funcional y resultado que el widget de Elementor del mismo nombre, “Cajas de datos básicos”, y se puede configurar individualmente para cada instancia.

Requisitos

WordPress con editor Gutenberg (desde WordPress 5.0)
WP-ImmoMakler (cualquier edición)

Insertar el bloque

Editar inmueble o abrir plantilla

Abra un inmueble existente en el editor o una plantilla basada en bloques para el tipo de contenido Inmueble (requiere un tema de bloques o el editor de sitio).
Insertar el bloque

Haga clic en el símbolo + y busque Cajas de datos básicos o navegue a la categoría Widgets. Inserte el bloque.
Comprobar vista previa

En el editor se muestra inmediatamente una vista previa en tiempo real con los datos de un inmueble de muestra existente. En la página real del inmueble se muestran los datos del objeto correspondiente.

Configurar campos (entradas)

En el panel del bloque Entradas (barra lateral izquierda, pestaña Configuración) gestiona qué campos de datos se muestran como cajas.

Cambiar el orden

Use los botones de flecha hacia arriba y flecha hacia abajo junto a cada entrada para ajustar el orden de visualización.

Mostrar/ocultar entradas

Haga clic en el símbolo × de una entrada para eliminarla. Use + Añadir entrada al final de la lista para agregar nuevos campos.

Configurar una entrada

Haga clic en el botón de flecha hacia abajo de una entrada para desplegar su configuración:

Configuración	Descripción
Campo	El campo de datos del inmueble cuyo valor se muestra en la caja (p. ej. `kaufpreis`, `wohnflaeche`).
Icono	Icono de la biblioteca estándar de WP-ImmoMakler. Automático selecciona el icono correspondiente al campo (p. ej. icono de casa para precio de compra, icono de superficie para campos de m²).
Sobrescribir etiqueta	Texto opcional que sustituye la etiqueta de campo automática (p. ej. “Precio” en lugar de “Precio de compra”).
Si está vacío	Controla qué ocurre cuando el campo no tiene valor en el inmueble: Ocultar caja (predeterminado) o Mostrar marcador de posición.
Marcador de posición	Solo visible con “Mostrar marcador de posición”: –, n/d o no especificado.

Diseño y presentación

En el panel del bloque Apariencia controla cómo se organizan las cajas:

Estilo de visualización

Opción	Descripción
Flex (fluido)	Las cajas se ordenan una junto a la otra y se adaptan automáticamente — adecuado para un número variable de cajas.
Cuadrícula	Las cajas se ordenan en una cuadrícula fija. Con el estilo de cuadrícula, el número de columnas (1–6) se puede configurar.

Diseño de caja

Controla cómo se organizan el icono, la etiqueta y el valor dentro de una caja:

Opción	Disposición
Apilado (predeterminado)	Icono, etiqueta y valor apilados. El orden exacto es configurable mediante “Orden (Apilado)”.
Icono izquierda — etiqueta/valor derecha	Icono en la columna izquierda, etiqueta arriba a la derecha, valor debajo.
Icono izquierda/valor derecha — etiqueta debajo	Icono arriba a la izquierda, valor arriba a la derecha, etiqueta centrada debajo.

Orden (Apilado)

Solo para el diseño de caja Apilado: seleccione una de las seis disposiciones posibles de icono (I), etiqueta (E) y valor (V):

I → E → V (predeterminado)
I → V → E
E → I → V
E → V → I
V → I → E
V → E → I

Estilos

El aspecto de las cajas (colores, espaciados, tamaños de fuente, etc.) se ajusta a través del menú de la barra de herramientas del bloque y las opciones de Diseño en la barra lateral — igual que con otros bloques de WordPress. Para personalizaciones más avanzadas puede escribir reglas CSS propias para las clases del bloque en su tema:

/* Lista envoltorio */
.immomakler-data-list { }

/* Caja individual */
.immomakler-data-box { }

/* Icono, etiqueta, valor */
.immomakler-data-icon { }
.immomakler-data-label { }
.immomakler-data-value { }