Crear plantilla de detalle

Con Bricks Builder puede diseñar la vista de detalle de cada inmueble de forma individual. WP-ImmoMakler proporciona elementos especializados de Bricks que cubren todos los aspectos de un inmueble: desde la galería de imágenes y las fichas de datos hasta el formulario de contacto.

Requisitos

• Bricks Builder (tema activo)
• WP-ImmoMakler (cualquier edición)

Nota

WP-ImmoMakler detecta sus plantillas automáticamente: en cuanto una plantilla de Bricks se aplica a una página de inmuebles, la página se muestra con ella. Las páginas sin una plantilla adecuada se siguen mostrando con las plantillas propias de WP-ImmoMakler. No tiene que configurar nada.

Opción A: Vista de detalle (completa)

El elemento completo muestra toda la página de detalle, incluidos la galería, los datos, el mapa, el formulario de contacto y todo lo que forma parte de una vista de detalle completa.

1. Crear nueva plantilla

   Navegue a Bricks > Plantillas y cree una nueva plantilla del tipo Single.

2. Configurar condiciones

   Abra los ajustes de la plantilla y establezca el Post Type en immomakler_object bajo Conditions.

   Para una vista detallada propia de proyectos de obra nueva o inmuebles de referencia, cree una segunda plantilla: en Conditions, seleccione la condición WP-ImmoMakler y, en Inmuebles, la entrada Proyectos o Inmuebles de referencia. Para esos inmuebles, esta plantilla tiene prioridad sobre la plantilla para todos los inmuebles; una plantilla para un único inmueble sigue prevaleciendo.

3. Insertar elemento

   Abra el editor de Bricks e inserte el elemento Vista detallada (completa) de la categoría WP-ImmoMakler.

4. Guardar y comprobar

   Guarde la plantilla y abra cualquier inmueble en el frontend.

Diseñe su propio título de página

El elemento Vista detallada (completa) ofrece la opción Mostrar encabezado (predeterminado: Sí). Elija No para ocultar el encabezado (h1) generado por la plantilla HTML — por ejemplo cuando desee diseñar el título de página usted mismo o cuando su tema ya lo muestra.

Use su propia galería

El elemento Vista detallada (completa) ofrece la opción Mostrar galería de imágenes (predeterminado: Sí). Elija No para ocultar la galería integrada en la plantilla HTML, por ejemplo cuando desee colocar su propia galería (como el elemento Galería de imágenes o un elemento de Bricks con el Dynamic Tag {immomakler_property_images}) encima del título.

Opción B: Plantilla individual personalizada

Para total libertad de diseño, construya la vista de detalle a partir de elementos individuales de WP-ImmoMakler y Dynamic Tags. Cada elemento representa un aspecto específico del inmueble y puede posicionarse y estilizarse libremente.

1. Crear nueva plantilla

   Cree una nueva plantilla de Bricks del tipo Single y establezca la condición sobre el Post Type immomakler_object.

2. Construir la estructura de página

   Cree la estructura de página deseada con secciones y columnas; por ejemplo, un área principal con galería y datos a la izquierda, y a la derecha una barra lateral con el exposé en PDF y la persona de contacto. El formulario de contacto necesita espacio para campos multicolumna y los textos de consentimiento; colóquelo en su propia sección a ancho completo debajo de las dos columnas.

3. Insertar galería

   Dispone de tres opciones para mostrar las fotografías del inmueble:

   Variante 1: Galería de imágenes de WP-ImmoMakler Inserte el elemento Galería de imágenes de la categoría WP-ImmoMakler. Proporciona las mismas opciones que conoce del Customizer, por instancia de elemento. Consulte Configurar la galería más abajo.

   Variante 2: Elementos de galería propios de Bricks Utilice un elemento Carousel, Slider o Image Gallery propio de Bricks y establezca como fuente de imagen el Dynamic Tag {immomakler_property_images}. Así tendrá control total sobre las opciones del slider, las animaciones y el diseño, con todas las posibilidades de estilo de Bricks.

   Variante 3: Galería de terceros Los elementos de galería de terceros (por ejemplo, BricksExtras, BricksForge, Jetstylizer) también pueden utilizarse con el Dynamic Tag {immomakler_property_images} como fuente de imagen. Seleccione la fuente de imagen dinámica en el elemento correspondiente e inserte el tag.

   Con el tag de fotos también puede filtrar las imágenes:

   • {immomakler_property_images} — Todas las imágenes
   • {immomakler_property_images:non_floorplans} — Todas las imágenes excepto planos de planta
   • {immomakler_property_images:floorplans} — Solo planos de planta

