Divi 4: Crear plantilla de detalle

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

Nota

Esta guía es válida para Divi 4. Para Divi 5, consulte Divi 5: Crear plantilla de archivo y detalle.

Requisitos

• Tema Divi o Plugin Divi Builder (versión 4.x)
• WP-ImmoMakler (cualquier edición)

Consejo

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 el Divi Theme Builder.

Opción A: Versión HTML de 1 clic (inicio rápido)

El módulo de 1 clic muestra la vista de detalle de WP-ImmoMakler, incluyendo la galería, los datos, el mapa, el formulario de contacto y todo lo que forma parte de una página de detalle completa.

1. Abrir Theme Builder

   Navegue en el backend de su sitio web (wp-admin) a Divi → Theme Builder.

   

2. Crear nueva plantilla

   Haga clic en Añadir nueva plantilla y seleccione Crear nueva plantilla. En el panel Configuración de plantilla, en la pestaña Usar en, desplácese hasta la sección Inmuebles y active Todos los inmuebles.

   

   Haga clic en Crear plantilla.

   

3. Crear diseño de cuerpo

   Haga clic en Añadir cuerpo personalizado en la nueva plantilla y seleccione Crear cuerpo personalizado.

   

4. Añadir fila e insertar módulo

   Se abre el Visual Builder. Haga clic en +, seleccione el diseño de una columna y busque el módulo WP-ImmoMakler 1-Click: Vista detallada.

   

5. Guardar y comprobar

   Guarde la plantilla y abra cualquier inmueble en el frontend.

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

El módulo 1 clic: Vista de detalle 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 módulo 1 clic: Vista de detalle 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 módulo WP-ImmoMakler Galería de imágenes) encima del título.

Opción B: Plantilla individual personalizada

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

1. Abrir Theme Builder

   Navegue en el backend de su sitio web (wp-admin) a Divi → Theme Builder.

2. Crear nueva plantilla

   Haga clic en Añadir nueva plantilla y active bajo Inmuebles la casilla Todos los inmuebles en el panel Configuración de plantilla.

3. Crear diseño de cuerpo

   Haga clic en Añadir cuerpo personalizado y seleccione Crear cuerpo personalizado. Cree 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.

4. Insertar galería

   Añada el módulo WP-ImmoMakler Galería de imágenes: la galería de imágenes completa con modo slideshow y estático, lightbox y todas las opciones del Customizer configurables por instancia de módulo.

   El módulo Galería de imágenes proporciona las mismas opciones que conoce del Customizer — por instancia de módulo. Esto resulta útil cuando una plantilla necesita una forma de galería diferente a la configuración predeterminada del Customizer (p. ej. una imagen hero en formato cinemascope en la plantilla premium, mientras que la plantilla estándar usa el slideshow habitual), o cuando hay varias galerías con diferentes ajustes en una misma página (fotos arriba como slideshow, planos de planta más abajo como cuadrícula estática).

   Véase Configurar galería más abajo para una descripción detallada de las opciones.

5. Añadir datos del inmueble

   Inserte los módulos de datos deseados:

   Módulo	Descripción
   Tabla de datos WP-ImmoMakler	Tabla de datos como lista de definición con campos configurables, anchura de columna, separación de filas y colores de fondo alternos
   Cajas de datos WP-ImmoMakler	Datos principales como CSS Grid responsivo con anchura de caja y espaciado ajustables
   Certificado de eficiencia energética WP-ImmoMakler	Datos del certificado energético con soporte regional (Alemania, Austria, España, Italia) y diagrama de energía

6. Insertar textos descriptivos

   Utilice el módulo Texto de descripción de WP-ImmoMakler. Ofrece amplias opciones:

   • Selección del campo de texto (descripción breve, descripción del inmueble, equipamiento, ubicación, información adicional)
   • 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
   • Diseño de columnas responsivo (escritorio, tablet, móvil)
   • Alternador “Mostrar más/Menos” con altura configurable
   • Encabezado propio con etiqueta HTML seleccionable

