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

En el backend de su sitio web (wp-admin), desactive la opción El plugin gestiona las vistas de lista y detalle en WP-ImmoMakler → Ajustes → Theme Builder si desea controlar la presentación completamente con Bricks.

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.

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 el formulario de contacto a la derecha.

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.

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:

   • Textos descriptivos — Mostrar secciones de texto solo si hay un campo de descripción relleno
   • PDF — Mostrar el botón de descarga de PDF solo si existe un PDF
   • 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
└── 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
Vídeos	Vídeos incrustados

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)
Efecto de transición	Deslizar (predeterminado) o Fundido cruzado (Cross-Fade)
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, Original; estático además 2:1 y 3:1)
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
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
Textos descriptivos	Mostrar secciones de texto solo si hay descripción disponible
PDF	Mostrar el botón de descarga de PDF solo si existe un PDF
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. Abra la plantilla en el editor de Bricks.
2. Bricks muestra automáticamente los datos de un post del tipo asignado. En los ajustes de vista previa puede seleccionar un post específico.
3. 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