---
title: "Cómo configurar el estilo global de tu aplicación | Tutoriales - GoodBarber"
description: "Hoy vamos a hablarte de una herramienta ultra poderosa para el diseño de tu aplicación, el menú Estilo Global.\r \r El estilo global te permite administrar el diseño general…"
canonical_url: "https://es.goodbarber.com/tutorials/diseno/como-configurar-el-estilo-global-de-tu-aplicacion/"
lang: es
---

# Cómo configurar el estilo global de tu aplicación | Tutoriales - GoodBarber

[Atrás](https://es.goodbarber.com/tutorials/)

# 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!

## Vídeos similares

[DiseñoCómo configurar tu encabezado](/tutorials/diseno/como-configurar-tu-encabezado/)

![Cómo configurar tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DiseñoCómo personalizar la pantalla de bienvenida de tu aplicación](/tutorials/diseno/como-personalizar-la-pantalla-de-bienvenida-de-tu-aplicacion/)

![Cómo personalizar la pantalla de bienvenida de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DiseñoCómo configurar el modo de navegación de tu aplicación](/tutorials/diseno/como-configurar-el-modo-de-navegacion-de-tu-aplicacion/)

![Cómo configurar el modo de navegación de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DiseñoCómo personalizar los iconos de tu menú](/tutorials/diseno/como-personalizar-los-iconos-de-tu-menu/)

![Cómo personalizar los iconos de tu menú](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DiseñoCómo diseñar sus secciones](/tutorials/diseno/como-disenar-tus-secciones/)

![Cómo diseñar sus secciones](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DiseñoCómo copiar el diseño de una sección](/tutorials/diseno/como-copiar-el-diseno-de-una-seccion/)

![Cómo copiar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DiseñoCómo configurar tu página de inicio](/tutorials/diseno/como-configurar-tu-pagina-de-inicio/)

![Cómo configurar tu página de inicio](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/diseno/como-elegir-el-tamano-de-tu-encabezado/)

![Cómo elegir el tamaño de tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)

[DiseñoCómo modificar el fondo de tu aplicación](/tutorials/diseno/como-modificar-el-fondo-de-tu-aplicacion/)

![Cómo modificar el fondo de tu aplicación](https://portal.ww-cdn.com/portal_static/images/thumbnail_background.01a5a9e37ad2.jpg)