Personalizando o Design do Seu Site
O Website Studio inclui um sistema completo de personalização de design com temas pré-construídos, substituições de cores personalizadas, opções de tipografia e escolhas de estilo de cabeçalho/rodapé. Todas as configurações de design são gerenciadas na página Tema e Cores.
Acessando as Configurações de Tema
- Clique em Site na barra lateral esquerda para abrir o Website Studio.
- Clique no cartão Tema e cores no painel.
A Pré-visualização ao Vivo
No topo da página, a Pré-visualização ao vivo mostra seu site público como os visitantes o veem. Salve suas alterações e depois clique em Atualizar para vê-las na pré-visualização. Expandir deixa a pré-visualização mais alta; Recolher a reduz novamente.
Escolhendo um Tema
O Website Studio inclui 10 temas profissionalmente projetados. Cada tema fornece um conjunto completo de cores, fontes, raio de borda e estilos de sombra.
Temas Disponíveis
| Tema | Descrição | Estilo |
|---|---|---|
| Clássico | Design atemporal e tradicional com destaques em azul-marinho e dourado | Títulos em serif, sombras sutis |
| Moderno | Limpo e contemporâneo com destaques em azul e violeta | Sans-serif, cantos arredondados |
| Minimalista | Simples e elegante com bastante espaço em branco | Tons neutros, sem bordas ou sombras |
| Terra Acolhedora | Aconchegante e acolhedor com tons terrosos âmbar | Títulos em serif, sombras quentes |
| Azul Oceano | Calmo e tranquilo com cores azul-céu inspiradas no oceano | Cantos arredondados, sombras suaves |
| Verde Floresta | Natural e refrescante com destaques verdes | Títulos em serif, sombras sutis |
| Laranja Pôr do Sol | Vibrante e energético com tons laranja quentes | Cantos extra-arredondados, sombras quentes |
| Roxo Real | Elegante e sofisticado com destaques em roxo real | Títulos em serif decorativo |
| Cinza Ardósia | Profissional e moderno com tons neutros de cinza | Sans-serif, bordas pequenas |
| Meia-noite Escuro | Design ousado em modo escuro para igrejas modernas | Fundo escuro, destaques brilhantes |
Como Selecionar um Tema
- Na página Tema e Cores, navegue pelos cartões de tema em Escolher um Tema.
- Cada cartão mostra uma prévia de cores, o nome do tema e uma breve descrição.
- Clique em um cartão de tema para selecioná-lo. Uma marca de verificação aparecerá para confirmar sua seleção.
- Role até o final e clique em Salvar Configurações de Tema.
Dica: As prévias de tema mostram a barra de cor primária, cor do texto e cor de fundo para que você tenha uma ideia do visual antes de selecionar.
Personalizando Cores
Você pode substituir as cores padrão do tema pelas cores da sua marca. Isso permite usar o layout e estrutura de um tema enquanto combina com a identidade visual da sua igreja.
Substituições de Cor Disponíveis
- Cor Primária — Usada em botões, links e elementos de destaque.
- Cor Secundária — Usada em elementos secundários da interface.
- Cor de Destaque — Usada em realces e elementos especiais.
Como Personalizar Cores
- Na página Tema e Cores, role até a seção Personalizar Cores.
- Para cada cor:
- Clique na amostra de cor para abrir o seletor de cores.
- Selecione a cor desejada.
- O código hexadecimal será exibido no campo de texto ao lado do seletor.
- Clique em Salvar Configurações de Tema para aplicar.
Para redefinir as cores aos padrões do tema, clique no link Redefinir para padrões do tema na parte inferior da seção de cores.
Se uma cor que você escolher for clara demais para texto branco, um aviso aparece embaixo dela: «Baixo contraste com texto branco (WCAG AA recomenda 4.5:1)». Escolha um tom mais escuro para que os botões continuem legíveis.
Dica: Se você deixar um campo de cor vazio, a cor padrão do tema para esse slot será usada. Você não precisa substituir todas as três cores — apenas as que deseja alterar.
Escolhendo Fontes
Você pode personalizar as fontes de título e corpo independentemente.
Fontes Disponíveis
| Fonte | Estilo |
|---|---|
| Padrão do Sistema | A fonte sans-serif padrão do dispositivo |
| Inter | Sans-serif moderna e limpa |
| Poppins | Sans-serif geométrica e amigável |
| Montserrat | Sans-serif geométrica e marcante |
| Georgia | Serif clássica |
| Merriweather | Serif legível |
| Lora | Serif elegante |
| Playfair Display | Serif decorativa de exibição |
Como Alterar Fontes
- Na página Tema e Cores, role até a seção Tipografia.
- Selecione uma fonte no menu suspenso Fonte de Título.
- Selecione uma fonte no menu suspenso Fonte do Corpo.
- Clique em Salvar Configurações de Tema.
Selecionar «Usar padrão do tema» usará a fonte definida pelo tema selecionado.
Estilos de Cabeçalho
O estilo de cabeçalho controla como a navegação do site aparece no topo de cada página.
Estilos de Cabeçalho Disponíveis
| Estilo | Descrição |
|---|---|
| Clássico | Logotipo à esquerda, links de navegação à direita |
| Centralizado | Logotipo centralizado no topo, links de navegação abaixo |
| Transparente | Sobrepõe a imagem hero (ótimo para páginas Início com muitas imagens) |
| Moderno | Logotipo à esquerda, navegação centralizada, botão de chamada para ação à direita |
| Minimalista | Apenas logotipo e ícone de menu hambúrguer |
Como Escolher um Estilo de Cabeçalho
- Na página Tema e Cores, role até a seção Estilo de Cabeçalho.
- Cada opção inclui uma prévia visual mostrando o layout.
- Clique no estilo preferido.
- Clique em Salvar Configurações de Tema.
Estilos de Rodapé
O estilo de rodapé controla o layout da parte inferior de cada página.
Estilos de Rodapé Disponíveis
| Estilo | Descrição |
|---|---|
| Completo | Rodapé com várias colunas com informações de contato, links de navegação e redes sociais (o padrão) |
| Minimalista | Uma única linha com texto de copyright e ícones de redes sociais |
| Centralizado | Tudo centralizado: logotipo, links de navegação, ícones sociais e copyright |
| Grande | Rodapé grande e proeminente com branding, chamada para ação e várias colunas |
Como Escolher um Estilo de Rodapé
- Na página Tema e Cores, role até a seção Estilo de Rodapé.
- Cada opção inclui uma prévia visual.
- Clique no estilo preferido.
- Clique em Salvar Configurações de Tema.
Layout da Página de Formulários
O Layout da página de formulários define como a lista dos seus formulários aparece para os visitantes na página de formulários do seu site. Todas as opções se adaptam a celulares e tablets:
| Layout | Ideal para |
|---|---|
| Cartões | Blocos grandes com um banner de ícone — ideal para poucos formulários |
| Compact grid | Blocos menores, mais por linha — bom para muitos formulários |
| Lista | Um por linha, fácil de percorrer |
| Detailed list | Um por linha com a descrição completa |
Clique no layout que você quer e depois em Salvar configurações do tema.
Logotipo da Igreja
O logotipo da sua igreja aparece no cabeçalho do site e é configurado nas configurações da igreja:
- Abra Configurações da igreja (o link Configuração da igreja no final da barra lateral) e permaneça na aba Perfil.
- Envie a imagem do seu logotipo.
- O logotipo aparecerá automaticamente no seu site com base nas configurações de estilo do cabeçalho.
Você pode controlar se o logotipo é exibido no cabeçalho nas configurações de Navegação (consulte Navegação e Menus).
Salvando Suas Alterações de Design
Todas as alterações de tema, cor, fonte, cabeçalho, layout de formulários e rodapé são salvas juntas quando você clica em Salvar Configurações de Tema. As alterações entram em vigor imediatamente no seu site público — não há etapa separada de publicação para configurações de design.
Próximos Passos
- Navegação e Menus — Configure o menu do site, cabeçalho e conteúdo do rodapé
- Configurações de SEO — Otimize seu site para mecanismos de busca