Cómo configurar el estilo global de tu aplicación

Hoy vamos a hablarte de una herramienta ultra poderosa para el diseño de tu aplicación, el menú Estilo Global.

El estilo global te permite administrar el diseño general de tu aplicación desde un solo menú.

Los colores, fuentes y efectos elegidos en este menú se aplican a cada sección de la aplicación.

Sin embargo, ¡ten cuidado! Cada cambio realizado desde este menú se aplicará a TODAS las secciones de tu aplicación.

Veamos cómo se ve.

Voy al menú Mi app> Diseño> Diseño global

Hago clic en Estilo global.

Lo primero que debes hacer es elegir un tema de color.

Un tema de color es una combinación de colores que combinan armoniosamente. El Estilo Global ofrece una biblioteca de temas de color.

Para elegir de la biblioteca, hago clic en "Cambiar el tema de colores".

Como puedes ver, tengo una opción.

Si quiero modificar mi tema actual, hago clic en Modificar, luego en la parte inferior de la página, hago clic en Crear un tema nuevo.

Solo tengo que seleccionar mis colores;

La parte de la tipografía ahora.

Existe una jerarquía para la visualización de texto en la aplicación.

Se utilizan 8 niveles para mostrar títulos, subtítulos y texto de párrafo.

Yo defino el tamaño de la fuente.

La fuente de cada nivel.

Dependiendo de las fuentes elegidas, también puedo elegir la opción.

Pasemos a los botones.

Para las secciones de tu aplicación que solicitan a los usuarios que realicen acciones, seleccionaré la forma de los botones que quiero aplicar.

Puedo obtener una vista previa del resultado haciendo clic aquí.

Hay varios niveles de jerarquía con respecto a los botones de tu aplicación. El diseño de los botones depende del tema de color de la aplicación, para respetar la armonía, se proponen varias variaciones para cada tema.

Estos son los diferentes tipos de diseño para cada nivel de jerarquía:

- Nivel 1: fondo de botón de color, sin contorno.

- Nivel 2: fondo de botón transparente, contorno de color y texto.

- Nivel 3: fondo de botón transparente, sin contorno.

Luego, los efectos de desplazamiento sobre las imágenes (solo presentes en el escritorio de PWA)

Y finalmente los elementos adicionales como el icono de regreso que aparece en el encabezado durante la navegación en la aplicación. También puedes configurar este icono cuando diseñes tu encabezado.

Aquí aplico mis modificaciones.

¡No olvides que estos cambios sobrescribirán todo el diseño actual de tu tienda, incluidas las secciones desplegables!

¡Creo que mi aplicación es perfecta así! ¿Qué opinas?

¡Hasta pronto para un nuevo tutorial!