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 todos os aspectos visuais do seu site em um só lugar.

Antes de Começar

  • Complete 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 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 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 Serif, Sans Serif, Display, Handwriting e Monospace.
  3. Defina fontes para títulos e texto do corpo.
  4. Clique em Escala de Tipografia para ajustar a hierarquia de tamanho para Título 1 até Título 4. Use o multiplicador de escala e os campos de tamanho base para ajustar finamente.
  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 até 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 Marca​

  1. Clique em Logotipo no painel de Configurações de Estilo.
  2. Carregue 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. Carregue uma Imagem de Mídia Social para 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 em fundos claros e escuros em todo o seu site e aplicativo móvel.

Estilos de Navegação​

Personalize as cores da barra de navegação do seu site para os modos sólido e transparente:

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

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

CSS e JavaScript Personalizados​

  1. Clique em CSS e Javascript no painel de Configurações de Estilo.
  2. Adicione CSS Personalizado para substituir 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 snippets como integração do 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 que desejam usando os controles integrados de cor, fonte e espaçamento. Use CSS personalizado apenas se você estiver confortável com desenvolvimento web.

Temas de Estilo​

Se você quiser 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 finamente as configurações individuais depois de aplicar um tema.

Próximos Passos​