Ajustar el aspecto de un componente

La pestaña Diseño permite ajustar el aspecto de un componente. Las opciones cambian según el tipo: un Icono no ofrece exactamente los mismos controles que un Separador o Próxima agenda.

Cómo acceder

Abre Pantalla de inicio, edita el componente y entra en Diseño.

Diseño separa visibilidad, tamaño, colores y opciones de caja.

Tamaño y alineación

Ancho del componente decide qué parte de la fila ocupa. Los componentes generales ofrecen valores entre 8 % y 100 %, con pasos de la cuadrícula; Carrusel ofrece una selección más limitada.

Por ejemplo, tres Iconos al 33 % pueden compartir una fila. No supongas que en móvil pasarán automáticamente a una columna: revisa el resultado con sus textos.

Alineación permite utilizar Inicio, Centro o Final cuando el componente la ofrece.

Colores y caja

Según el componente, puedes preparar imagen de fondo, color de fondo, color de texto, márgenes, esquinas redondeadas y borde. Activa la casilla de personalización para mostrar sus campos.

El borde es sólido y el radio de las esquinas se mide en píxeles. Cambia los valores y revisa el resultado para ajustar el componente a tu diseño.

La opción de extensión al ancho completo aparece en los tipos que la admiten. Próxima agenda no ofrece pestaña Diseño.

Ejemplo práctico

Para un grupo de iconos, mantén un ancho y una alineación parecidos. Ajusta después el contraste y el espacio necesario para leer el texto.

Revisar el resultado

Guarda y comprueba la distribución, los recortes y los textos en móvil y escritorio. Cambia un grupo de ajustes cada vez para entender su efecto.

Mostrar el componente en escritorio o móvil

En Diseño también puedes utilizar Ocultar en para mostrar el componente solo en escritorio, solo en móvil o en ambos. Si necesitas dos aspectos diferentes, prepara dos componentes con opciones de visibilidad opuestas. Consulta Web App.