Pular para o conteúdo principal

Aparência

A página Aparência permite personalizar o visual geral do site da sua igreja. De cores e fontes a espaçamento e CSS personalizado, você pode controlar cada aspecto visual do seu site em um só lugar.

Antes de Começar

  • Conclua a Configuração Inicial para o seu site
  • Tenha o logotipo da sua igreja pronto em formato PNG com fundo transparente e proporção de 4:1
  • Conheça as cores da marca da sua igreja (valores hexadecimais) se você tiver um guia de estilo existente

Acessando as Configurações de Aparência​

  1. No B1 Admin, clique em Site no menu esquerdo.
  2. Clique na aba Aparência no topo da visualização de Páginas do Site.
  3. A página de Estilos do Site carrega com uma pré-visualização ao vivo do seu site à esquerda e opções de Configurações de Estilo à direita.

Paleta de Cores​

  1. Clique em Paleta de Cores no painel de Configurações de Estilo.
  2. Você verá Cores Base (tons claros, de destaque e escuros) e Cores Semânticas (Primária, Secundária, Sucesso, Aviso e Erro).
  3. Clique em qualquer amostra de cor para abrir o seletor de cores. Arraste o seletor ou insira um valor hexadecimal para escolher sua cor.
  4. A Pré-visualização de Combinações de Cores mostra como suas cores selecionadas funcionam juntas.
  5. Use Paletas Sugeridas para aplicar rapidamente um esquema de cores pré-projetado.
  6. Clique em Salvar quando estiver satisfeito.

Tipografia​

  1. Clique em Configurações de Tipografia no painel de Configurações de Estilo.
  2. Clique em Selecionar uma Fonte para abrir o navegador de fontes. Você pode pesquisar por nome ou navegar por categorias como Serifada, Sem Serifa, Display, Manuscrita e Monoespaçada.
  3. Defina fontes tanto para títulos quanto para o texto do corpo.
  4. Clique em Escala Tipográfica para ajustar a hierarquia de tamanhos do Título 1 ao Título 4. Use os campos de multiplicador de escala e tamanho base para ajustar com precisão.
  5. Clique em Salvar para aplicar suas escolhas de fonte.

Espaçamento​

  1. Clique em Escala de Espaçamento no painel de Configurações de Estilo.
  2. Ajuste os valores de espaçamento de Extra Pequeno a Extra Grande. Exemplos práticos mostram como cada valor afeta o layout.
  3. Clique em Salvar Espaçamento para aplicar os valores em todo o seu site.

Logotipo e Identidade Visual​

  1. Clique em Logotipo no painel de Configurações de Estilo.
  2. Envie seu Logotipo para Fundo Claro e Logotipo para Fundo Escuro. Use imagens com fundo transparente e proporção de 4:1 para melhores resultados.
  3. Envie uma Imagem para Redes Sociais para pré-visualizações de links e um Favicon para o ícone da aba do navegador.
Dica

Para melhores resultados, use um logotipo com fundo transparente em formato PNG. Isso garante que ele fique ótimo tanto em fundos claros quanto escuros em todo o seu site e no aplicativo móvel.

Estilos de Navegação​

Personalize as cores da barra de navegação do seu site tanto para o modo sólido quanto para o transparente:

  1. Role até a seção Estilos de Navegação
  2. Clique em Editar Estilos de Navegação
  3. Configure as cores para navegação sólida (com fundo) e navegação transparente (modo sobreposto)
  4. Clique em Salvar para aplicar suas cores de navegação

Para instruções detalhadas, veja Estilos de Navegação.

Widgets do Site​

Os widgets do site aparecem em todas as páginas do seu site, flutuando sobre o conteúdo da página:

  • Faixa de Aviso -- Uma barra dispensável no topo do seu site para mensagens urgentes, como um evento próximo ou uma mudança de horário de culto.
  • Lançador -- Um botão flutuante que abre um menu de acesso rápido, por exemplo, links para doar, fazer check-in ou ver o boletim.
  1. Clique em Widgets do Site no painel de Configurações de Estilo.
  2. Ative os widgets que deseja e configure seu texto, links e cores.
  3. Clique em Salvar.

Analytics​

Adicione seu ID de Medição do Google Analytics 4 no painel de Configurações de Estilo para acompanhar o tráfego de visitantes no seu site.

CSS e JavaScript Personalizados​

  1. Clique em CSS e Javascript no painel de Configurações de Estilo.
  2. Adicione CSS Personalizado para substituir os estilos padrão para personalização avançada.
  3. Adicione HTML Personalizado para códigos de rastreamento ou outros scripts.
  4. Use a seção Exemplos Comuns de Javascript para trechos de código como integração com o Google Analytics.
Aviso

O CSS personalizado é poderoso, mas pode quebrar o layout do seu site se usado incorretamente. A maioria das igrejas consegue obter o visual desejado usando os controles integrados de cor, fonte e espaçamento. Use CSS personalizado apenas se estiver confortável com desenvolvimento web.

Temas de Estilo​

Se você quiser um ponto de partida rápido, as Paletas Sugeridas na seção Paleta de Cores oferecem temas pré-construídos que definem cores coordenadas com um único clique. Você sempre pode ajustar configurações individuais depois de aplicar um tema.

Próximos Passos​