Skip to main content

Página Web y marca

Usa esta guía cuando necesites revisar la identidad pública del estudio o confirmar que el enlace de la Página Web sea el correcto.

Antes de empezar

  • Necesitas permiso de configuración para abrir Sitio web.
  • Ten a la mano el logo en JPEG o PNG menor a 5 MB.
  • Confirma el nombre corto y el color de marca que quieres publicar.
  • Los cambios de esta guía afectan la Página Web; no actualizan por sí solos la app móvil ni el wallet pass.

Pasos

  1. En el menú lateral, ve a Sitio web.
  2. Revisa el Logo del estudio, el Color de marca y el Slug del sitio web.
  3. Confirma que el slug disponible sea el que quieres mostrar en el enlace público.
  4. Guarda los cambios y abre la Página Web pública para validar el resultado.
  1. En la barra Editor del sitio de la Página Web, usa Configuración. Se abre la pestaña Tema; localiza Marca.
  2. Sube el archivo en Logo y elige Glass en Estilo del encabezado si quieres usar ese acabado.
  3. Si aparece Este logo podría perder contraste sobre algunas secciones. Revisa tu sitio antes de publicarlo., revisa la vista previa y las secciones de la Página Web antes de guardar.
  4. Usa Mostrar en Encabezado para elegir Logo y Nombre, Solo Logo o Solo Nombre.
  5. Presiona Guardar y revisa la Página Web publicada.

Fondo claro u oscuro

  1. En la barra Editor del sitio, usa Configuración. En la pestaña Tema, localiza Fondo de página.
  2. En Modo, elige Claro u Oscuro.
  3. En Estilo, elige Sólido o Gradiente sutil.
  4. Si eliges Gradiente sutil, ajusta Intensidad con Baja o Media.
  5. Presiona Guardar. Revisa la vista previa y la Página Web publicada.
El modo que guarda el estudio controla la apariencia. La preferencia de color del navegador o del dispositivo del cliente no lo reemplaza. Oscuro adapta el fondo, el texto, las tarjetas, los campos, los bordes y los estados de éxito, aviso y error. El ajuste también llega al encabezado público, al portal del cliente y a los flujos de acceso, Antes de continuar, Carta responsiva, Comprar tarjeta de regalo, Acceso denegado y Tienda en preparación. Los formularios de pago integrados en el portal también usan una apariencia oscura. Los colores primario y secundario de la marca conservan sus colores de texto configurados. Cuando OnStudio verifica que un logo es monocromático y no necesita protección, lo presenta como una silueta clara u oscura según el fondo del encabezado público, el inicio de sesión o Tienda en preparación. Los logos multicolor, sin análisis vigente o que necesitan protección conservan sus colores originales.

Tipografía con Google Fonts

  1. En la barra Editor del sitio, usa Configuración. En la pestaña Tema, localiza Fuente.
  2. Abre el selector y escribe el nombre en Buscar en Google Fonts…, o filtra con Todas, Sans serif, Serif, Exhibición, Escritura o Monoespaciada.
  3. Selecciona una fuente para aplicarla al tema y presiona Guardar.
  4. Cuando un bloque tenga su propio campo Fuente, usa Usar fuente del tema para heredar la tipografía general o elige una fuente distinta. Cada página permite hasta dos fuentes adicionales en sus bloques.
  5. Revisa la vista previa y la Página Web publicada para confirmar que títulos, textos y secciones usan la tipografía esperada.
Si el catálogo completo no está disponible, el selector mantiene opciones de respaldo y muestra El catálogo completo no está disponible temporalmente. o No pudimos cargar el catálogo completo.. Una fuente guardada que ya no aparece en el catálogo se conserva como Fuente heredada hasta que elijas otra.

Crear páginas y agregar secciones iniciales

  1. En el Editor del Sitio, abre Secciones. El editor inicia en esta vista y muestra Inicio rápido expandido.
  2. Elige entre Hero, Reservas, Paquetes, Entrenadores y App móvil. Cada opción incluye una vista previa y se puede arrastrar a la página.
  3. Ajusta el contenido y los estilos de la sección insertada, guarda los cambios y revisa la vista previa antes de publicar.
  4. Si abres Plantillas, úsalas sólo como referencia: las tarjetas muestran Próximamente y todavía no se pueden seleccionar.
  5. Al usar Crear nueva página, completa Título de la página, revisa el Slug de URL y activa Establecer como página de inicio sólo si quieres reemplazar la página inicial actual. La sección Plantillas premium también muestra opciones Próximamente; Crear página genera por ahora una página en blanco.
Los sitios nuevos reciben una página inicial publicada con las secciones Hero, Reservas, Paquetes, Entrenadores y App móvil. Este contenido inicial usa el nombre y el color del estudio cuando están disponibles. Las páginas existentes conservan sus secciones guardadas. En la sección Paquetes, usa Color texto para definir el color del título y Color secundario para definir el color del subtítulo. Ambos ajustes se reflejan en la vista previa y en la Página Web publicada, incluso cuando Estilo visual está en Studio launch.

