Diseño web · 01 · Évora
Un cotizador que termina en WhatsApp para una casa patrimonial de 1932
Évora es una casa de eventos en una casa patrimonial del Barrio Prado, en Medellín. Diseñé el sitio en Figma y lo construí en WordPress con Elementor sin Pro: lo que el editor no resolvía, lo escribí en JavaScript y CSS propios.
01
Vender el lugar, no el salón
Évora ocupa una casa de 1932 en el Barrio Prado, el barrio patrimonial de Medellín. Al revisar la competencia de la zona, ningún sitio juntaba las dos cosas: quien contaba la historia del barrio no hacía eventos, y quien hacía eventos no tenía sitio web.
Por eso los títulos hablan de la casa antes que del servicio: "Una casa patrimonial de 1932 para celebrar en Medellín". El objetivo del sitio es uno solo: que la persona llegue a WhatsApp con su evento ya descrito.
02
Un cotizador de cuatro pasos que se resume solo
El cliente quería un asistente de cinco pantallas como el de un competidor. Probé tres versiones en Figma: la de tarjetas con íconos 3D que traía el cliente, una larga con todos los pasos abiertos (1451 px de alto en móvil) y un acordeón (743 px). Quedó el acordeón.
Cada paso cerrado muestra la respuesta en su cabecera, así que no hace falta una pantalla de resumen al final. Al elegir una opción única, el paso se cierra y abre el siguiente; en Servicios no, porque ahí se marcan varias. Al enviar, el navegador arma el mensaje y abre WhatsApp: no hay servidor, base de datos ni correo saliente.
03
Las decisiones, una por una
| Decisión | En lugar de | Por qué |
|---|---|---|
| Formulario por correo | El sitio no tenía correo saliente y Évora ya atiende por WhatsApp: el lead llega al canal donde se vende | |
| Acordeón de 4 pasos | Asistente de 5 pantallas | La mitad de alto que la versión abierta y sin pantalla de resumen |
| Invitados en número libre | Slider, luego rangos en chips | Elementor no tiene control de rango y nadie sabe con meses de anticipación si serán 83 u 87. Al final, un número sin tope: si se pasa de la capacidad, se habla en el chat |
| Fecha nativa | Campo con máscara | En el celular abre la rueda de fechas del sistema. La acoté entre hoy y tres años |
| Errores solo al equivocarse | Validar al cargar | Marcar lo que falta antes de que la persona toque un campo la recibe con un reproche |
04
Donde Elementor no llegaba, código propio
Construir sin Elementor Pro fue una decisión de costo, y obligó a resolver a mano tres piezas: el header, el carrusel y el cotizador. Cada una es un fragmento de HTML, CSS y JavaScript que vive en el sitio y que el cliente puede dejar quieto mientras edita el resto desde el panel.
- Cotizador: los widgets atómicos de Elementor v4 no tienen campos de formulario, así que los contenedores se crean vacíos en el editor y el script les inyecta la fecha, los invitados, el nombre y las notas, cada uno con su nombre accesible.
- Header: se oculta al bajar y vuelve al subir. No funcionaba porque su contenedor medía lo mismo que el header y no tenía recorrido; lo resolví con posición fija y espacio reservado.
- Carrusel: avance continuo que se pausa al pasar el cursor, se arrastra con el mouse o el dedo y respeta la preferencia de reducir movimiento.
- Una palabra dorada en cada título: Elementor v4 no acepta selectores anidados, así que cada título se parte en varios encabezados.
05
Auditar lo que construí y volver a medir
Con el sitio publicado, lo audité contra WCAG 2.2 AA: axe-core en escritorio y en móvil, y revisión manual con teclado. Salieron 16 hallazgos. El más grave: el cotizador, la pieza central del sitio, no se podía usar sin mouse.
- Hallazgos en la auditoría
- 16
- Críticos: impedían cotizar o leer
- 5
- Fallas automáticas después, en 4 de 5 páginas
- 0
| Problema | Antes | Ahora |
|---|---|---|
| Cotizador con teclado | Opciones en div sin rol ni tabindex | 13 opciones con rol de radio o casilla, en 3 grupos con nombre |
| Campos y casilla | Sin nombre para el lector de pantalla | Cada campo con su nombre; toda la línea de la casilla es clicable |
| Dorado de marca | #BF932A: 2,83:1 sobre blanco | #8F6D1D en textos pequeños y botones: 4,8:1 |
| Video de fondo | Arrancaba solo, sin pausa | Botón para pausar y reproducir; el video, oculto al lector de pantalla |
| Foco y navegación | Sin foco visible ni enlace para saltar | Foco visible en todo el sitio y enlace "Saltar al contenido" |
Después de los arreglos volví a pasar axe por el sitio en vivo: cero fallas en Inicio, La casa, Sobre nosotros y Cotizador. En Galería, que se publicó después, quedan dos botones con contraste insuficiente. Axe solo detecta una parte de los problemas: la prueba con VoiceOver y con zoom al 200 % sigue pendiente.
06
Cómo repartí el trabajo con Claude Code
Construí el sitio con Claude Code conectado a Elementor y a Figma por MCP. Le pasaba un nodo de Figma, construía esa sección y la medía en el navegador contra el archivo antes de seguir con la siguiente.
- Claude Code: buena parte de la construcción en Elementor, los tres scripts, el copy con criterio SEO, el recorte de 35 imágenes y el video del hero en blanco y negro, de 1,2 MB.
- Yo: todo el diseño en Figma, las tres versiones del cotizador, los íconos dibujados a mano, la reconstrucción de páginas, la auditoría de accesibilidad y el QA en navegador y teléfono.
A mitad del proyecto cambié la forma de trabajar: primero diseñar en Figma y después construir, porque las secciones sin diseño previo no quedaban como las quería. Y pedir cambios exactos, después de que un ajuste tocara un texto que nadie había pedido cambiar.
07
Lo que quedó y lo que muestra Search Console
El sitio tiene Google Analytics y Search Console. Propuse una estrategia SEO completa, pero la clienta decidió no implementarla, así que lo que muestra Search Console es el punto de partida con la base técnica, no el resultado de esa estrategia.
- Posición media en Google
- 3,8
- CTR medio
- 11,9 %
- Impresiones en 28 días
- 168
La base que sí quedó en el sitio en vivo:
- Un cotizador que entrega a WhatsApp un mensaje ordenado: tipo de evento, fecha, invitados, horario, servicios y nombre.
- Cinco páginas con título y meta descripción pensados para búsquedas locales, y un H1 que nombra la casa y la ciudad.
- Cero fallas automáticas de accesibilidad en cuatro de las cinco páginas.