4. Añadir datos del inmueble

   Inserte los elementos de datos deseados:

   Elemento	Descripción
   Datos del inmueble	Tabla de datos como lista de definición — los campos individuales se pueden mostrar u ocultar con casillas de verificación
   Certificado energético	Datos del certificado energético con adaptación por país (DE, AT, ES, IT) y diagrama de energía
   Equipamiento/características	Características de equipamiento como lista de iconos con diseño, iconos y estilo configurables

5. Insertar textos descriptivos

   Utilice un elemento Basic Text o Rich Text de Bricks con el Dynamic Tag {immomakler_description:key}. Campos de descripción disponibles:

   • {immomakler_description:objektbeschreibung} — Descripción del inmueble
   • {immomakler_description:ausstatt_beschr} — Descripción de equipamiento
   • {immomakler_description:lage} — Descripción de ubicación
   • {immomakler_description:sonstige_angaben} — Información adicional
   • {immomakler_description:dreizeiler} — Descripción breve

   El resultado se formatea automáticamente: los caracteres de lista se convierten en listas, las URL y los números de teléfono se enlazan, y se aplican correcciones tipográficas.

6. Añadir mapa

   Inserte el elemento Mapa del barrio. Muestra la ubicación del inmueble con el proveedor de mapas que haya seleccionado en el Customizer, en WP-ImmoMakler → Mapas.

7. Insertar formulario de contacto

   Inserte el elemento Formulario de contacto. Muestra el formulario de contacto de WP-ImmoMakler con asignación automática del inmueble. Asigne a la sección del formulario el ID kontakt en Attributes, de modo que un botón con el enlace #kontakt salte directamente al formulario.

   Para la persona de contacto existen los elementos Foto de la persona de contacto y Datos de contacto. La foto tiene ajustes de relación de aspecto, ancho y borde (con radio de esquina, por ejemplo 50 % para una foto redonda); los datos de contacto se seleccionan campo por campo, igual que los datos del inmueble. Si la persona de contacto no tiene foto, el elemento no muestra nada.

8. Insertar vídeos

   Inserte el elemento Vídeos para mostrar todos los vídeos asociados al inmueble.

9. Condiciones para visualización condicional

   Utilice condiciones de Bricks para mostrar secciones solo cuando los datos correspondientes estén disponibles. Las condiciones se encuentran bajo el grupo WP-ImmoMakler:

   • Contenido del inmueble — Mostrar una sección junto con su encabezado solo si hay vídeos, un tour virtual, un mapa, etc., o un botón de descarga de PDF solo si hay un documento PDF disponible
   • Datos del inmueble — Mostrar una fila solo si un campo de datos tiene un valor
   • Textos descriptivos — Mostrar secciones de texto solo si hay un campo de descripción relleno
   • Inmueble de referencia — Ocultar, por ejemplo, el botón de consulta en los inmuebles de referencia
   • Proyecto — Mostrar u ocultar elementos solo en la página de detalle de un proyecto de construcción
   • Condiciones de taxonomía — Diseños diferentes según el tipo de inmueble, tipo de comercialización o país

10. Guardar y comprobar

    Guarde la plantilla y abra un inmueble en el frontend.

Ejemplo: Estructura de plantilla

Section
├── Heading           → Dynamic Tag: {post_title}
├── Galería de imágenes     → Elemento WP-ImmoMakler
├── Columns
│   ├── Datos del inmueble       → Elemento WP-ImmoMakler
│   └── Certificado energético    → Elemento WP-ImmoMakler
├── Heading           → Descripción
├── Basic Text        → Dynamic Tag: {immomakler_description:objektbeschreibung}
├── Heading           → Ubicación
├── Basic Text        → Dynamic Tag: {immomakler_description:lage}
├── Equipamiento      → Elemento WP-ImmoMakler
├── Mapa de entorno   → Elemento WP-ImmoMakler
├── Vídeos            → Elemento WP-ImmoMakler
├── Aside
│   ├── Foto de la persona de contacto → Elemento WP-ImmoMakler
│   ├── Datos de contacto              → Elemento WP-ImmoMakler
│   └── Button                         → Enlace: #kontakt
Section (ID: kontakt)
└── Formulario de contacto   → Elemento WP-ImmoMakler