Calendario Wellness

  1. En el Editor del Sitio, abre la sección de calendario y, en Estilo visual, elige Wellness / tabla semanal.
  2. Ajusta Días visibles entre uno y siete y define Clases por día.
  3. Usa Mostrar avatar de entrenador, Mostrar cupo y Mostrar disciplina para controlar los datos visibles en cada clase.
  4. Si necesitas adaptar el contraste, configura los controles de fondo, selector de días, tarjetas y botones, como Fondo del día activo, Color del nombre de la clase, Fondo del botón Reservar y Fondo del botón Lista de espera.
  5. Guarda y comprueba en la Página Web los días, las clases y los estados de reserva. Usa las flechas Semana anterior y Semana siguiente para revisar la navegación semanal.
El calendario inicia en la semana actual del estudio, de lunes a domingo, y permite avanzar únicamente a la semana siguiente. Al cambiar de semana selecciona el primer día visible; Días visibles sigue limitando el selector entre uno y siete días. Si el día seleccionado no tiene clases, conserva el estado vacío configurado.

Dominios personalizados

  1. Dentro de Sitio web, abre la tarjeta Dominios Personalizados.
  2. Escribe el hostname y usa Agregar dominio.
  3. Si la tarjeta queda en Pendiente, copia los campos de Registros que debes agregar con Copiar tipo, Copiar nombre y Copiar valor, y pégalos en tu proveedor DNS.
  4. Cuando los registros ya propagaron, vuelve a OnStudio y usa Verificar.
  5. Cuando el dominio aparezca como Verificado, usa Establecer como Principal si quieres que sea la URL principal del sitio.
  6. Para volver a la URL gratuita, busca la tarjeta Subdominio de OnStudio y usa Establecer como principal. Cuando ningún dominio personalizado es principal, esa tarjeta muestra Principal.
No puedes eliminar el dominio personalizado principal. Primero establece como principal el Subdominio de OnStudio u otro dominio verificado; después se habilita Eliminar para el dominio anterior.

Meta Pixel

  1. Dentro de Sitio web, abre la pestaña Marketing del Editor del Sitio.
  2. En ID o código de Meta Pixel, pega el ID numérico o el código completo de Meta Pixel.
  3. Guarda con Guardar.
  4. Si necesitas quitarlo, usa Limpiar.

