Aparência e Estilo no Backoffice

✋  Objetivo do artigo

Neste artigo vai aprender como funciona a área Aparência e Estilo no Backoffice da Weasy e como configurar os elementos visuais globais do seu site. Estas definições permitem controlar aspetos como cores principais, tipografia, estilos de texto e identidade visual base, que depois são utilizados em todo o site. Alterar estas opções permite atualizar rapidamente o aspeto visual do website sem editar página a página.

1️⃣  Onde encontrar Aparência e Estilo

A configuração visual global do site encontra-se no Backoffice em: Website → Aparência e Estilo

Esta área define o estilo base do tema utilizado no site.

As definições feitas aqui aplicam-se globalmente ao site e influenciam:

• • cores do website

  • tipografia

  • estilos de títulos e texto

  • aparência do editor de texto

Estas opções funcionam como a base visual do site.

2️⃣  Cores do site

Na secção Aparência geral, pode definir as cores principais utilizadas no site.

Normalmente incluem:

Cor principal - Cor usada em botões, links e elementos de destaque.

Cor secundária - Cor complementar usada em alguns elementos visuais.

Cores do texto - Controlam a cor base utilizada nos conteúdos do site.

Estas cores são reutilizadas automaticamente em vários elementos do site.

☞ Alterar uma cor aqui pode atualizar vários elementos visuais ao mesmo tempo.

3️⃣  Cores da barra de menu mobile

Também é possível definir as cores da barra de menu mobile.

Estas opções controlam o aspeto do cabeçalho quando o site é visualizado em dispositivos móveis.

Pode configurar:

• • cor do fundo da barra

  • cor dos ícones

Isto ajuda a manter consistência visual entre desktop e mobile.

4️⃣  Tipos de letra do site

Na secção Tipos de letra, pode definir as fontes utilizadas no site.

Normalmente são configuradas três categorias:

Títulos - Usada em cabeçalhos e títulos principais.

Menus - Utilizada na navegação do site.

Conteúdo - Utilizada nos textos do site.

Estas definições garantem consistência tipográfica em todas as páginas.

☞ Boa prática: utilizar no máximo uma ou duas famílias tipográficas.

5️⃣  Estilos tipográficos

A área Estilos tipográficos permite controlar o aspeto dos diferentes tipos de texto do site.

Pode configurar elementos como:

• • cabeçalhos

  • títulos (H1, H2, H3)

  • parágrafos

Para cada tipo de texto pode ajustar:

• • fonte

  • tamanho

  • espaçamento entre linhas

  • cor

Estas definições ajudam a manter uma hierarquia visual consistente no site.

6️⃣  Tipos de letra adicionais

Também é possível adicionar fontes adicionais, através de Google Fonts.

Isto permite utilizar tipografias extra no site.

No entanto, recomenda-se usar apenas as fontes necessárias para evitar impacto no desempenho do site.

7️⃣  Código personalizado

A área Aparência e Estilo inclui também opções avançadas para inserir código personalizado.

Estas opções destinam-se a utilizadores com conhecimentos técnicos.

Incluem:

Código no header

Permite adicionar scripts ou integrações externas.

Exemplos comuns:

• • Google Analytics

  • Facebook Pixel

  • ferramentas de tracking

8️⃣  CSS personalizado

Também pode adicionar CSS personalizado para alterar estilos do site.

Isto permite:

• • ajustar estilos específicos

  • criar personalizações avançadas

  • alterar comportamento visual de elementos

Esta funcionalidade deve ser usada apenas quando necessário.

9️⃣  JavaScript personalizado

A secção de JavaScript personalizado permite adicionar scripts adicionais ao site.

Esta funcionalidade é utilizada normalmente para:

• • integrações externas

  • funcionalidades personalizadas

  • scripts de marketing

Tal como o CSS, é uma opção destinada a utilizadores avançados.

⚠️  Erros comuns

Alguns erros frequentes ao trabalhar com Aparência e Estilo incluem:

Alterar cores sem verificar o impacto em todo o site.

Usar demasiadas fontes diferentes.

Adicionar CSS ou JavaScript sem necessidade.

Alterar estilos tipográficos depois do site já estar construído.

⚡  Boas práticas

Defina cores e tipografia antes de construir as páginas.

Use poucas cores principais.

Mantenha uma hierarquia clara de títulos.

Evite adicionar código personalizado se não for necessário.

✅  Conclusão

A área Aparência e Estilo define a base visual do site na Weasy.

Ao configurar corretamente cores, tipografia e estilos globais, é possível garantir consistência visual em todas as páginas do website.

Estas definições funcionam como a identidade visual base do site e facilitam a gestão do design ao longo do tempo.