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

WP-ImmoMakler detecta sus plantillas automáticamente: en cuanto una plantilla del Divi Theme Builder 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: 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.

   

   Una vista de detalle propia para proyectos de obra nueva o inmuebles de referencia se crea como plantilla adicional: en la sección Inmuebles, active Proyectos (WP-ImmoMakler) o Inmuebles de referencia (WP-ImmoMakler) en lugar de Todos los inmuebles. Para estos inmuebles, la plantilla tiene prioridad sobre la de todos los inmuebles; una plantilla para inmuebles individuales sigue prevaleciendo. Las mismas entradas también están disponibles en la pestaña de exclusión, para excluir proyectos o inmuebles de referencia de una 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
   Lista de superficies de WP-ImmoMakler	Solo las superficies del inmueble, con los mismos ajustes que la tabla de datos
   Lista de precios de WP-ImmoMakler	Solo los precios del inmueble, con los mismos ajustes que la tabla de datos
   Lista de texto de datos clave de WP-ImmoMakler	Datos clave en una línea, separados por un separador. Bajo Campos elige Como en la vista de lista o Selección personalizada; para la selección propia añade una entrada Campo por cada campo y cambia el orden arrastrando y soltando. El separador y su color se ajustan en la pestaña Diseño
   Ubicación de WP-ImmoMakler	Código postal y localidad, si lo desea con el tipo de inmueble, o una línea propia con hasta cuatro componentes, como el barrio y la localidad. El icono y su color se ajustan en la pestaña Diseño
   WP-ImmoMakler Equipamiento/Características	Las características de equipamiento como lista o una junto a otra (diseño Inline), con flecha, marca de verificación, punto o estrella como icono en el color y tamaño que elija
   Lista de iconos de datos básicos de WP-ImmoMakler	Datos básicos como superficie habitable, habitaciones y plazas de aparcamiento una junto a otra, cada uno con un icono. En la pestaña Contenido elige los campos; en la pestaña Diseño, el espaciado, el color, el tamaño y el grosor de trazo de los iconos, así como la tipografía
   Ubicación de WP-ImmoMakler	Código postal y localidad, si lo desea con el tipo de inmueble, o una línea propia de hasta cuatro componentes, como el barrio y la localidad. El icono y su color se ajustan en la pestaña Diseño
   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.

   Si desea colocar la foto y el formulario por separado, utilice para ello módulos propios:

   Módulo	Descripción
   Foto de la persona de contacto de WP-ImmoMakler	Solo la foto de la persona de contacto, con proporción de aspecto, espaciados, radio de las esquinas y borde en la pestaña Diseño, en Estilo de foto
   Formulario de contacto de WP-ImmoMakler	El formulario de contacto con protección antispam; en la pestaña Diseño, en Colores, ajusta el color de fondo y de texto del botón, así como el color de los enlaces

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
   Descargas y enlaces de WP-ImmoMakler	Los documentos y enlaces del inmueble como lista. Los iconos los elige en la pestaña Contenido, en Iconos, por separado para descargas y enlaces, entre los iconos de Divi o Font Awesome

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
Foto de la persona de contacto de WP-ImmoMakler	Solo la foto de la persona de contacto
Formulario de contacto de WP-ImmoMakler	Formulario de contacto con protección antispam
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
Lista de superficies de WP-ImmoMakler	Solo las superficies como lista de definición
Lista de precios de WP-ImmoMakler	Solo los precios como lista de definición
Lista de texto de datos clave de WP-ImmoMakler	Datos clave en una línea
Ubicación de WP-ImmoMakler	Código postal y localidad o componentes propios
WP-ImmoMakler Equipamiento/Características	Características de equipamiento con icono
Lista de iconos de datos básicos de WP-ImmoMakler	Datos básicos una junto a otra con iconos
Ubicación de WP-ImmoMakler	Código postal y localidad o componentes propios
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
Descargas y enlaces de WP-ImmoMakler	Documentos y enlaces del inmueble
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), 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 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
Enlace a la vista de impresión en PDF PLUS	URL del exposé en PDF del inmueble, por ejemplo como enlace del módulo Botón de Divi
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.

Botón para el exposé en PDF

PLUS Para un botón que abra el exposé en PDF del inmueble no necesita un módulo propio. Inserte el módulo Botón de Divi, abra la sección Enlace en la pestaña Contenido y, para la URL del enlace, elija Enlace a la vista de impresión en PDF del grupo WP-ImmoMakler mediante el icono de contenido dinámico. El exposé en PDF debe estar activado en el backend de su sitio web (wp-admin) en WP-ImmoMakler → Ajustes → Vista de impresión del PDF.

Mostrar módulos solo en determinados inmuebles

Con las condiciones de Divi muestra un módulo solo en los inmuebles adecuados, por ejemplo la galería de planos solo en inmuebles con planos o un aviso solo en inmuebles de referencia. Divi 4 no admite condiciones propias de plugins. Por ello, WP-ImmoMakler ofrece sus comprobaciones como campos para la condición Custom Field de Divi. En la traducción alemana de Divi 4, esta condición se llama Benutzerdefinierte Breite.

1. Abrir las condiciones

   Abra los ajustes del módulo y, en la pestaña Avanzado, la sección Condiciones.

2. Añadir Custom Field

   Añada la condición Custom Field.

3. Elegir el campo

   Elija el campo de la lista, por ejemplo immomakler_has_floorplans.

4. Elegir la regla

   Elija la regla: Has Any Value muestra el módulo si la comprobación se cumple, Has No Value si no se cumple. Para las categorías elija Contains e introduzca el nombre del término, por ejemplo Compra.

Campo	Significado
immomakler_has_images, immomakler_has_floorplans, immomakler_has_videos, immomakler_has_downloads, immomakler_has_pdf, immomakler_has_links, immomakler_has_epass, immomakler_has_map, immomakler_has_contact, immomakler_has_contact_photo, immomakler_has_features …	El inmueble tiene este contenido: imágenes, planos, vídeos, documentos, un PDF, enlaces, un certificado energético, un mapa, una persona de contacto, su foto, características. Además, los textos descriptivos, por ejemplo immomakler_has_objektbeschreibung, y con WP-ImmoMakler Plus PLUS immomakler_has_virtual_tours
immomakler_is_reference, immomakler_is_project	El inmueble es un inmueble de referencia o un proyecto de construcción, respectivamente
immomakler_terms_type, immomakler_terms_vermarktung, immomakler_terms_nutzungsart, immomakler_terms_status, immomakler_terms_location, immomakler_terms_feature, immomakler_terms_country	Los nombres de los términos del inmueble en esta categoría (tipo de inmueble, tipo de comercialización, tipo de uso, estado, ubicación, características, país), separados por comas
immomakler_field_<campo>, por ejemplo immomakler_field_kaufpreis, immomakler_field_contact_email_zentrale	El valor de un campo de datos tal como lo muestra la vista de detalle; vacío si la vista de detalle oculta el campo. contact_ representa los campos de la persona de contacto

La lista de campos muestra junto a cada campo el valor del inmueble de la vista previa. Al cambiar a Divi 5 se conservan las condiciones; allí, Divi 5 ofrece además las mismas comprobaciones como condiciones propias.

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. Guardar la plantilla

   Guarde la plantilla en el Theme Builder.

2. Abrir un inmueble

   Abra cualquier inmueble en el frontend.

3. Comprobar la presentación

   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