Como usar o Guia de Estilos

O Guia de Estilos é um painel do editor que reúne, em um só lugar, as cores, fontes, bordas, sombras e espaçamentos utilizados na sua página.

Com ele, você configura os padrões visuais uma única vez e pode aplicá-los em diferentes elementos da página. Quando um estilo é alterado no Guia, todos os elementos vinculados a ele são atualizados automaticamente.

Isso facilita a manutenção da página, economiza tempo e ajuda a manter a identidade visual consistente.

Como acessar o Guia de Estilos

1. Acesse o editor de páginas.

2. Dentro do editor, clique no ícone de paleta, correspondente ao Guia de Estilos, no menu lateral esquerdo.

O painel será aberto com três abas: Cores, Fontes e Estilos.

Aba Cores

Nesta aba, você encontra:

• Cores principais: Primária, Secundária e Destaque, utilizadas como base da identidade visual da página;
• Cores de superfície: Fundo, Card e Suave, indicadas para fundos de blocos e outros elementos;
• Cores de feedback: Sucesso e Erro, utilizadas em mensagens, formulários e alertas;
• Cores salvas: cores personalizadas que você pode criar clicando em + Adicionar.

Ao lado de cada cor salva, a informação “Usado em X elementos” mostra quantos elementos da página estão vinculados a ela.

Para editar uma cor, clique sobre ela. Na janela aberta, você poderá alterar o código HEX e definir a cor do texto exibido sobre ela como Automática ou Fixa.

Depois de salvar, todos os elementos vinculados àquela cor serão atualizados automaticamente.

Aba Fontes

Nesta aba, você encontra estilos de tipografia prontos para diferentes tipos de conteúdo:

• Títulos: estilos de H1 a H6, cada um com fonte, tamanho e peso definidos;
• Textos: Texto grande, Texto médio e Texto pequeno, utilizados em parágrafos e outros conteúdos;
• Botões: Botão grande, Botão médio e Botão pequeno;
• Tipografias salvas: combinações personalizadas de fonte que podem ser criadas clicando em + Adicionar.

Ao clicar em um estilo de fonte, você poderá configurar:

• Família da fonte;
• Tamanho;
• Peso;
• Formatação, como negrito, itálico, sublinhado ou tachado;
• Altura da linha;
• Espaçamento entre letras.

Também é possível definir valores diferentes para Desktop e Mobile.

Quando uma tipografia é alterada no Guia de Estilos, todos os textos vinculados a ela são atualizados automaticamente.

Aba Estilos

Nesta aba, você configura padrões visuais que podem ser aplicados aos elementos da página:

• Bordas: Sem borda, Pequena, Média e Grande;
• Sombras: Sem sombra, Suave, Média e Forte;
• Espaço entre itens: Pequeno, Médio e Grande, utilizado para controlar a distância entre os elementos;
• Espaço interno: Pequeno, Médio e Grande, utilizado para controlar o preenchimento interno dos elementos.

Ao clicar em um estilo, você poderá ajustar detalhes como:

• Arredondamento;
• Largura da borda;
• Cor;
• Intensidade da sombra;
• Espaçamento.

Assim como nas cores e fontes, qualquer alteração feita em um estilo será aplicada automaticamente aos elementos vinculados a ele.

Como vincular os elementos ao Guia de Estilos

Os elementos da página podem utilizar valores definidos no Guia de Estilos em vez de configurações individuais.

Exemplo em um botão

Selecione o botão e clique em Editar.

No campo Cor do botão, escolha uma opção da paleta, como Cor primária, em vez de definir um código de cor manualmente.

Se a Cor primária for alterada posteriormente no Guia de Estilos, todos os botões vinculados a ela serão atualizados.

Exemplo em um texto ou parágrafo

Selecione o texto, clique em Editar e abra o campo Cor e gradiente.

O Seletor de cores exibirá as mesmas opções disponíveis no Guia de Estilos, incluindo:

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

Ao selecionar uma dessas opções, o texto ficará vinculado à cor escolhida.

O campo Estilo do texto funciona da mesma forma. Nele, você pode aplicar uma tipografia definida no Guia, como Texto médio, Título H1 ou uma tipografia salva.

Exemplo no fundo de um bloco

Selecione uma área vazia do bloco e clique em Editar.

No campo Cor do fundo, escolha uma opção da paleta, como Cor secundária.

O fundo do bloco ficará vinculado a essa cor e será atualizado automaticamente caso ela seja alterada no Guia de Estilos.

Exemplo em bordas e sombras

Nos campos Borda e Sombra de um elemento, escolha um dos estilos definidos no Guia, como:

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

Ao editar esse padrão no Guia de Estilos, todos os elementos que o utilizam serão atualizados.

Alterações automáticas nos elementos vinculados

Ao utilizar estilos do Guia, você não precisa editar cada elemento individualmente.

Por exemplo:

• Ao alterar a Cor primária, todos os elementos vinculados a ela mudam;
• Ao alterar o estilo Texto médio, todos os textos que utilizam essa tipografia são atualizados;
• Ao alterar a Borda Média, todos os elementos vinculados recebem o novo arredondamento ou largura;
• Ao alterar a Sombra Suave, a nova configuração é aplicada em todos os elementos que utilizam esse estilo;
• Ao alterar um padrão de espaçamento, todos os elementos vinculados passam a utilizar o novo valor.

Essa vinculação permite atualizar a identidade visual da página de forma mais rápida e consistente.

Pronto! Agora você já sabe como configurar o Guia de Estilos e utilizar suas cores, fontes, bordas, sombras e espaçamentos nos elementos da página.

Atualizado em: 05/08/2026