Pular para o conteúdo principal

Aparência

A página Aparência permite que você personalize a aparência geral do seu site de igreja. De cores e fontes a espaçamento e CSS personalizado, você pode controlar todos os aspectos visuais de seu site a partir de um único lugar.

Antes de Começar

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

Acessando Configurações de Aparência​

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

Paleta de Cores​

  1. Clique em Paleta de Cores no painel 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 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 tanto para cabeçalhos quanto para texto do corpo.
  4. Clique em Escala Tipográfica para ajustar a hierarquia de tamanho para Cabeçalho 1 a Cabeçalho 4. Use os campos multiplicador de escala e tamanho base para ajustar.
  5. Clique em Salvar para aplicar suas escolhas de fonte.

Espaçamento​

  1. Clique em Escala de Espaçamento no painel Configurações de Estilo.
  2. Ajuste 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 Marca​

  1. Clique em Logotipo no painel Configurações de Estilo.
  2. Carregue seu Logotipo de Fundo Claro e Logotipo de Fundo Escuro. Use imagens com fundo transparente e proporção de aspecto 4:1 para melhores resultados.
  3. Carregue uma Imagem de Mídia Social para visualizações de link 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 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 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 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 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 trechos 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 deseja usando os controles de cor, fonte e espaçamento integrados. Use CSS personalizado apenas se estiver confortável com desenvolvimento web.

Temas de Estilo​

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

Próximos Passos​