Introducción
El control de Banner le permite definir un encabezado de página global que generalmente incluye un logotipo, el nombre de la empresa, el eslogan, el título y subtítulo de una página. Con este control, puede mostrar cualquier imagen en la parte superior de una página con fines de personalización. Además, brinda a los usuarios la capacidad de establecer títulos y subtítulos personalizados que se implementan en todas las apps cuando se crean.
Este artículo describe los elementos esenciales para implementar un control Banner.
Agregar un Banner
El comportamiento por defecto de cualquier app es incluir el título y el subtítulo cuando la app es creada. Puede acceder a las configuraciones del control haciendo clic en el Banner; una caja azul rodeará el control y los botones Administrar y Configuraciones se mostrarán en la esquina superior derecha del control.
En caso de que el control sea removido, podrá ser encontrado en la pestaña Controles, en la sección de Banner, como se muestra a continuación:
1.En el menú superior, seleccione la opción Controles. Un menú desplegable mostrará todos los diferentes tipos de controles disponibles.
2.Seleccione la opción Banner y luego haga clic en Agregar imagen.
Configuraciones
Administrar
En la pestaña Administrar, puede configurar todo lo relacionado al contenido del título y subtítulo del Banner y las configuraciones de la imagen.
General
Aquí puede personalizar el control del título y subtítulo. Para cada uno de ellos, usted puede:
•Decidir si el título o subtítulo es visible.
•Definir el contenido para el título y subtítulo.
•Cuando la casilla Colocar en la parte superior está activa, el subtítulo se muestra encima del título. Si no está activa, el título se muestra encima del subtítulo.
Al configurar el contenido de Banner en una página Privada o Página de Detalle, aparecen nuevas opciones en la pestaña Administrar.
Páginas Privadas
En las páginas Privadas usted puede agregar información de usuarios a sus textos haciendo clic en el botón Información de usuario, como se muestra a continuación:
Además, puede habilitar o deshabilitar botones de encabezado para mostrar acciones Relevantes para mí. Puede cambiar el tema de botones seleccionando las opciones Principal o Secundario.
Páginas de Detalle
En las páginas de Detalle puede agregar información de usuarios haciendo clic en el botón Información de usuario. Además, puede agregar información de entidades haciendo clic en el botón Información de entidad, como se muestra a continuación:
También puede habilitar o deshabilitar botones de encabezado para mostrar las Acciones de usuario. Puede cambiar el tema de botones seleccionando la opciones Primario o Secundario.
Altura
Puede ajustar la altura del banner modificando el control deslizante debajo de la etiqueta Altura. El tamaño del banner, en píxeles, se muestra a la derecha del control.
Fondo
Dentro de los ajustes de Banner se puede configurar todo lo relacionado a los ajustes del fondo del banner, como se muestra a continuación:
Aplicar fondo
Puede aplicar un fondo al banner. Para hacerlo, active el interruptor Aplicar fondo.
Una vez activado, podrá seleccionar entre un color o una imagen como fondo del banner.
Usar un color como fondo
Para aplicar un color de fondo al banner de su app, siga estos pasos:
Bajo la etiqueta Color y opacidad del fondo, puede seleccionar el color y la opacidad. Para elegir un color, haga clic en el rectángulo que aparece debajo de la etiqueta.
Seleccione un color desde el Selector de color.
Ajustar opacidad del color
Puede ajustar la opacidad del color seleccionado usando el control deslizante junto al rectángulo. El porcentaje de opacidad se muestra a la derecha del control.
Usar una imagen como fondo
Para añadir una imagen como fondo del banner de su app, siga estos pasos:
En la pestaña Apariencia, active la opción Mostrar imagen.
Una vez activada, Bizagi aplica una imagen predeterminada al banner. Puede reemplazar esta imagen por una de las opciones predefinidas de Bizagi o usar una imagen personalizada.
Usar una imagen predefinida
Para usar una de las imágenes disponibles de Bizagi, seleccione una de las opciones bajo la opción Reemplazar imagen.
Usar una imagen personalizada
Al usar una imagen personalizada, usted puede elegir entre una imagen almacenada localmente desde su dispositivo o un imagen que esté subida a internet como el fondo para su banner.
Para usar una imagen local almacenada en su dispositivo, haga clic en la etiqueta Reemplazar imagen.
Tenga en cuenta que el tamaño recomendado de la imagen es 1640px x 859px.
Seleccione la imagen desde su dispositivo y haga clic en el botón Abrir.
Para usar una imagen alojada en internet, siga estos pasos:
Active la opción Usar URL como ruta de la imagen.
Al activar esta opción, aparecerá el cuadro de texto Escriba la URL de la imagen. Pegue ahí la URL de la imagen que desea utilizar. La URL debe llevar a una imagen cargada y accesible en internet.
Personalizar imagen de fondo
Después de definir la imagen de fondo, usted puede modificar varios aspectos visuales del banner.
Espacio del banner
Puede modificar el espacio que ocupa la imagen de fondo del banner. Puede elegir entre:
•Fluido: hace que el fondo llene todo el banner.
•Contenedor: limita el fondo a un área centrada dentro del banner, dejando los lados sin fondo.
Ajuste
Puede modificar cómo se adapta la imagen de fondo:
•Tamaño original: escala la imagen a su tamaño original.
•Escalar para llenar: ajusta la imagen para llenar el espacio del banner.
•Mosaico: divide el fondo en varias partes (mosaicos), cada una con la imagen.
Tamaño y opacidad de la imagen
Puede ajustar el tamaño de la imagen de fondo con el control deslizante bajo la etiqueta Tamaño de la imagen. Esto solo modifica el tamaño de la imagen, no del banner.
También puede ajustar la opacidad de la imagen con el control bajo la etiqueta Opacidad de la imagen. El porcentaje se muestra a la derecha del control.
Diseño
En la pestaña de Diseño puede personalizar las fuentes y colores del título, subtítulo y botones.
•Fuentes: defina la fuente y el tamaño del título, el subtítulo y los botones. Cada fuente y tamaño es independiente del otro. La familia de fuentes de subtitulo por defecto es de Poppins Regular.
•Colores: defina los colores por separado del título, subtítulo, botones, fondo, flotar encima y borde.
Last Updated 5/11/2025 8:16:14 PM