Esta pantalla determina lo que ve un huésped al acceder a su página de reservas directas. Aquí no se modifican sus tarifas, su disponibilidad ni sus reglas: lo que se modifica es el diseño en el que el huésped las ve, así como los colores sobre los que aparecen dichos datos. Todo lo que seleccione se muestra en una vista previa de su propio hotel antes de que lo confirme, de modo que pueda ver el efecto sobre los nombres reales de las habitaciones y los precios reales en lugar de sobre una maqueta genérica.
Cómo está organizada la pantalla
- La vista previa en tiempo real. Su página de reservas tal y como está, que se actualiza con cada clic. Se mantiene fija en la parte superior de la columna mientras se desplaza.
- La barra de pasos. Estilo «hero», disposición de las habitaciones, imagen de marca. Haga clic en cualquiera de los tres para ir directamente a él.
- El cuerpo del paso. Las opciones correspondientes al paso que esté abierto.
- «Atrás» y «Siguiente». Una función práctica para ir completando los tres pasos en orden. En el último paso, «Siguiente» pasa a ser «Save changes».
- El código y la tarjeta de seguimiento. Código personalizado, metaetiquetas, «Google Analytics» y el píxel de Facebook. Esa mitad de la pantalla tiene su propio artículo: cómo insertar su propio código y metaetiquetas.
Lo que realmente le muestra la vista previa
La vista previa no es una imagen de un hotel genérico. La fotografía principal es el encabezado de su propiedad, el nombre y la ubicación proceden de su ficha de propiedad, y las fichas de habitaciones corresponden a sus tipos de alojamiento con precios según sus propias tarifas por noche en su propia moneda. Esto es más importante de lo que parece: significa que está evaluando un color en relación con los precios reales que verá el huésped, y que el nombre de una habitación que sea más largo de lo que cabe en la ficha aparecerá aquí, en lugar de en una queja del huésped.
La estancia cuyo precio se muestra es un ejemplo, no una reserva. El sistema selecciona una estancia de dos noches con una semana de antelación respecto a la fecha de hoy para que las fechas sean plausibles, y recalcula el total a partir de sus tarifas cada vez que cambie el diseño. La barra de direcciones muestra yourhotel.prostay.app como marcador de posición; su página de reservas real se encuentra en la dirección indicada en la configuración de su widget .
Paso 1: el banner principal
El «hero» es la parte superior de la página de reservas: la fotografía, el nombre de su hotel y el cuadro en el que el huésped introduce sus fechas. Los cinco diseños difieren en la ubicación de ese cuadro, que es la única parte del «hero» que genera ingresos.
| Estilo del «hero» | Qué aporta a la página |
|---|---|
| Cinematic | Una fotografía a ancho completo con la barra de búsqueda flotando en la parte inferior de la misma. La opción más segura, y la que debe elegir si su fotografía es impactante y el nombre de su hotel es breve. |
| Glass console | El formulario de búsqueda se encuentra dentro de la fotografía, en un panel esmerilado. Sitúa las fechas más arriba en la página que el diseño «Cinematic», a costa de cubrir un tercio de la imagen. |
| Spotlight pill | Un titular centrado con el campo de búsqueda reducido a un único recuadro redondeado. Es el más ligero de los cinco y el que deja más espacio para su titular. |
| Bento | Mosaicos modulares que muestran su ubicación y su precio más bajo junto a la foto. Úselo cuando el precio sea el argumento de venta, ya que es el único diseño que muestra una cifra antes de que el huésped se desplace por la página. |
| Diagonal | Un panel en ángulo con el color de su marca que incluye el formulario junto a la foto. Es el más identificable con la marca de los cinco y el que más depende de que el color de su marca sea el adecuado. |
Paso 2: cómo se muestran las habitaciones
Esta es la parte de la página en la que el huésped elige, así que adáptela al número de tipos de alojamiento que ofrezca, en lugar de a cuál quede mejor en blanco.
| Diseño de las habitaciones | Efecto en la página |
|---|---|
| Sidebar | Tarjetas anchas a lo largo de la página con el total acumulado fijado a la derecha. Se lee bien hasta unos seis tipos; a partir de ahí, el huésped tiene que desplazarse bastante. |
| Gallery grid | Tarjetas con imágenes en la parte superior dispuestas en cuadrícula, con el total aún a la derecha. Es la opción más centrada en las fotografías de las cuatro, y la que más se resiente si un tipo de alojamiento carece de fotografía. |
| Compact list | Filas densas diseñadas para un rápido vistazo. La opción adecuada para una propiedad con una docena de tipos, y la menos indicada para un hotel boutique con tres, ya que hace que un inventario reducido parezca escaso. |
| Showcase | Fichas a ancho completo con el total desplazado a una barra situada en la parte inferior de la pantalla. Es el único diseño que libera todo el ancho para la propia habitación, por lo que resulta adecuado para suites y villas. |
Tres de los cuatro diseños mantienen el Resumen en un panel fijo a la derecha y el cuarto lo traslada a una barra fija en la parte inferior. En cualquier caso, el huésped puede ver lo que ha seleccionado y cuánto cuesta sin tener que desplazarse hacia atrás, lo cual es lo que evita que se abandone a mitad de camino una reserva de varias habitaciones.
Paso 3: sus cinco colores
Haga clic en un campo hexadecimal para abrir un selector de colores, o introduzca un valor hexadecimal directamente en él. El cuadrado situado junto a cada campo muestra el color que ha elegido; el botón azul que hay junto a él restablece el campo al valor predeterminado de Prostay, que no es necesariamente el valor con el que comenzó la sesión.
| Campo | A qué elemento aplica el color y a qué valor predeterminado se restablece |
|---|---|
| Brand color | El encabezado y todos los botones principales, incluidos Check availability y Continue to checkout. Este es el que debe seguir siendo visible aunque se le superponga texto blanco. Se restablece a #1643E0. |
| Background color | La página que se encuentra detrás de todo lo demás. Se restablece a #ffffff. Cualquier color mucho más oscuro que un gris pálido entrará en conflicto con las fotografías de las habitaciones, cuyo color no se puede modificar. |
| Background Section Color | Las bandas alternas que separan una sección de la página de la siguiente, y el relleno que hay detrás del Resumen de la estancia. Se restablece a #F1F4FE. Si lo configura igual que el color de fondo, la página se leerá como un único bloque largo. |
| Headline text | Encabezados de sección y títulos de página. Se restablece a #1643E0, por lo que, de forma predeterminada, los encabezados coinciden con el color de su marca. Si el color de su marca es claro, configúrelo en un tono casi negro. |
| General text & icons color | Texto del cuerpo, etiquetas de campos e iconos. Se restablece a #606576. Este es el campo que determina si un huésped puede leer sus condiciones de cancelación, por lo que debe mantenerlo oscuro sobre el fondo. |
Desactivar las fotos de las habitaciones
Este botón de opción se encuentra en la pestaña «Custom Codes» (Diseño de la página de inicio), en la ficha situada debajo del asistente, lo cual resulta un poco extraño, ya que se trata de una decisión de diseño más que de código. Si lo configura en «No» (Sin fotos en las fichas de las habitaciones), las fichas de las habitaciones eliminarán sus imágenes y mostrarán únicamente texto: el nombre de la habitación, la descripción y la tarifa. La fotografía principal se mantiene en cualquier caso, ya que procede de la cabecera de su Propiedad y no de sus tipos de alojamiento.
Hay una buena razón para desactivarla. Si sus tipos de alojamiento no tienen fotografías, o solo algunas de ellas las tienen, un diseño basado en fotos muestra una fila de rectángulos grises junto a los que sí tienen imágenes, y un huésped lo interpreta como si se tratara de habitaciones que está ocultando. Desactivar las fotos hasta que se rellenen los huecos parece algo deliberado; dejarlas activadas, no.
Guardar, y qué abarca cada acción de «Guardar»
En esta pantalla hay dos botones de guardar y ambos realizan la misma función. « Save changes » (Guardar y continuar), situado al final del asistente, y «Save » (Guardar y salir), situado en la parte inferior derecha de la página, guardan toda la pantalla: el estilo principal, la disposición de las habitaciones, los cinco colores, el selector de fotos, todos los campos de código personalizados y los ID de análisis de las otras dos pestañas. No es necesario pulsar ambos, y al pulsar uno no queda la otra mitad sin guardar.
Si el guardado se realiza correctamente, aparecerá el mensaje «Successfully updated!» y se recargará el registro guardado, de modo que los valores que vea a continuación serán los que se encuentran en el servidor y no los de su navegador. Esa recarga es la comprobación que merece la pena realizar: si un guardado no llega al servidor, sus cambios permanecen en pantalla sin guardar, y la forma de distinguir ambos estados es que una página guardada vuelve del servidor en lugar de permanecer tal y como la dejó.