La plantilla Grid, es una plantilla tipo cajas en la que podremos mostrar un máximo de cinco categorías con cinco secciones cada una; además de configurar tres accesos directos siempre visibles, el mensaje de bienvenida y la burbuja flotante.
RUTA: MY APP > Selecciona tu producto > CUSTOMIZA TU APP > GRID homepage
Para configurarlo tenemos que completar los siguientes campos:
- Logotipo: logo de nuestro hotel en tamaño 500x250px y PNG con fondo transparente. Pulsando sobre la caja de imagen escogemos la imagen que queremos subir entre los archivos de nuestro ordenador.
- Imagen de fondo: imagen de fondo para la cabecera de la homepage de nuestro hotel. El tamaño recomendado es de 720x480px y el formato JPG. Pulsando sobre la caja de imagen escogemos la imagen que queremos subir entre los archivos de nuestro ordenador.
- Enable dark overlay: habilitaremos esta opción si queremos que se superponga una capa que oscurezca la imagen de fondo.
- Color principal: introducimos el hexadecimal del color que queramos que sea el principal de nuestra app, botones CTA…
Configuración opcional:
- Accesos siempre visibles: Estos botones están siempre visibles aunque el huésped haga scroll. Podemos habilitar un máximo tres.
- Shortcuts background color : introducir el hexadecimal del color de los accesos siempre visibles.
- Icono: podemos subir una imagen de nuestro escritorio o seleccionar un icono de los predefinidos.
- Sección: en esta caja introducimos el nombre del acceso en todos lo idiomas que tenemos habilitados en nuestro hotel pulsando sobre el icono de la bandera
- Contenido de la sección: seleccionamos la sección del CMS donde hemos introducido la información que queremos mostrar al pulsar sobre el acceso.
- Enlazar con URL: seleccionamos esta opción si queremos que el acceso nos lleve a una URL. Automáticamente se habilitará una caja para introducir la URL en todos los idiomas pulsando sobre el icono de la bandera. También podemos seleccionar la opción de abrir en un navegador externo, ya que hay URLs que no permiten ser abiertas dentro de una PWA.
- Mensaje de bienvenida: habilitaremos esta opción si queremos activar el mensaje de bienvenida. Una vez activado podremos editar el mensaje de bienvenida pulsando sobre el texto azul “Editar mensaje de bienvenida” y completando los campos de la ventana emergente
- Burbuja flotante: esta burbuja estará siempre visibles en la parte inferior derecha de la homepage. Tendremos que vincular esta burbuja a una sección/categoría/servicio del CMS en el que hayamos introducido la información que queremos mostrar cuando se pulse sobre ella. Indicaremos también el color hexadecimal de la burbuja y escogeremos un icono.
- Bottom bubble background color : introducir el hexadecimal del color de la burbuja flotante.
- Sección: en esta caja introducimos el nombre de la burbuja.
- Contenido de la sección: seleccionamos la sección del CMS donde hemos introducido la información que queremos mostrar al pulsar sobre la burbuja.
- Enlazar con URL: seleccionamos esta opción si queremos que la burbuja nos lleve a una URL. Automáticamente se habilitará una caja para introducir la URL en todos los idiomas pulsando sobre el icono de la bandera. También podemos seleccionar la opción de abrir en un navegador externo, ya que hay URLs que no permiten ser abiertas dentro de una PWA.
Configuración de categorías y secciones:
Podemos tener un máximo de 5 categorías con 5 secciones dentro de cada una de ellas.
- Cómo añadir una categoría
Para añadir una nueva categoría pulsamos sobre el texto azul “Añadir nueva categoría” y completamos la caja de texto Nombre de la categoría en todos los idiomas que tenemos habilitados en el CMS pulsando sobre el icono de la bandera. Una vez creada la categoría podemos introducir dentro de ella un máximo de cinco secciones .
- Cómo añadir una sección dentro de una categoría
Para añadir una sección pulsamos sobre el texto “+Añadir sección” y completamos los siguientes campos.
- Icono: podemos subir una imagen de nuestro escritorio o seleccionar un icono de los predefinidos.
- Sección: en esta caja introducimos el nombre del acceso en todos lo idiomas que tenemos habilitados en nuestro hotel pulsando sobre el icono de la bandera
- Contenido de la sección: seleccionamos la sección del CMS donde hemos introducido la información que queremos mostrar al pulsar sobre el acceso.
- Enlazar con URL: seleccionamos esta opción si queremos que el acceso nos lleve a una URL. Automáticamente se habilitará una caja para introducir la URL en todos los idiomas pulsando sobre el icono de la bandera. También podemos seleccionar la opción de abrir en un navegador externo, ya que hay URLs que no permiten ser abiertas dentro de una PWA.
- Texto superpuesto: añadiremos un breve texto si queremos resaltar algo de esta sección, por ejemplo “Reserva aquí”. Este texto no debe superar los 12 caracteres y lo introduciremos en todos los idiomas de nuestro establecimiento pulsando sobre el icono de la bandera . Repetiremos esta acción hasta un máximo de cinco veces por cada categoría dependiendo de las secciones que necesitemos añadir.
- Cómo eliminar una categoría
Para eliminar una categoría pulsamos en la x situada al lado del nombre de la categoría y confirmados en la ventana emergente que queremos eliminarla. Se eliminarán también todas las secciones que teníamos introducidas dentro de la misma.
- Cómo modificar el orden de una categoría
Podemos mover la categoría de lugar utilizando las flechas que aparecen a la derecha del nombre de la misma. Podemos mover las flechas hacia la derecha para bajar la categoría y a la izquierda para subirla. Al mover la categoría moveremos también respetando el orden todas las secciones que hemos introducido en ella.
- Cómo eliminar una sección
Podemos eliminar una sección pulsando sobre el icono de la papelera que encontramos en la parte derecha del nombre de la misma. Una vez pulsado el icono de la papelera tenemos que confirmar que queremos borrarla en la pregunta de seguridad.
- Cómo modificar el orden de una sección
Para modificar el orden de las secciones dentro de una categoría tenemos que utilizar las flechas que encontramos al lado del icono de la papelera de esa sección. Las utilizaremos para subir o bajar el orden de las mismas.