Crear plantilla de detalle

Con WPBakery Page Builder puede diseñar la vista de detalle de cada inmueble de forma individual. WP-ImmoMakler proporciona elementos especializados de WPBakery 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

• WPBakery Page Builder
• WP-ImmoMakler (cualquier edición)

Cómo llega su diseño a las páginas de detalle de inmuebles

WPBakery no tiene Theme Builder: con él diseña páginas individuales, pero no puede guardar un diseño como plantilla para todos los inmuebles. De ello se encarga una página de plantilla: diseña una página de WordPress totalmente normal con WPBakery y la registra en WP-ImmoMakler como vista de detalle. WP-ImmoMakler muestra entonces esta página en cada página de detalle de inmueble, con los datos del inmueble consultado.

Puede dejar activada la opción El plugin gestiona las vistas de lista y detalle: una página de plantilla tiene prioridad.

Nota

No edite un inmueble individual con WPBakery. Los inmuebles importados se sobrescriben en la siguiente importación desde su software de gestión inmobiliaria, y tendría que diseñar cada inmueble por separado.

Impreza y Salient

Impreza incluye con sus plantillas de página un sistema de plantillas propio que puede utilizar como alternativa. Cómo proceder con Impreza y Salient se explica en Impreza y Salient.

Opción A: Vista de detalle de inmuebles (inicio rápido)

El elemento completo muestra toda la página de detalle, incluyendo 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 una página de plantilla

   Cree una nueva página en Páginas → Añadir nueva, por ejemplo con el título “Plantilla: vista de detalle de inmuebles”, y ábrala en el editor de WPBakery.

2. Insertar elemento

   Haga clic en Añadir elemento y busque Vista detallada de inmuebles. Inserte el elemento en la página.

3. Configurar opciones

   Opcional: desactive la visualización del título de página si su tema ya lo muestra. La opción Mostrar galería de imágenes también permite ocultar la galería integrada.

4. Registrar como vista de detalle

   En el área Plantilla de WP-ImmoMakler, seleccione en Usar como la entrada Vista de detalle (inmueble) y publique la página.

5. Comprobar

   Abra un inmueble en el frontend.

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

El elemento Vista detallada de inmuebles ofrece la opción Mostrar encabezado (predeterminado: activado). Desactívela 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 de inmuebles ofrece la opción Mostrar galería de imágenes (predeterminado: activado). Desactívela para ocultar la galería integrada en la plantilla HTML, por ejemplo cuando desee colocar su propia galería (como el elemento Inmueble: galería de fotos) 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. Cada elemento representa un aspecto específico del inmueble y puede posicionarse y estilizarse libremente.

1. Configurar diseño de página

   Cree una página de plantilla como en la opción A y construya en el editor de WPBakery la estructura de página deseada con filas y columnas; por ejemplo, un área principal con galería y datos a la izquierda, y los datos de contacto a la derecha.

2. Insertar galería

   Inserte el elemento Inmueble: galería de fotos. Muestra las fotografías del inmueble con la misma galería que la sección Galería de imágenes del Customizer — todas las opciones son configurables por instancia del elemento. Véase Configurar galería más abajo.

3. Añadir datos del inmueble

   Inserte los elementos de datos deseados:

   Elemento	Descripción
   Todos los datos del inmueble	Tabla de datos como lista de definición — los campos individuales se pueden mostrar u ocultar con casillas de verificación. La anchura de columna de las etiquetas, los bordes y los espaciados son configurables.
   Certificado energético	Datos del certificado energético con adaptación por país (DE, AT, ES, IT). Las mismas opciones de estilo que la tabla de datos.

4. Insertar textos descriptivos

   Inserte el elemento Descripción del inmueble. Ofrece amplias opciones:

   • Selección del campo de texto (descripción del inmueble, equipamiento, información adicional, ubicación, descripción breve)
   • Limpieza automática de HTML y correcciones tipográficas
   • Reconocimiento de URL y números de teléfono
   • Conversión de viñetas en listas HTML
   • Sangría de lista opcional

   Inserte un elemento propio para cada texto descriptivo, de modo que pueda distribuirlos libremente por la página.

5. Añadir mapa

   Inserte el elemento Inmueble: mapa de la zona. Muestra la ubicación del inmueble con el proveedor de mapas que haya seleccionado en el Customizer, en WP-ImmoMakler → Mapas. La altura del mapa es configurable (por ejemplo, 350px, 50vh, 100%).

6. Diseñar área de contacto

   Elemento	Descripción
   Formulario de contacto	Formulario de solicitud con asignación automática del inmueble
   Datos de contacto	Nombre, teléfono, correo electrónico de la persona de contacto como lista de definición
   Foto de la persona de contacto	Foto de la persona de contacto con proporción de aspecto (3:2, 4:3, 1:1, etc.), borde, espaciados y radio de borde

7. Insertar vídeos

   Inserte el elemento Inmueble: vídeos para mostrar todos los vídeos asociados al inmueble. A partir de PLUS, el elemento Inmueble: visitas virtuales muestra los tours virtuales de 360° del inmueble como imagen de vista previa que abre el tour en un lightbox cuando los visitantes han dado su consentimiento. La relación de aspecto y el radio de las esquinas se ajustan en el elemento.

