El reto inmobiliario: cómo creé una web inmobiliaria con CMS en Wix Studio
- 31 ago 2025
- 7 min de lectura
Actualizado: 8 jul
Este proyecto nace de un reto muy concreto: crear un escaparate inmobiliario elegante, aspiracional y fácil de mantener en Wix Studio, capaz de mostrar propiedades de lujo con rapidez y sin complicaciones técnicas.
🥈 Segundo premio
August Builder Challenge: Real Estate Edition (Creative Crew x Wix Studio)
Este proyecto se desarrolló para el Creative Crew Builder’s Challenge: Real Estate Edition, un briefing real centrado en crear un escaparate inmobiliario impulsado por CMS, visual, adaptable y fácil de actualizar. Los requisitos incluían una cuadrícula de propiedades, páginas dinámicas de detalle, un mapa de Google integrado o dinámico, y un formulario de contacto en cada ficha. También se valoraban filtros, lógica de destacados y animaciones.
“La propuesta de Sonia se lee y se siente como un caso de estudio profesional: investigación cuidada, wireframes en papel, una sólida arquitectura de CMS y diseño, decisiones accesibles y visuales alineados con la marca.” – Brad Hussey, Founder & Creative Director, Brightside Studios Inc.
En este proyecto, el reto no era solo cumplir requisitos técnicos, sino hacer que todo ese sistema se sintiera coherente, fácil de usar y alineado con una marca inmobiliaria que aspira a un nivel alto.
Objetivos del proyecto
El objetivo era crear una experiencia inmobiliaria elegante y aspiracional, que cargase rápido, se sostuviera sobre un CMS escalable y guiase al usuario con naturalidad hacia la acción: reservar una visita. Todo el proyecto se planteó mobile-first, pensando en cómo se navega de verdad hoy en día: desde las propiedades destacadas en la home hasta los filtros y las fichas de detalle en las fases más profundas del recorrido.
La idea no era solo cumplir un briefing, sino diseñar un escaparate que se sintiera ligero para el usuario y manejable para la agencia, con llamadas claras a reservar visita y una estructura lista para crecer sin necesidad de rehacer la web cada vez.
Enfoque de diseño
Aproveché el proyecto para estudiar una agencia inmobiliaria real que podría beneficiarse de trabajar con Wix Studio. Más allá de los requisitos técnicos, el foco estuvo en elevar la percepción de marca: tipografía cuidada, paleta de color coherente y decisiones de diseño que se sienten de alto nivel desde la primera pantalla.
En el mercado inmobiliario de lujo, el lenguaje visual tiene que estar a la altura de lo que se vende. Por eso se eligieron tipografías elegantes, espacios generosos y secciones hero con imágenes y vídeo de alta calidad que invitan a detenerse. Las animaciones al hacer scroll o pasar el cursor son suaves y funcionales: aportan vida, pero nunca se interponen entre el usuario y la información que necesita.
Un CMS pensado para el día a día del cliente
Pensado desde el día a día de una agencia real, el CMS está configurado para que añadir y actualizar propiedades sea tan sencillo como rellenar una ficha. Desde ahí se alimenta todo el contenido del sitio: el listado de propiedades, los agentes (partners) y los bloques clave. Cada actualización se hace una sola vez y se refleja automáticamente en tarjetas, sliders y páginas dinámicas, evitando duplicaciones y reduciendo el margen de error.
La estructura permite mostrar etiquetas como “En venta” o “Vendido” y gestionar galerías multimedia completas, de modo que cada propiedad puede contar su historia con imágenes y vídeo sin añadir complejidad a la gestión. Los campos de referencia conectan propiedades y agentes entre colecciones sin duplicar contenido, lo que facilita mantener el catálogo y el equipo siempre alineados: el agente correcto aparece en la ficha adecuada, y el usuario entiende de un vistazo quién le acompañará en cada visita.
Página de inicio
La home arranca con una sección de propiedades destacadas conectada directamente al CMS. En lugar de editar el diseño cada vez, basta con marcar un checkbox de “featured” en la colección: el campo booleano (verdadero/falso) decide qué aparece en el escaparate principal, manteniendo el control desde el panel de contenido.
Cada tarjeta muestra lo esencial para decidir si seguir explorando: imagen exterior, nombre de la propiedad, número de habitaciones y baños, precio y una llamada clara para ver el detalle. El mismo contenido se reutiliza entre sliders y grids, siempre conectado al dataset, lo que asegura que cualquier cambio en el CMS se refleje de forma consistente en todos los módulos sin duplicar trabajo.
Las microinteracciones ligeras, como una flecha animada que sugiere hacer scroll, están pensadas para fomentar la exploración sin sobrecargar la interfaz. Así, la página de inicio funciona como un panel de control visual conectado al CMS: ordena qué enseñar primero, mantiene todo sincronizado y guía al usuario desde la vista rápida hasta la ficha completa con el mínimo mantenimiento.
Filtros que ayudan a decidir, no solo a buscar
La página de listado está pensada para que el usuario pueda explorar el catálogo con calma y afinar su búsqueda según lo que le importa de verdad: número de habitaciones y baños, ubicación, rango de precio y orden por fecha o por precio. Cada filtro está conectado al dataset del CMS, de modo que los resultados se actualizan al instante y siempre reflejan el estado real de la colección.
En la práctica, esto significa que el usuario puede ajustar criterios y ver solo las propiedades que encajan con sus preferencias, sin tiempos de espera ni resultados inconsistentes. Para la agencia, toda la lógica vive en el CMS y los datasets: se controla qué se muestra, cómo se ordena y cómo se filtra desde un mismo panel, evitando configuraciones duplicadas y manteniendo el sitio fácil de gestionar a largo plazo.
Filtrar por precio de la propiedad
Ordenar por último y precio (menor a mayor y mayor a menor)
Cada propiedad, contada con detalle
Cada propiedad tiene su propia página dinámica generada desde el CMS, con URLs limpias y publicación rápida. El diseño está conectado directamente a la colección de propiedades, de modo que cualquier cambio en el CMS se refleja al instante en la ficha correspondiente.
La página combina una galería completa con lightbox, una descripción ampliable y un bloque de datos clave como número de habitaciones, baños, superficie y precio. El campo de galería multimedia del CMS permite asociar varias imágenes o vídeos a cada propiedad y mostrarlos de forma eficiente, sin tener que gestionar campos separados para cada archivo. Para la agencia, esto se traduce en fichas ricas en contenido visual que se actualizan desde un único punto; para el usuario, en una experiencia de exploración clara, donde puede ver el conjunto y, al mismo tiempo, profundizar en los detalles que necesita para decidir.
Mapas y ubicación
Cada ficha de propiedad incluye un mapa de Google integrado que muestra su ubicación exacta. Desde la propia página, el usuario puede situar la vivienda en su contexto, explorar el entorno y obtener indicaciones sin salir del sitio.
El CMS almacena los datos de dirección de manera estructurada, lo que permite conectar esa información con el mapa y, a futuro, crear vistas generales con múltiples propiedades representadas a la vez. Así, la ubicación deja de ser solo una línea de texto y se convierte en una capa visual que ayuda a decidir: dónde está, qué hay alrededor y cómo llegar.
Formularios que abren conversaciones
Cada propiedad incluye un formulario para solicitar una visita o hacer consultas, integrado directamente en su ficha. Al enviar el formulario, se añade automáticamente un ID único de la propiedad, invisible para el usuario pero registrado en el CMS. Esto permite a los agentes filtrar solicitudes por inmueble concreto y responder con contexto desde el primer mensaje.
Además, se han configurado automatizaciones que envían emails de confirmación en cuanto llega una solicitud, manteniendo la comunicación activa sin esfuerzo manual. El agente responsable de cada propiedad se muestra también de forma dinámica, reforzando la confianza antes de enviar los datos y dejando claro quién estará al otro lado de la conversación.
Accesibilidad y móvil: la experiencia de verdad
Se realizaron comprobaciones de accesibilidad, desde contraste hasta orden de foco, mejorando la usabilidad. El diseño responsive está optimizado para todos los dispositivos, asegurando una experiencia fluida en móvil.
Cuidar la marca en cada pantalla
Un sistema de marca coherente mantiene la experiencia uniforme en todo el sitio. Se utilizó el generador de imágenes con IA de Wix Studio para acelerar la creación de visuales alineados con la marca.
Qué gana la agencia con este sistema
Detrás de la parte visual, el sistema está pensado para que la agencia trabaje con más calma y mejores resultados:
Navegación más fluida: el contenido está organizado y los filtros son intuitivos, así que los usuarios encuentran rápido lo que buscan y pasan más tiempo explorando propiedades.
Menos mantenimiento: el CMS reduce tareas manuales; actualizar precios, disponibilidad o detalles de una propiedad se hace desde un solo lugar y se refleja en toda la web.
Más solicitudes cualificadas: los formularios y las automatizaciones captan leads y responden al instante, abriendo conversaciones con personas que ya han mostrado interés en una propiedad concreta.
Capacidad de crecer sin rehacer la web: la estructura dinámica permite añadir nuevas propiedades, secciones o funcionalidades sin rediseñar todo el sitio cada vez.
Mejor experiencia para todos: el trabajo en accesibilidad y diseño responsive hace que la web sea usable en cualquier dispositivo y para distintos tipos de usuarios, ampliando el alcance potencial.
En conjunto, la web se siente ligera para el usuario y manejable para la agencia: muestra propiedades con elegancia y convierte visitas en oportunidades reales.
Cómo puede crecer este proyecto
A partir de esta base, hay margen para seguir afinando la experiencia: desde estandarizar precios y añadir dossieres descargables, hasta incorporar chat en tiempo real, mejorar automatizaciones y crear vistas en mapa con múltiples propiedades.
Estandarizar formatos de precio para mayor claridad.
Añadir dossier descargable en cada propiedad.
Incluir tabla de detalles ampliados.
Incorporar opciones para compartir en redes.
Añadir chat en tiempo real.
Implementar doble opt-in y mejorar automatizaciones.
Ampliar páginas dinámicas y explorar código personalizado.
Crear vistas de mapa con múltiples propiedades.
Comentarios