Pular para o conteúdo principal

Aparência

A página de Aparência permite que você personalize a aparência 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 a partir de um só lugar.

Antes de Começar

  • Complete a Configuração Inicial do seu site
  • Tenha o logo da sua igreja pronto em formato PNG com fundo transparente e proporção 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, Alerta 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é-configurado.
  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 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 ajuste fino.
  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.

Logo e Identidade Visual​

  1. Clique em Logo no painel de Configurações de Estilo.
  2. Envie seu Logo de Fundo Claro e Logo de Fundo Escuro. Use imagens com fundo transparente e proporção 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 logo com fundo transparente em formato PNG. Isso garante que fique ótimo tanto em fundos claros quanto escuros no seu site e aplicativo móvel.

CSS e JavaScript Personalizados​

  1. Clique em CSS e Javascript no painel de Configurações de Estilo.
  2. Adicione CSS Personalizado para sobrescrever 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 Google Analytics.
Aviso

CSS personalizado é poderoso, mas pode quebrar o layout do seu site se usado incorretamente. A maioria das igrejas pode alcançar a aparência desejada usando os controles integrados de cor, fonte e espaçamento. Use CSS personalizado apenas se você tiver experiência com desenvolvimento web.

Temas de Estilo​

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

Próximos Passos​