Tokyo - Páginas, pantallas y pop-ups | Pantalla de portada
Última modificación:
Para configurar las propiedades de una pantalla de portada, la seleccionamos haciendo clic sobre ella o desde el camino de migas. Después, en la pestaña "Propiedades", determinamos sus parámetros.
Existen cuatro presets o estilos de portada, y cada una de ellas tiene unas propiedades diferentes.
- Portada básica
- Portada con título a la izquierda
- Portada con título a la derecha
- Portada libre
Portada básica
Es la portada más sencilla, que tiene un fondo de color, el título de la unidad y un botón para continuar.
Para configurarla debemos:
- Seleccionar y redactar el título de la unidad. Se trata de un texto editable en la pantalla.
- Seleccionar y redactar el texto del botón para iniciar la unidad. Por defecto, aparece el texto "Entrar", pero se puede personalizar, se trata de un texto editable en la pantalla.
- Configurar las propiedades de la pantalla.
PROPIEDAD | DESCRIPCIÓN |
|---|---|
Título | Título de la pantalla que se mostrará en menú principal |
Color de fondo de página | Personaliza el color de fondo de la pantalla, elegindo entre un listado de colores predefinidos o añadiendo manualmente un color en formado hexadecimal. |
| Mostrar en menú | Permite decidir si la pantalla se mostrará o no en el Menú principal. Recuerda que otro modo de ocultar una pantalla en el menú es crearla sin el componente "Título". |
Superar objetivo | Esta propiedad actualmente NO TIENE UTILIDAD. Se recomienda no utilizarla.Permite modificar la configuración de la superación de objetivos de este componente concreto, haciendo que se comporte de forma diferente a la configuración general establecida. Podemos elegir entre:
|
Portada con título a la izquierda
Para configurar este estilo de página debemos:
- Seleccionar y redactar el título de la unidad. Se trata de un texto editable en la pantalla.
- Seleccionar y redactar el texto del botón para iniciar la unidad. Por defecto, aparece el texto "Entrar", pero se puede personalizar, se trata de un texto editable en la pantalla.
- Configurar las propiedades de la pantalla.
PROPIEDAD | DESCRIPCIÓN |
|---|---|
| Estilo | Permite cambiar el color de la zona izquierda, donde está colocado el título:
Ver aquí para ver cómo se configuran los colores de la interfaz. |
| Título | Título de la pantalla que se mostrará en menú principal |
Logo (220x50) | Permite añadir el logotipo del cliente sobre el título de la unidad. |
| Color de fondo de pantalla | Personaliza el color de fondo de la pantalla, eligiendo entre un listado de colores predefinidos o añadiendo manualmente un color en formado hexadecimal. Solo aplica si no hay una "Imagen de fondo". |
| Imagen de fondo | Permite sustituir el "Color de fondo de página" por una imagen. |
| Imagen de fondo en el móvil | Permite configurar una imagen que solo se visualizará en dispositivos con resolucion menor de 770px de ancho. A partir de esta resolución, la imagen de fondo no se ve a la derecha del título, sino que se ve en la zona superior, por lo que puede ser interesante tener una imagen diferente para pantallas grandes (PC) y otra para dispositivos con pantallas pequeñas (tablets o SmartPhones) |
| Mostrar en menú | Permite decidir si la pantalla se mostrará o no en el Menú principal. Recuerda que otro modo de ocultar una pantalla en el menú es crearla sin el componente "Título". |
Superar objetivo | Permite modificar la configuración de la superación de objetivos de este componente concreto, haciendo que se comporte de forma diferente a la configuración general establecida. Podemos elegir entre:
|
Portada con título a la derecha
Para configurar este estilo de página debemos:
- Seleccionar y redactar el título de la unidad. Se trata de un texto editable en la pantalla.
- Seleccionar y redactar el texto del botón para iniciar la unidad. Por defecto, aparece el texto "Entrar", pero se puede personalizar, se trata de un texto editable en la pantalla.
- Configurar las propiedades de la pantalla.
PROPIEDAD | DESCRIPCIÓN |
|---|---|
| Estilo | Permite cambiar el color de la zona izquierda, donde está colocado el título:
Ver aquí para ver cómo se configuran los colores de la interfaz. |
| Título | Título de la pantalla que se mostrará en menú principal |
Logo (220x50) | Permite añadir el logotipo del cliente sobre el título de la unidad. |
| Color de fondo de pantalla | Personaliza el color de fondo de la pantalla, elegiendo entre un listado de colores predefinidos o añadiendo manualmente un color en formado hexadecimal. Solo aplica si no hay una "Imagen de fondo". |
| Imagen de fondo | Permite sustituir el "Color de fondo de página" por una imagen. |
| Imagen de fondo en el móvil | Permite configurar una imagen que solo se visualizará en dispositivos con resolucion menor de 770px de ancho. A partir de esta resolución, la imagen de fondo no se ve a la derecha del título, sino que se ve en la zona superior, por lo que puede ser interesante tener una imagen diferente para pantallas grandes (PC) y otra para dispositivos con pantallas pequeñas (tablets o SmartPhones) |
| Mostrar en menú | Permite decidir si la pantalla se mostrará o no en el Menú principal. Recuerda que otro modo de ocultar una pantalla en el menú es crearla sin el componente "Título". |
Superar objetivo | Esta propiedad actualmente NO TIENE UTILIDAD. Se recomienda no utilizarla.Permite modificar la configuración de la superación de objetivos de este componente concreto, haciendo que se comporte de forma diferente a la configuración general establecida. Podemos elegir entre:
|
Portada libre
Esta portada permite personalizar libremente los componentes que podemos añadir en la portada. Se pueden añadir:
- Textos
- Destacados (y dentro, Filas, por lo que podrás agregar prácticamente cualquier componente en su interior (vídeos, etc.).
- Imágenes
- Separadores
En cuanto a sus propiedades, podremos configurar las siguientes:
| PROPIEDAD | DESCRIPCIÓN |
|---|---|
Título | Título de la pantalla que se mostrará en menú principal |
| Color de fondo de pantalla | Personaliza el color de fondo de la pantalla, elegiendo entre un listado de colores predefinidos o añadiendo manualmente un color en formado hexadecimal . Solo aplica si no hay una "Imagen de fondo". |
| Imagen de fondo | Permite sustituir el "Color de fondo de página" por una imagen. |
| Imagen de fondo en móvil | Permite configurar una imagen que solo se visualizará en dispositivos con resolución menor de 770px de ancho. A partir de esta resolución, la imagen de fondo no se ve a la derecha del título, sino que se ve en la zona superior, por lo que puede ser interesante tener una imagen diferente para pantallas grandes (PC) y otra para dispositivos con pantallas pequeñas (tablets o SmartPhones) |
| Tipo de fondo de pantalla | Permite decidir si se repite la imagen de fondo. - Repetir fondo. Coloca la imagen a su tamaño real y la repite las veces que sea necesario hasta cubrir toda la pantalla. Resultará útil para crear patrones de imágenes con imágenes pequeñas. - No repetir fondo. Redimensiona la imagen para que ocupe todo el espacio disponible en pantalla. |
| Ancho | Define el ancho de la columna central, utilizando un sistema similar al tallaje de ropa: del ancho XS (extra-small) al XXXL (triple extra-large) |
| Mostrar en menú | Permite decidir si la pantalla se mostrará o no en el Menú principal. Recuerda que otro modo de ocultar una pantalla en el menú es crearla sin el componente "Título". |
| Superar objetivo | Permite modificar la configuración de la superación de objetivos de este componente concreto, haciendo que se comporte de forma diferente a la configuración general establecida. Podemos elegir entre:
|