Identidade visual

A identidade visual é a camada visual do seu site — as cores, as fontes, o logo no cabeçalho, o ícone na aba do navegador. Você define uma vez em Construtor de site → Settings → Theme, e cada página do seu site público (mais o formulário de doação, o formulário de visitante, o player de sermões e cada bloco que respeita o tema) puxa de lá.

TIP

O mesmo tema move os fluxos incorporados /give e /visitor. Então quando você define sua cor primária aqui, seu botão de doação num site de terceiros também a pega — é por isso que o formulário de doação do GCM se parece com a sua igreja e não com o GCM.

Cores

Há cinco cores principais e três avançadas. A maioria das equipes só mexe nas cinco principais.

Paleta principal

• Primária — a cor principal da marca. Botões, links, destaques. Se você só definir uma cor, defina esta.
• Secundária — usada para botões menos proeminentes e a segunda metade dos gradientes. Escolha algo que funcione ao lado da primária, não contra ela.
• Destaque — cor de destaque para callouts, badges, estados de hover.
• Fundo — o fundo da página. A maioria das igrejas deixa em #ffffff ou quase branco.
• Texto — cor do texto do corpo. Geralmente um cinza escuro (#1f2937) em vez de preto puro para uma leitura mais suave.

Cores avançadas

Escondidas atrás de uma seção expansível para o painel se manter acessível:

• Cor de título — substitui a cor do texto para h1–h6 se você quiser títulos mais escuros (ou numa cor de marca) do que o texto do corpo.
• Cor de link / Cor de link no hover — por padrão sua primária, mas você pode mudar se os links precisarem ficar mais visíveis contra um fundo colorido.

Clique em qualquer amostra de cor para abrir o seletor, ou cole um código hex direto (#3b82f6). As mudanças aparecem em prévia ao vivo no painel da direita — mas você ainda precisa clicar em Save theme lá embaixo para que elas saiam para o site público.

Fontes

Escolha uma fonte de título e uma fonte de corpo no dropdown. Há 32 opções servidas pelo Google Fonts, do clássico (Inter, Roboto, Open Sans) ao display (Bebas Neue, Syncopate, Archivo Black) ao serif (Playfair Display, Cormorant Garamond, Source Serif 4).

Algumas combinações que funcionam bem:

• Ousado + legível — Bebas Neue (título) + Inter (corpo).
• Editorial — Playfair Display (título) + Source Serif 4 (corpo).
• Quente + moderno — Fraunces (título) + DM Sans (corpo).
• Mínimo — Inter + Inter.

Quando você muda uma fonte, todos os blocos que respeitam o tema a pegam — não é preciso substituir bloco a bloco.

Logo

Faça upload de PNG, SVG ou JPG. O logo aparece no cabeçalho de cada página (alinhado à esquerda por padrão — configurável em Header & Footer) e como imagem Open Graph padrão nos compartilhamentos sociais, se você não definir uma explicitamente em SEO.

• Tamanho recomendado: 300 px de largura no mínimo, fundo transparente, SVG preferido.
• Clique em Choose from library para reaproveitar um asset que você já enviou.
• Não se preocupe com dimensões pixel-perfect — o cabeçalho escala a imagem para encaixar.

Se você não enviar logo, o cabeçalho recai para o nome da sua organização em texto, estilizado na sua fonte de título.

Favicon

O minúsculo ícone na aba do navegador. A maioria das igrejas usa uma versão simplificada do seu logo — uma única letra, um símbolo, a cruz. Faça upload de .ico, .png ou .svg.

• Tamanho máximo de arquivo: 100 KB. O uploader rejeita qualquer coisa maior.
• Recomendado: PNG 32×32 ou 64×64 com fundo transparente.

O favicon também é usado como ícone de tela inicial do iOS/Android quando alguém faz "Adicionar à tela inicial" no seu site.

Subtítulo / slogan de marca

Isso não fica na aba Theme — é definido em cada página individual em Header & Footer settings. O cabeçalho pode mostrar o nome da sua organização com um subtítulo opcional embaixo (por exemplo, "Grace City Church" / "Onde o céu encontra a terra"). Mantenha o subtítulo curto — abaixo de 50 caracteres funciona melhor.

Para o hero da página inicial, o título e subtítulo fazem parte do próprio bloco Hero banner, não do tema global. Veja Catálogo de blocos.

Estilo de animação, estilo de cartão, textura de sobreposição

Três botões de sensação global na base do painel Theme:

• Estilo de animação — Subtle (fade suave para cima no scroll, o padrão), Dynamic (movimento maior, mais rápido), ou None (tudo aparece instantaneamente). Afeta cada bloco que opta pelas animações de entrada. Substituições por bloco estão disponíveis nas props Puck de cada bloco.
• Estilo de cartão — Flat, Elevated (sombra projetada), Bordered, ou Glass (efeito vidro fosco). Move a aparência dos cartões em Blog feed, Sermon feed, Diretório de equipe, Testimonials.
• Textura de sobreposição — None, Grain, Dots, ou Lines. Aplica uma leve sobreposição na página inteira. A maioria das equipes deixa desligado — é um toque legal em designs minimalistas.

Salvando

Clique em Save theme na base do painel. As mudanças saem para o seu site público imediatamente — sem etapa de publicação separada para mudanças de tema (diferentemente das páginas, que têm seu próprio estado rascunho/publicado em Publicação + rascunhos).

WARNING

Se o seu site está no ar e você muda a cor primária, cada visitante vê a nova cor no próximo carregamento de página. Não há prévia-antes-de-publicar para o tema — o diff vai direto para produção. Se quiser testar uma cor sem se comprometer, volte para o hex antigo se não gostar.

Onde isso é armazenado

O tema vive como um objeto JSON na sua linha org_sites. As configurações de cabeçalho / rodapé vivem ao lado. Nada disso é por página — é uma única fonte da verdade para todo o seu site.

Veja também: Visão geral do Construtor de site, Domínio personalizado, Formulário de visitante.