Elementos de detalle disponibles

Elemento	Descripción
Vista detallada (completa)	Vista de detalle completa con plantilla HTML de WP-ImmoMakler
Datos del inmueble	Tabla de datos como lista de definición con opciones de estilo
Certificado energético	Datos del certificado energético con diagrama y soporte multipaís
Equipamiento/características	Lista de iconos con control de diseño y estilo
Galería de imágenes	Galería de imágenes del inmueble
Mapa del barrio	Mapa con la ubicación del inmueble
Formulario de contacto	Formulario de contacto con asignación de inmueble
Datos de contacto	Datos de la persona de contacto como lista de definición, con campos seleccionables individualmente
Foto de la persona de contacto	Foto de la persona de contacto con relación de aspecto, ancho y borde
Vídeos	Vídeos como imagen de vista previa con lightbox; relación de aspecto y radio de las esquinas ajustables
Visitas virtuales PLUS	Tours virtuales de 360° como imagen de vista previa con lightbox; relación de aspecto y radio de las esquinas ajustables

Inmuebles similares

PLUS Muestre inmuebles similares (mismo tipo de inmueble, mismo tipo de comercialización, cercanos) con un Query Loop de Bricks y su propia tarjeta:

1. Crear la tarjeta

   Cree un Bloque para la tarjeta y diséñelo como las tarjetas de su resumen de inmuebles, por ejemplo con la Galería, el Dynamic Tag {immomakler_value:ort}, un encabezado con {post_title} y las Casillas de datos clave.

2. Activar el Query Loop

   Active en el bloque el Query Loop y elija en Consulta el tipo Inmuebles similares (WP-ImmoMakler).

3. Definir el número

   En el campo Número de inmuebles similares defina cuántos deben aparecer (por defecto: 3).

El inmueble mostrado actualmente nunca se incluye. En el editor, el bucle muestra los inmuebles similares del inmueble de vista previa que haya elegido en Populate Content. Qué inmuebles se consideran similares se describe en Inmuebles similares.

Configurar la galería

El elemento Galería de imágenes ofrece, por instancia de elemento, las mismas opciones que la sección Galería de imágenes del Customizer. Los grupos más importantes en resumen:

Área	Opciones
Selección de imágenes	Todas las imágenes, solo planos de planta, sin planos de planta
Tipo de galería	Slideshow (galería basada en Swiper con lightbox) o Estático (cuadrícula de imágenes sin slider, lightbox al hacer clic)
Diseño de Slideshow	Vertical (barra de miniaturas abajo), Horizontal (barra de miniaturas a la derecha), Sin miniaturas, Carrusel
Diseño estático	Vertical (barra de miniaturas abajo), Horizontal (cuadrícula de miniaturas a la derecha), Sin miniaturas, Cuadrícula (todas las imágenes como mosaicos de igual tamaño, sin imagen principal), Mosaico (bloques de 4 fotos con mosaicos grandes y pequeños alternos, sin imagen principal)
Efecto de transición	Deslizar (predeterminado), Desvanecer o “Aus- und Einblenden” — véase Galería de imágenes: Slideshow
Duración de transición	100–2.000 ms (predeterminado 400 ms)
Reproducción automática	Cambio automático con retardo configurable en segundos
Proporciones	Imagen principal y miniaturas configurables de forma independiente (16:9, 3:2, 4:3, 1:1, Proporción áurea, 2:1, 21:9, 3:1, 32:9 y Original)
Encuadre	Qué parte de una foto recortada permanece visible: centro (predeterminado), arriba o abajo
Tamaño de miniatura	Anchura 40–400 px (controla el número de miniaturas visibles simultáneamente)
Miniaturas en móvil	Mostrar u ocultar en dispositivos ≤ 768 px
Altura de carrusel	Unidad de píxeles o viewport (px, vw, vh, svh, lvh, dvh)
Cuadrícula estática	Filas y columnas configurables de forma independiente por variante de diseño
Altura de galería (estática)	Automática o fija
Aviso de más fotos	Superposición de contador en la última miniatura (+N) o botón debajo de la galería (“Mostrar todas las N fotos”)
Animación al pasar el cursor (estático)	Ninguna / Zoom suave (predeterminado) / Aclarar — respuesta visual al pasar el cursor por las imágenes
Opciones de cuadrícula	Solo en el diseño estático “Cuadrícula”: columnas (máximo, 1–6), anchura mínima por mosaico (por debajo de la cual se elimina una columna automáticamente), proporción de mosaico, ajuste de imagen (Recortar para fotos o Mostrar completa para planos de planta) y título de imagen como leyenda. Combinado con la selección de imágenes “solo planos de planta”, esto produce una caja de planos como la del skin de WP-ImmoMakler
Opciones de mosaico	Solo en el diseño estático “Mosaico”: relación de aspecto del bloque, distribución de la altura de fila (1:1, 2:1 o sección áurea) y limitar el número de imágenes (4, 8, 12 o 16 imágenes)
Espaciado + redondeo	Espacio entre imágenes, radio de borde (cada imagen individualmente o solo los bordes exteriores de la galería)
Color de navegación	Selector de color para botones de flecha y puntos de paginación (modo Slideshow)