8. Registrar como vista de detalle y comprobar

   En el área Plantilla de WP-ImmoMakler, seleccione en Usar como la entrada Vista de detalle (inmueble), publique la página y abra un inmueble en el frontend.

Elementos de detalle disponibles

Elemento	Descripción
Vista detallada de inmuebles	Vista de detalle completa con plantilla HTML de WP-ImmoMakler
Todos los datos del inmueble	Tabla de datos como lista de definición con opciones de estilo
Casillas de datos clave	Datos seleccionados del inmueble como casillas con etiqueta y valor
Descripción del inmueble	Campos de descripción en texto libre con formato
Certificado energético	Datos del certificado energético con soporte multipaís
Inmueble: galería de fotos	Galería de imágenes completa con modo slideshow/estático, todas las opciones del Customizer por instancia
Inmueble: mapa de la zona	Mapa con la ubicación del inmueble
Inmueble: vídeos	Vídeos como imagen de vista previa con lightbox; relación de aspecto y radio de las esquinas ajustables
Inmueble: visitas virtuales PLUS	Tours virtuales como imagen de vista previa con lightbox; relación de aspecto y radio de las esquinas ajustables
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
Foto de la persona de contacto	Foto con proporción de aspecto y estilo

Configurar galería

El elemento Inmueble: galería de fotos proporciona por instancia las mismas opciones que la sección Galería de imágenes del Customizer. Resumen de los grupos principales:

Á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 del slideshow	Vertical (tira de miniaturas debajo), Horizontal (tira de miniaturas a la derecha), Sin miniaturas, Carrusel
Diseño estático	Vertical (tira de miniaturas debajo), 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 la transición	100–2000 ms (predeterminado 400 ms)
Autoplay	Avance automático con retardo en segundos configurable
Proporciones de aspecto	Imagen principal y miniaturas configurables de forma independiente (16:9, 3:2, 4:3, 1:1, Secció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	40–400 px de ancho (controla el número de miniaturas visibles simultáneamente)
Miniaturas en móvil	Mostrar u ocultar en dispositivos ≤ 768 px
Altura del carrusel	Unidad de píxel 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
Indicador de más fotos	Superposición de contador en la última miniatura (+N) o botón bajo 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)
Espaciados + redondeo	Separación entre imágenes, radio de borde (cada imagen individualmente o solo esquinas exteriores de la galería)
Color de navegación	Selector de color para los botones de flecha y puntos de paginación (modo slideshow)

Las descripciones de los valores individuales se encuentran en la documentación del Customizer para el slideshow y la galería estática — el mismo vocabulario se aplica al elemento de WPBakery.

Consejo

Si el elemento debe mostrar exactamente la configuración predeterminada del Customizer sin más ajustes, deje las opciones del elemento en sus valores predeterminados — estos coinciden con la configuración predeterminada del Customizer.

Nota

La visualización condicional (p. ej., las opciones estáticas desaparecen en el modo slideshow) sigue el sistema dependency de WPBakery, que solo puede comprobar un parámetro padre directo. En algunas configuraciones, por tanto, pueden quedar visibles campos que no tienen efecto en el modo activo — el renderizado filtra dichos valores al mostrarse.

Opciones de estilo

Tablas de datos (Datos de inmueble, Certificado energético, Datos de contacto)

Todos los elementos de lista de definición comparten las mismas opciones de estilo:

• Anchura de columna izquierda — Anchura de la columna de etiquetas
• Borde — Líneas divisorias entre filas
• Espaciados — Relleno interior de las celdas
• Editor CSS — Reglas CSS propias directamente en el elemento

Foto de la persona de contacto

El elemento de foto ofrece posibilidades de diseño avanzadas:

• Proporción de aspecto — Original, 3:2, 4:3, 1:1, 3:4, 2:3
• Espaciados — Margen y relleno (los cuatro lados de forma independiente)
• Radio de borde — Las cuatro esquinas configurables de forma independiente
• Borde — Color, anchura y estilo (solid, dashed, dotted, double)

Vista previa y pruebas

WPBakery muestra una vista previa simplificada de los elementos en el editor de backend. Para probar la página de plantilla con datos reales de inmuebles:

1. Guardar la página de plantilla

   Guarde la página de plantilla.

2. Abrir un inmueble

   Abra un inmueble en el frontend.

3. Comprobar la presentación

   Compruebe que todos los elementos se muestran correctamente y que los datos del inmueble aparecen.

La dirección de la propia página de plantilla no sirve para ello: allí no hay ningún inmueble en contexto y los visitantes son redirigidos a la vista de lista de inmuebles.

Con condiciones en la página de plantilla puede utilizar diseños distintos para inmuebles distintos, por ejemplo uno para casas y otro para pisos. Véase Diferentes plantillas para diferentes inmuebles.

Consejo

Procedimiento recomendado: Comience con el elemento completo Vista detallada de inmuebles para familiarizarse con los datos disponibles. A continuación, cree progresivamente un diseño individual sustituyendo secciones individuales por elementos especializados.

También puede interesarle

• Páginas de plantilla
• Crear plantilla de archivo
• Impreza y Salient
• Galería de imágenes: Slideshow con miniaturas — Opciones de configuración del Customizer para la galería Swiper