Cómo usar el Guia de Estilos

El Guia de Estilos (Guía de Estilos) es un panel del editor que reúne, en un solo lugar, los colores, las fuentes, los bordes, las sombras y los espaciados utilizados en tu página.

Con él, configuras los estándares visuales una sola vez y puedes aplicarlos en diferentes elementos de la página. Cuando un estilo se modifica en la Guía, todos los elementos vinculados a él se actualizan automáticamente.

Esto facilita el mantenimiento de la página, ahorra tiempo y ayuda a mantener la identidad visual consistente.

Cómo acceder al Guia de Estilos

1. Accede al editor de páginas.

2. Dentro del editor, haz clic en el ícono de paleta, correspondiente al Guia de Estilos, en el menú lateral izquierdo.

El panel se abrirá con tres pestañas: Cores, Fontes y Estilos.

Pestaña Cores

En esta pestaña encuentras:

• Cores principais (colores principales): Primária, Secundária y Destaque, utilizados como base de la identidad visual de la página;
• Cores de superfície (colores de superficie): Fundo, Card y Suave, indicados para fondos de bloques y otros elementos;
• Cores de feedback (colores de feedback): Sucesso y Erro, utilizados en mensajes, formularios y alertas;
• Cores salvas (colores guardados): colores personalizados que puedes crear haciendo clic en + Adicionar.

Al lado de cada color guardado, la información “Usado em X elementos” muestra cuántos elementos de la página están vinculados a él.

Para editar un color, haz clic sobre él. En la ventana que se abre podrás cambiar el código HEX y definir el color del texto mostrado sobre él como Automática o Fixa.

Después de guardar, todos los elementos vinculados a ese color se actualizarán automáticamente.

Pestaña Fontes

En esta pestaña encuentras estilos de tipografía listos para diferentes tipos de contenido:

• Títulos (títulos): estilos de H1 a H6, cada uno con fuente, tamaño y peso definidos;
• Textos (textos): Texto grande, Texto médio y Texto pequeno, utilizados en párrafos y otros contenidos;
• Botões (botones): Botão grande, Botão médio y Botão pequeno;
• Tipografias salvas (tipografías guardadas): combinaciones personalizadas de fuente que pueden crearse haciendo clic en + Adicionar.

Al hacer clic en un estilo de fuente, podrás configurar:

• Familia de la fuente;
• Tamaño;
• Peso;
• Formato, como negrita, cursiva, subrayado o tachado;
• Altura de línea;
• Espaciado entre letras.

También es posible definir valores diferentes para Desktop y Mobile.

Cuando una tipografía se modifica en el Guia de Estilos, todos los textos vinculados a ella se actualizan automáticamente.

Pestaña Estilos

En esta pestaña configuras estándares visuales que pueden aplicarse a los elementos de la página:

• Bordas (bordes): Sem borda, Pequena, Média y Grande;
• Sombras (sombras): Sem sombra, Suave, Média y Forte;
• Espaço entre itens (espacio entre ítems): Pequeno, Médio y Grande, utilizado para controlar la distancia entre los elementos;
• Espaço interno (espacio interno): Pequeno, Médio y Grande, utilizado para controlar el relleno interno de los elementos.

Al hacer clic en un estilo, podrás ajustar detalles como:

• Redondeo;
• Ancho del borde;
• Color;
• Intensidad de la sombra;
• Espaciado.

Al igual que en los colores y las fuentes, cualquier cambio hecho en un estilo se aplicará automáticamente a los elementos vinculados a él.

Cómo vincular los elementos al Guia de Estilos

Los elementos de la página pueden utilizar valores definidos en el Guia de Estilos en lugar de configuraciones individuales.

Ejemplo en un botón

Selecciona el botón y haz clic en Editar.

En el campo Cor do botão, elige una opción de la paleta, como Cor primária, en lugar de definir un código de color manualmente.

Si la Cor primária se modifica posteriormente en el Guia de Estilos, todos los botones vinculados a ella se actualizarán.

Ejemplo en un texto o párrafo

Selecciona el texto, haz clic en Editar y abre el campo Cor e gradiente.

El selector de colores mostrará las mismas opciones disponibles en el Guia de Estilos, incluyendo:

• Cores principais;
• Cores de superfície;
• Cores de feedback;
• Cores salvas.

Al seleccionar una de esas opciones, el texto quedará vinculado al color elegido.

El campo Estilo do texto funciona de la misma manera. En él puedes aplicar una tipografía definida en la Guía, como Texto médio, Título H1 o una tipografía guardada.

Ejemplo en el fondo de un bloque

Selecciona un área vacía del bloque y haz clic en Editar.

En el campo Cor do fundo, elige una opción de la paleta, como Cor secundária.

El fondo del bloque quedará vinculado a ese color y se actualizará automáticamente en caso de que se modifique en el Guia de Estilos.

Ejemplo en bordes y sombras

En los campos Borda y Sombra de un elemento, elige uno de los estilos definidos en la Guía, como:

• Borda Média;
• Borda Grande;
• Sombra Suave;
• Sombra Forte.

Al editar ese estándar en el Guia de Estilos, todos los elementos que lo utilizan se actualizarán.

Cambios automáticos en los elementos vinculados

Al utilizar estilos de la Guía, no necesitas editar cada elemento individualmente.

Por ejemplo:

• Al modificar la Cor primária, todos los elementos vinculados a ella cambian;
• Al modificar el estilo Texto médio, todos los textos que utilizan esa tipografía se actualizan;
• Al modificar la Borda Média, todos los elementos vinculados reciben el nuevo redondeo o ancho;
• Al modificar la Sombra Suave, la nueva configuración se aplica en todos los elementos que utilizan ese estilo;
• Al modificar un estándar de espaciado, todos los elementos vinculados pasan a utilizar el nuevo valor.

Esta vinculación permite actualizar la identidad visual de la página de forma más rápida y consistente.

¡Listo! Ahora ya sabes cómo configurar el Guia de Estilos y utilizar sus colores, fuentes, bordes, sombras y espaciados en los elementos de la página.

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. 😊

Actualizado el: 28/07/2026