7. Añadir mapa

   Inserte el módulo Mapa de localización de WP-ImmoMakler. 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.

8. Insertar datos de contacto

   El módulo Datos de contacto de WP-ImmoMakler muestra la información de la persona de contacto, con foto, nombre, teléfono, correo electrónico, etc. Puede mostrar u ocultar etiquetas individuales y ajustar el espaciado entre la foto y los datos.

9. Vídeos y tours virtuales

   Módulo	Descripción
   WP-ImmoMakler Vídeos	Vídeos de YouTube/Vimeo incrustados
   Visita virtual WP-ImmoMakler PLUS	Tours de 360° con proporción de aspecto configurable

10. Guardar y comprobar

    Guarde la plantilla en el Theme Builder y abra un inmueble en el frontend.

Módulos de detalle disponibles

Módulo	Descripción
WP-ImmoMakler 1-Click: Vista detallada	Vista de detalle completa con plantilla HTML de WP-ImmoMakler
Datos de contacto de WP-ImmoMakler	Persona de contacto con foto y datos
Texto de descripción de WP-ImmoMakler	Campos de descripción en texto libre con formato
Tabla de datos WP-ImmoMakler	Tabla de datos como lista de definición
Cajas de datos WP-ImmoMakler	Datos principales como cuadrícula responsiva
Certificado de eficiencia energética WP-ImmoMakler	Datos del certificado energético con diagrama
WP-ImmoMakler Galería de imágenes	Galería de imágenes completa con modo slideshow/estático, todas las opciones del Customizer por instancia
Mapa de localización de WP-ImmoMakler	Mapa con la ubicación del inmueble
WP-ImmoMakler Vídeos	Vídeos incrustados
Visita virtual WP-ImmoMakler PLUS	Tours de 360°

Configurar galería

El módulo WP-ImmoMakler Galería de imágenes proporciona por instancia de módulo 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 módulo de Divi.

Consejo

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

Uso del contenido dinámico

Además de los módulos especializados, puede utilizar el contenido dinámico de Divi en cualquier módulo estándar. WP-ImmoMakler registra campos en el grupo WP-ImmoMakler:

Campo	Descripción
Título del inmueble	Título del inmueble procedente del software inmobiliario
Subtítulo	Código postal, localidad, tipo de inmueble
Precio	Precio formateado
Descripción breve	Descripción corta
Descripción del inmueble	Descripción detallada
Equipamiento/Descripción	Descripción de equipamiento
Ubicación	Descripción de ubicación
Información adicional	Información adicional
Imagen destacada del inmueble	Imagen destacada del inmueble, para módulos de imagen y fondos
Primer archivo PDF adjunto	URL del primer PDF adjunto al inmueble
Primer archivo PDF adjunto con “plano” en el título o el nombre del archivo	URL del primer archivo PDF adjunto cuyo título o nombre de archivo contiene “plano”
Enlace de vuelta a la vista de lista (a la tarjeta del inmueble)	Para un botón “Volver a la vista general” propio: lleva de vuelta a la lista de la que proviene el visitante y allí se desplaza hasta la tarjeta del inmueble — también con plugin de caché

Los campos de texto admiten presentación con icono opcional, texto previo/posterior individual y (en campos de descripción) formato automático.

Vista previa y pruebas

Dado que Divi no ofrece un modo de vista previa en tiempo real con datos reales de inmuebles en el Theme Builder, lo mejor es probar la plantilla directamente en el frontend:

1. Guarde la plantilla en el Theme Builder.
2. Abra cualquier inmueble en el frontend.
3. Compruebe que todos los módulos se muestran correctamente y que los datos del inmueble aparecen.

Consejo

Procedimiento recomendado: Comience con la versión HTML de 1 clic para familiarizarse con los datos disponibles. A continuación, cree progresivamente una plantilla individual sustituyendo secciones individuales por módulos especializados.

También puede interesarle

• Divi Theme Builder: resumen
• Crear plantilla de archivo
• Galería: configurar slideshow
• Galería: vista estática