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)

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 WPBakery.

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 página o plantilla

   Cree una plantilla de WPBakery para el tipo de contenido Inmueble o edite un inmueble existente directamente.

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. Guardar y comprobar

   Guarde y 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 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 Mapa del barrio. 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 Vídeos para mostrar todos los vídeos asociados al inmueble.

8. Guardar y comprobar

   Guarde 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
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
Mapa del barrio	Mapa con la ubicación del inmueble
Vídeos	Vídeos incrustados
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)
Efecto de transición	Deslizar (predeterminado) o Desvanecer (cross-fade)
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, Original; estático además 2:1 y 3:1)
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
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 plantilla con datos reales de inmuebles:

1. Guarde la página o la plantilla.
2. Abra un inmueble en el frontend.
3. Compruebe que todos los elementos se muestran correctamente y que los datos del inmueble aparecen.

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

• Galería de imágenes: Slideshow con miniaturas — Opciones de configuración del Customizer para la galería Swiper
• Crear plantilla de detalle (Divi Theme Builder) — La misma guía para Divi
• Crear plantilla de detalle (Elementor Pro) — La misma guía para Elementor Pro
• Crear plantilla de detalle (Bricks Builder) — La misma guía para Bricks