Qué cambia para el cliente

  • Cambia la forma en que el cliente reconoce el estudio en la Página Web.
  • La opción Fuente del tema cambia la tipografía general. Los bloques configurados con Usar fuente del tema heredan ese cambio; los bloques con una fuente propia conservan su ajuste.
  • Las secciones de Inicio rápido permiten publicar una portada, el calendario de reservas, los paquetes, el equipo y los enlaces de descarga de la app móvil sin comenzar cada bloque desde cero. La sección App móvil abre las fichas oficiales de OnStudio en App Store y Google Play.
  • En Wellness / tabla semanal, el cliente puede consultar la semana actual y la siguiente con las flechas Semana anterior y Semana siguiente.
  • El calendario Wellness / tabla semanal muestra la disponibilidad real y las acciones Reservar, Lista de espera, Cupo lleno o Lista de espera llena. Si el cliente ya reservó o está en espera, muestra Reservada o En lista de espera y conserva el acceso al detalle.
  • En la vista Reservar, el cliente ve siete días a la vez. Puede usar Semana anterior y Semana siguiente o deslizar el calendario en una pantalla táctil. No puede retroceder antes de la semana actual ni avanzar cuando ya no hay clases publicadas en semanas posteriores.
  • Filtrar clases abre Filtrar. Según las opciones disponibles, permite elegir una Ubicación y una o varias opciones de Disciplina y Coach. Limpiar filtros restablece todas las selecciones. Al cambiar de ubicación, OnStudio quita las disciplinas y los coaches que ya no corresponden.
  • Cada tarjeta de Reservar muestra el nombre de la clase, hora, duración, disciplina, coach, ubicación y sala cuando esos datos existen. Una clase disponible muestra los lugares ocupados sobre el cupo total. Otros estados se muestran como Reservada, Pago pendiente, En lista, Lista abierta, Lista llena, Lleno, Cerrada, En curso o Finalizada, según la reservación y la disponibilidad.
  • Al abrir una clase, el detalle adapta la reserva al tamaño de la pantalla. En móvil, el resumen y la acción permanecen en la parte inferior; en escritorio aparecen en un panel lateral. Las clases sin selección de lugar omiten el mapa vacío y muestran los lugares disponibles en el resumen.
  • Si un coach publicó un mensaje para la clase, el cliente puede seleccionar su avatar. La acción se anuncia como Ver mensaje de seguido del nombre del coach. El mensaje se cierra automáticamente después de tres segundos.
  • Si el estudio tiene más de una ubicación activa, Filtrar en Reservar y el selector de Paquetes muestran Todas y el nombre de cada ubicación. La selección filtra las clases, las opciones de disciplina y coach, y los paquetes que se pueden usar en esa ubicación.
  • La ubicación seleccionada se comparte entre Reservar y Paquetes mientras el cliente navega en el mismo estudio. Todas vuelve a mostrar las opciones de todas las ubicaciones.
  • Mientras la Página Web permanece abierta, el calendario y el flujo de reserva reflejan nuevas clases, cambios de horario, cancelaciones, cupo, lista de espera, reservas de plataforma, lugares bloqueados y apartados temporales sin exigir que el cliente recargue la página.
  • Si otro cliente ocupa el lugar seleccionado, OnStudio quita la selección, desactiva el pago y muestra Ese lugar ya no está disponible. Selecciona otro.. El cliente debe elegir un lugar disponible para continuar.
  • Para un cliente con sesión iniciada, las reservas nuevas, canceladas, reactivadas, movidas o promovidas desde la lista de espera se reflejan en Reservar y en el portal. Las pestañas o dispositivos que estén abiertos con la misma cuenta reciben el estado actualizado.
  • Desactivar Mostrar cupo oculta los conteos generales, pero conserva el estado personal Tu lugar está reservado cuando corresponde.
  • Con el estilo Glass, el texto y los controles del encabezado cambian de contraste según la sección que queda debajo al desplazarse. El logo se muestra como fue cargado, sin recolorearlo.
  • El modo Claro u Oscuro se aplica a las superficies de la Página Web y a los flujos del cliente que usan el tema del estudio. No agrega un selector de tema para el cliente.
  • En la Página Web publicada, el encabezado conserva los enlaces configurados en el editor y agrega los accesos Paquetes y Reservar. También muestra Inicia Sesión o el menú de la cuenta, según corresponda. En pantallas pequeñas, esos accesos pasan al menú de navegación sin duplicar Paquetes si ya estaba configurado.
  • En Reservar, Paquetes, Eventos, Links en bio y el portal del cliente, OnStudio muestra primero el encabezado y la estructura del destino mientras carga los datos que falten. Al volver a una vista con datos recientes, muestra esos datos sin repetir el estado de carga. El acceso, la verificación de correo, el cierre de sesión y el checkout pueden cargar una página completa porque conservan su flujo seguro.
  • El slug define el enlace público del sitio.
  • Un dominio Principal y Verificado reemplaza el subdominio gratuito como URL principal del sitio.
  • Al establecer el Subdominio de OnStudio como principal, los enlaces públicos nuevos vuelven a usar la URL gratuita. Los dominios personalizados verificados permanecen configurados y pueden seguir abriéndose directamente hasta que los elimines.
  • Si configuras Meta Pixel, OnStudio envía PageView en las páginas públicas del sitio y eventos seguros del embudo: ViewContent, InitiateCheckout, Purchase y Schedule para vistas de paquetes, inicios de checkout, compras confirmadas y reservas confirmadas.
  • Purchase incluye valor y moneda cuando el backend confirma la compra.
  • OnStudio no carga PageView en Portal, Checkout, rutas de edición, URLs con preview ni en la URL sensible de reserva /booking/:sessionId; los eventos de conversión que salen del checkout o de la confirmación usan rutas seguras y no incluyen IDs internos.
  • Si reutilizas el mismo logo o color en otras superficies, esos cambios no se copian automáticamente a la app móvil ni al wallet pass.

Qué revisar antes de contactar soporte

  • El logo está en JPEG o PNG y pesa menos de 5 MB.
  • Si elegiste Glass, ya revisaste las secciones donde el editor advirtió que el logo podría perder contraste.
  • Si cambiaste Modo, revisa los textos, campos, tarjetas y mensajes de estado en la vista previa y en la Página Web publicada.
  • Si cambiaste Fuente, confirma que la familia elegida aparezca en el selector y que la página no rebase el límite de dos fuentes adicionales. Si lo rebasa, OnStudio muestra Solo puedes usar 2 fuentes adicionales por página.
  • El slug está disponible y escrito sin errores.
  • El color de marca tiene suficiente contraste con el fondo.
  • Si agregaste un dominio, la tarjeta ya muestra Verificado o sigue mostrando los registros DNS pendientes que faltan.
  • Si no puedes eliminar un dominio personalizado, confirma que ya no muestre Principal; usa primero Establecer como principal en el subdominio de OnStudio u otro dominio verificado.
  • Si agregaste Meta Pixel, el campo ID o código de Meta Pixel quedó guardado sin mostrar el error Ingresa un ID de Meta Pixel válido o pega el código completo de Meta..
  • Ya recargaste la Página Web pública después de guardar.

Cuándo contactar soporte

  • Si la Página Web sigue mostrando la marca anterior después de guardar y recargar.
  • Si el slug aparece ocupado aunque ya confirmaste que debería estar libre.
  • Si el dominio no cambia a Verificado después de copiar los registros correctos y volver a Verificar.
  • Si Sitio web no abre el editor esperado o no te deja publicar los cambios.