Estructura, wireframes y especificación funcional del sitio. Cuatro secciones fijas — Home, Estaciones, Menú y Entérate — más un módulo de activaciones que convierte el catálogo en herramienta de campaña. El principio que gobierna cada decisión: fácil de navegar, difícil de olvidar.
Cuatro columnas navegables desde el menú principal y una quinta capa —activaciones— que no vive en el menú: entra por campaña, banner o link directo, y se apaga cuando la vigencia termina.
El menú principal nunca crece: Estaciones · Menú · Entérate y un botón de acción a la derecha que rota según lo que esté vivo (la activación del mes, el lanzamiento nuevo, o «Pide a domicilio» si no hay nada corriendo). Una sola pieza cambiante mantiene la promesa de que siempre está pasando algo sin ensuciar la navegación.
La primera pantalla tiene que hacer dos cosas al tiempo: dar hambre y dejar claro que aquí hay movimiento. Producto a escala grande arriba, y todo lo funcional —qué comer, dónde estamos— a un scroll de distancia.
★ Nuevo sabor en la estación ★ Colab con ___ ★ Ya llegó ★ Nuevo sabor ★
Newsletter
Barra fija con selector de ciudad. La ciudad se recuerda entre visitas y filtra por defecto estaciones y disponibilidad de producto. El botón rojo es el único elemento variable del menú: rota según la campaña viva.
El hero es una tesis, no un encabezado. Producto a escala grande y titular de una línea en el universo verbal de la marca. Dos acciones, no cinco: comer o ubicarse. Sin carrusel — un solo mensaje, cambiado desde el admin.
Cinta de anuncios en movimiento. El recurso que sostiene «siempre está pasando algo». Editable como texto plano; si no hay nada corriendo, se oculta sola en vez de mostrar relleno.
Lanzamiento del mes. Una sola pieza, no una grilla de novedades. Cambia de color de fondo con el producto para que la home se sienta distinta cada mes sin rediseñarla.
Entrada al menú por categorías, no el menú completo. Cuatro puertas grandes con foto. Las categorías se administran, no están quemadas en el código.
Mapa + lista, no solo mapa. El mapa vende el universo; la lista resuelve la tarea. Cada estación muestra estado abierto/cerrado calculado sobre su horario.
Tres entradas del blog, automáticas por fecha con opción de fijar una. Si hay menos de tres publicadas, el bloque no aparece.
Bloque de activación condicional. Aparece solo si hay una campaña con vigencia activa y enlaza a su landing. Es el puente entre catálogo y captura de leads.
Footer con newsletter. Primer punto de captura permanente, con su casilla de tratamiento de datos. Alimenta la misma base que las activaciones, marcada con origen distinto.
La página que más se va a usar y la que menos puede fallar. Alguien que entra aquí quiere una dirección, un horario y un botón de cómo llegar; todo lo demás es adorno hasta que eso esté resuelto.
Filtros de una sola fila, combinables. «Abiertas ahora» es el filtro más usado en un sitio de restaurantes y por eso va visible, no escondido en un desplegable.
El mapa es secundario al listado en móvil: colapsa a un botón «Ver en el mapa» para que el pulgar llegue antes a las direcciones.
Cada tarjeta responde la pregunta completa: foto, nombre, dirección, estado y cómo llegar. Nadie debería tener que entrar al detalle solo para saber si está abierto.
Galería del local, no solo del producto. Aquí es donde se vende «ganas de estar ahí»: gente, mesa, ambiente.
Dirección y horario juntos, arriba del pliegue. El botón de cómo llegar abre la app de mapas nativa del dispositivo.
Atributos por estación, administrables como etiquetas. Alimentan también los filtros del listado sin trabajo doble.
Producto exclusivo de la sede. Le da a cada estación una razón para ser visitada y conecta el módulo de sedes con el de menú.
Es la pieza que convierte el sitio en herramienta de campaña. Cada activación es un contenido más dentro de WordPress: se crea, se publica, se apaga y deja su base de datos atrás.
Nueva activación en el admin: nombre, vigencia, imagen, mecánica y URL /parches/…
Formulario a la medida desde campos reutilizables, con T&C y consentimiento obligatorios.
La landing se activa y aparece el bloque condicional en Home y en el botón del menú.
Cada registro guarda datos, origen, fecha, IP y versión de política aceptada.
Vence la fecha: la landing muestra estado cerrado y la base queda exportable.
Acepto los términos y condiciones y el tratamiento de mis datos personales.
Próximamente
Cuenta regresiva + correo
Éxito
Confirmación + qué sigue
Cerrada
Gracias + link al menú
★ SIEMPRE ESTÁ PASANDO ALGO ★
Móvil primero · el 70–80%
del tráfico entra por aquí
Header reducido en la landing. Sin menú completo: la única salida es participar o volver al sitio. Menos rutas, más conversión.
La mecánica antes del formulario. Nadie llena campos sin saber qué gana; tres pasos ilustrados bastan.
Campos configurables por campaña, con validación en vivo y errores que dicen qué pasó y cómo arreglarlo. El consentimiento nunca viene premarcado y se guarda con fecha y versión del texto legal.
Los tres estados se diseñan, no se improvisan. Una landing vencida sin pantalla propia es la fuga más común de este tipo de módulos.
| Pieza | Implementación sugerida en WordPress |
|---|---|
| Estaciones | Custom post type estacion con campos de dirección, coordenadas, horario por día, servicios y galería. Los horarios alimentan el cálculo de abierto/cerrado. |
| Productos | CPT producto con taxonomías de categoría y badges, y relación con estaciones para la disponibilidad. |
| Entérate | Entradas nativas con categorías propias, para aprovechar editor, programación y SEO de serie. |
| Activaciones | CPT activacion con fechas de vigencia, estado y formulario asociado. Un cron diario cambia el estado sin intervención manual. |
| Formularios | Constructor tipo Gravity Forms, Fluent Forms o WPForms: campos condicionales, exportación nativa y conexión a la herramienta de correo. |
| Datos personales | Registro de consentimiento con fecha, IP y versión del texto aceptado. Retención y borrado documentados; el sitio debe poder atender una solicitud de eliminación. |
| Rendimiento | Fotografía en formatos modernos con tamaños servidos por dispositivo, caché de página y fuentes autoalojadas. El sitio vive de imágenes pesadas: es donde se gana o se pierde la velocidad. |
| Accesibilidad | Contraste mínimo AA sobre los colores de marca, foco visible, navegación por teclado y respeto a la preferencia de movimiento reducido en las animaciones. |
Cinco momentos, no cincuenta. La regla es que ninguno estorbe la tarea: si algo retrasa llegar a una dirección o a una burger, se elimina.
Una banda de texto en movimiento con lo que está pasando. Es literal: la estación siempre tiene algo anunciándose.
Al entrar a una sede, una transición corta de tablero que voltea al nombre del lugar. Media vez, no en cada clic.
Los badges de producto se comportan como calcomanías: se despegan un poco al pasar el cursor. Cuesta nada y se recuerda.
Un botón que lanza una recomendación al azar del menú, para quien no sabe qué pedir.
Al enviar un formulario, un sello cae sobre la pantalla como el de un pasaporte. Cierra la metáfora de viaje en el momento exacto de la conversión.
Todo lo anterior respeta la preferencia de movimiento reducido y ninguna animación retrasa la carga del contenido.