Estilo de app: Diseño esencial

El menú Estilo de App te permite gestionar el diseño general de tu app desde un único lugar.
Todas las opciones de este menú se aplican globalmente a todas las secciones de tu app.

⚠️ Importante
Si modificas alguna opción del menú Estilo de App, se anularán los ajustes de diseño previamente personalizados a nivel de sección.
Los nuevos ajustes de Estilo de App reemplazarán los diseños específicos de cada sección y se aplicarán a todas las secciones de tu app.

Para configurar el diseño esencial de Estilo de la App:
1. Ve al menú de la izquierda "Mi App".
2. Haz clic en "Estilo de App " en la columna de la derecha.

Para personalizar a fondo una sección específica, consulta la ayuda online dedicada a los ajustes de diseño a nivel de sección.

1. Configura tu tema de color
Un tema de color es un conjunto de colores complementarios que se aplican globalmente en toda tu app.
GoodBarber ofrece varias opciones: puedes elegir entre los esquemas de color integrados, usar la Paleta Mágica para generar un tema automáticamente o crear el tuyo propio desde cero o editando una paleta existente.

2. Personaliza los colores con más detalle
Una vez definido tu tema, puedes ajustar el uso de los colores para cada elemento de tu app. Por ejemplo:
- Encabezado: color del título, color del icono y color de fondo
- Colores primarios utilizados en toda la app
- Color de fondo de la app
- Colores de los botones
- Y más

Esto te permite controlar con precisión la identidad visual de tu app.

3. Aplica el tema a tu app
Después de configurar y personalizar los colores, aplica el tema a tu app.
Estos ajustes se aplicarán automáticamente en todas las secciones, lo que te ayudará a ahorrar tiempo y a mantener un diseño uniforme en toda la app.

El texto de tu app sigue una jerarquía clara para garantizar la legibilidad y la coherencia visual.
Se utilizan ocho niveles de texto para mostrar títulos, subtítulos y párrafos.

1. Selecciona un tema de fuente
El menú Estilo de app te permite elegir un tema de fuente compuesto por tres fuentes complementarias.
Esta combinación de fuentes se aplica globalmente en toda la app para mantener la armonía visual.

2. Configura el tamaño del texto con el control deslizante
Estilo de app calcula automáticamente el tamaño de fuente para cada nivel de texto para respetar la jerarquía.
Al ajustar el control deslizante, se escalan todos los niveles proporcionalmente, manteniendo la legibilidad.

3. Personaliza las fuentes en cada nivel
Puedes ajustar las fuentes para cada nivel de texto individualmente.
Todas las fuentes de la biblioteca de Google Fonts están disponibles, junto con las fuentes nativas instaladas por defecto en los dispositivos de tus usuarios.

Para una mejor coherencia visual, recomendamos no usar más de tres fuentes en toda la app.

También puedes añadir una fuente personalizada* haciendo clic en el icono + en la lista desplegable. La fuente se añadirá a tu lista de familias de fuentes.
*Importante: Las fuentes pueden estar sujetas a restricciones de derechos de autor y licencia, ya sea para uso personal o comercial.
Asegúrate de tener derecho a usar y distribuir cualquier fuente en tu aplicación revisando su acuerdo de licencia.

4. Ajusta las propiedades de la fuente
Puedes definir el grosor, la altura de línea y el espaciado entre letras de cada fuente.

5. Aplica la configuración de la fuente
Una vez configuradas y personalizadas las fuentes, aplica los cambios a tu aplicación.
Esta configuración se aplica automáticamente en todas las secciones, lo que te ayuda a ahorrar tiempo y a mantener un diseño uniforme en toda la aplicación.

En tu app, los botones se usan en las páginas que invitan a los usuarios a realizar una acción.
Existen tres niveles de botones, cada uno diseñado para un tipo de acción y contexto específico dentro de las secciones y los widgets de Inicio.

GoodBarber asigna automáticamente el nivel de botón adecuado según la acción y su ubicación en la app.

- Nivel 1: Botón de acción principal, siempre con relleno
- Nivel 2: Botón de acción secundaria, siempre con contorno
- Nivel 3: Acción terciaria, solo con enlace de texto

1. Configura la forma del botón
En el menú Estilo de la app, puedes elegir la forma que se aplicará a todos los botones de tu app:
- Cuadrado
- Redondeado
- Redondo

Esta configuración se aplica globalmente a todos los niveles de botones.

Importante
- Los colores de los botones se basan en la paleta de colores de tu app. Puedes anular el color de un botón específico desde el panel de diseño de la sección o la configuración del widget .
- El nivel del botón lo define GoodBarber y no se puede cambiar manualmente.

En el menú Estilo de App, puedes definir la apariencia global de todos los campos del formulario configurando:

- La forma del campo (cuadrado, redondo o redondo)
- El tamaño y el diseño del campo (pequeño, mediano o grande)
- La posición de la etiqueta (título dentro o encima del campo)

Una vez modificados, estos estilos de campo se utilizan automáticamente en todas las secciones y widgets.
Esta configuración global te ayuda a mantener un diseño uniforme en toda la app sin tener que ajustar cada formulario individualmente.

6 - Haz clic en "Aplicar*" para aplicar tu nuevo estilo global personalizado. 

*Cada modificación hecha en este menú sera aplicada a todas las secciones de tu app. 
Tenga mucho cuidado cuando estas aplicando el estilo global de tu app. Si haz hecho algún cambio de diseño dentro de una sección en particular, esos cambios se perderán, y serán remplazados por los nuevos puestos en tu Estilo Global personalizado.

Nota: Los menús han cambiado en el backoffice, pero el comportamiento que se explica en el video sigue siendo el mismo.