Las descripciones detalladas de cada valor se encuentran en la documentación del Customizer para la Slideshow y la galería estática — el mismo vocabulario se aplica al elemento de Bricks.

Consejo

Si desea que el elemento muestre exactamente el valor predeterminado del Customizer sin ninguna configuración adicional, deje las opciones del elemento en sus valores predeterminados — estos coinciden con los valores predeterminados del Customizer.

Dynamic Tags para la vista de detalle

Además de los elementos especializados, puede utilizar Dynamic Tags en cualquier elemento de Bricks:

Tag	Descripción
{immomakler_value:key}	Valor formateado de un campo de datos (precio, superficie, habitaciones, etc.)
{immomakler_label:key}	Etiqueta traducida de un campo de datos
{immomakler_description:key}	Texto descriptivo con formato automático
{immomakler_property_images}	Fotografías del inmueble como fuente de imagen

Condiciones para visualización condicional

Con las condiciones evita secciones vacías en la página de detalle:

Condición	Uso recomendado
Contenido del inmueble	Mostrar vídeos, tours, planos, mapa, certificado energético o un botón de descarga de PDF solo si están disponibles
Datos del inmueble	Mostrar filas de datos o mosaicos individuales solo si tienen un valor
Inmueble de referencia	Ocultar el botón de consulta o los precios en los inmuebles de referencia
Proyecto	Mostrar u ocultar elementos solo en la página de detalle de un proyecto de construcción
Textos descriptivos	Mostrar secciones de texto solo si hay descripción disponible
País	Presentación específica por país (p. ej., certificado energético solo para España)
Tipo de inmueble	Campos diferentes para pisos que para terrenos
Tipo de comercialización	Presentación de precios diferente para venta y alquiler
Estado	Presentación especial para inmuebles de referencia

Vista previa y pruebas

Bricks ofrece una vista previa en tiempo real directamente en el editor. Para probar la plantilla con datos reales de inmuebles:

1. Abrir la plantilla

   Abra la plantilla en el editor de Bricks.

2. Elegir un inmueble de vista previa

   En los ajustes de la plantilla, en Populate Content, elija “Single (post/page/CPT)” como Content Type y luego un inmueble. Sin este ajuste, los elementos de WP-ImmoMakler permanecen vacíos en el editor porque no hay ningún inmueble cargado.

3. Comprobar en el frontend

   Compruebe el resultado también en el frontend abriendo directamente un inmueble.

Consejo

Procedimiento recomendado: Comience con el elemento completo Vista detallada (completa) para familiarizarse con los datos disponibles. A continuación, cree progresivamente una plantilla individual sustituyendo secciones individuales por elementos especializados y Dynamic Tags.

También puede interesarle

• Bricks Builder: resumen — Todos los elementos, Dynamic Tags y condiciones de un vistazo
• Crear plantilla de archivo — Diseñar la vista de lista de inmuebles con Bricks
• Crear plantilla de detalle (Elementor Pro) — La misma guía para Elementor Pro
• Crear plantilla de detalle (Divi Theme Builder) — La misma guía para Divi