Usando o Editor de Páginas

O editor de páginas do B1 é um construtor visual de arrastar e soltar que permite projetar as páginas do site da sua igreja sem escrever nenhum código. Você pode adicionar seções e blocos de conteúdo, personalizar estilos, pré-visualizar seu trabalho e desfazer alterações -- tudo dentro do seu navegador.

Antes de Começar

• Conclua a Configuração Inicial para configurar seu site
• Crie pelo menos uma página em Gerenciando Páginas
• Você precisa da permissão content.edit para acessar o editor

Abrindo o Editor

1. No B1 Admin, clique em Site no menu esquerdo.
2. Encontre a página que deseja editar na tabela de Páginas e clique em Editar.

O editor abre em modo de tela cheia. O painel esquerdo mostra a estrutura da sua página e os elementos de conteúdo disponíveis; a área central mostra uma pré-visualização ao vivo da sua página.

Info

O editor sempre exibe no modo claro, independentemente da configuração de tema do seu B1 Admin. Isso garante que a pré-visualização corresponda com precisão a como sua página aparecerá para os visitantes do site.

Estrutura da Página: Seções e Elementos

Toda página é construída a partir de dois níveis:

• Seções -- Os contêineres de nível superior que dividem sua página em faixas horizontais (por exemplo, uma seção de destaque, um bloco de conteúdo ou uma faixa de rodapé). Toda página deve ter pelo menos uma seção antes que você possa adicionar conteúdo.
• Elementos -- Os itens de conteúdo individuais colocados dentro de uma seção, como texto, imagens, botões, cartões, formulários e calendários.

Adicionando uma Seção

1. Clique em Adicionar Seção (ou no botão + no topo do painel esquerdo).
2. Escolha como começar:
   • A partir de um modelo — navegue pela galeria de modelos de seção organizada por categoria (Destaque, Sobre, Serviços, Doações, etc.) e clique em um para inseri-lo como uma seção totalmente estilizada e pré-preenchida. Você pode personalizar tudo depois que ela for adicionada.
   • Seção em branco — escolha um layout de colunas (única, duas colunas, três colunas, etc.) e construa do zero.
3. A nova seção aparece na pré-visualização. Clique nela para selecioná-la e configurar sua cor de fundo, espaçamento interno e outras opções de estilo.

Alternando o Layout de uma Seção

Já construiu uma seção, mas quer uma estrutura diferente? Use o seletor de layout naquela seção para trocar seu arranjo de colunas por outro da galeria, mantendo o conteúdo e os elementos existentes no lugar.

Adicionando Elementos a uma Seção

1. Clique dentro de uma seção na pré-visualização para selecioná-la.
2. Clique em Adicionar Conteúdo e escolha um tipo de elemento na lista:
   • Texto -- Títulos, parágrafos e texto rico
   • Imagem -- Envie ou vincule uma foto
   • Botão -- Um link de chamada para ação clicável
   • Cartão -- Uma imagem com um título e descrição
   • Formulário -- Incorpore um formulário diretamente na página
   • Calendário -- Exiba um calendário de eventos
   • FAQ -- Blocos de perguntas e respostas em estilo acordeão
   • Vídeo -- Incorpore um vídeo por URL
   • Navegador de Grupos -- Um diretório filtrável de todos os grupos da igreja com busca, filtro de categoria e filtro de rótulo opcionais
   • Recurso com Ícone -- Um ícone com um título e breve descrição, para destacar recursos ou ministérios
   • Galeria -- Uma grade de várias fotos ou layout em mosaico
   • Depoimento -- Uma ou mais citações com nome do autor, função e foto
   • Ícones Sociais -- Ícones vinculados aos perfis de redes sociais da sua igreja
   • Contagem Regressiva -- Um cronômetro contando regressivamente até uma data ou horário semanal de culto
   • Estatísticas -- Uma linha de números grandes com rótulos (membros, anos, campi)
   • Progresso da Campanha -- Uma barra de progresso ao vivo para uma campanha de doações, mostrando o total arrecadado em relação à meta de um fundo
   • Grade da Equipe -- Cartões com foto dos membros de um grupo; o grupo deve ter a opção de lista pública ativada
   • Horários de Culto -- A programação de cultos dos seus campi, obtida automaticamente da configuração de presença
   • Sermões -- Sua biblioteca de sermões, como um navegador completo ou em layout de grade, lista ou destaque do mais recente
   • Mapa -- Um mapa incorporado centralizado no endereço da sua igreja
   • Tabela -- Uma grade simples de linhas e colunas para conteúdo tabular
   • Texto com Foto -- Texto e uma imagem lado a lado
   • Logotipo -- O logotipo da sua igreja, obtido de Aparência
   • Transmissão ao Vivo -- Seu player de transmissão ao vivo, incorporado diretamente na página
   • Doação -- Um botão de doação ou formulário de doação incorporado
   • HTML Bruto -- Marcação HTML personalizada para casos de uso avançados
   • iFrame -- Incorpore conteúdo externo por URL
3. Configure o elemento usando o painel de configurações que aparece.

Reordenando Conteúdo

Arraste seções ou elementos usando o ícone de alça (seis pontos) no lado esquerdo de cada item para reordená-los. Você pode arrastar elementos dentro de uma seção ou movê-los entre seções.

Estilizando Sua Página

Estilos de Seção

Clique em qualquer seção para abrir seu painel de estilo. Você pode definir:

• Fundo -- Cor sólida, gradiente ou imagem. Ao usar uma imagem de fundo, um seletor de Ponto Focal permite clicar para definir qual parte da imagem permanece centralizada conforme a seção é redimensionada, e uma opção de cor de Sobreposição permite adicionar uma tonalidade semitransparente sobre a imagem para melhorar a legibilidade do texto.
• Espaçamento Interno -- Espaçamento superior e inferior dentro da seção
• Largura -- Largura total ou centralizada/contida
• Divisores -- Divisores decorativos em forma (onda, diagonal, curva, triângulo e mais) na borda superior ou inferior da seção, com opções de cor, altura e espelhamento

Estilos de Elemento

Clique em qualquer elemento para abrir seu painel de estilo. As opções comuns incluem tamanho da fonte, cor, alinhamento, margem e espaçamento interno. Para imagens, você pode definir o texto alternativo e os destinos de link.

CSS Personalizado

Para estilização avançada, cada seção e elemento tem um campo de CSS Personalizado onde você pode escrever suas próprias regras CSS. Elas são delimitadas àquele elemento, portanto não afetarão involuntariamente o restante da página.

Dica

Se você precisar aplicar estilos em todo o seu site -- como uma fonte personalizada ou uma cor global -- use as configurações de Aparência em vez de CSS personalizado em páginas individuais.

Pré-visualizando Sua Página

Use os controles de pré-visualização na barra de ferramentas para verificar como sua página fica em diferentes tamanhos de tela:

• Desktop -- Visualização em largura total do navegador
• Mobile -- Visualização estreita em tamanho de celular

Clique em Pré-visualizar para abrir uma versão ao vivo da página em uma nova aba do navegador, exatamente como os visitantes a verão.

Verificando a Acessibilidade

Clique no ícone Acessibilidade na barra de ferramentas para executar uma verificação rápida de problemas comuns -- imagens sem texto alternativo, baixo contraste de cor ou títulos fora de ordem. Cada problema tem um link direto para o elemento que precisa de atenção, para que você possa corrigi-lo no local.

Desfazendo Alterações

O editor rastreia automaticamente seu histórico de edição. Use os botões da barra de ferramentas ou os atalhos de teclado para navegar:

• Desfazer (Ctrl+Z / Cmd+Z) -- Reverte sua última ação
• Refazer (Ctrl+Y / Cmd+Y) -- Reaplica uma ação desfeita

Você também pode restaurar a página para um instantâneo anterior. Clique em Histórico na barra de ferramentas para ver uma lista de instantâneos salvos com descrições, e clique em qualquer entrada para restaurar até aquele ponto.

Aviso

Restaurar um instantâneo substitui o conteúdo atual da sua página pela versão do instantâneo. Isso não pode ser desfeito com o botão padrão de desfazer. Salve um instantâneo do seu estado atual antes de restaurar um antigo se quiser manter a opção de retornar.

Salvando e Publicando

As alterações são salvas automaticamente enquanto você trabalha. Um indicador de status na barra de ferramentas mostra se suas alterações foram salvas.

Estado de rascunho e publicado

As páginas podem ter um estado publicado, que controla quando os visitantes veem suas alterações. A barra de ferramentas exibe um chip de status mostrando o estado atual:

• Ao Vivo ao Salvar -- A página não usa um fluxo de publicação. Toda alteração salva entra no ar imediatamente. Este é o padrão para páginas novas.
• Alterações Não Publicadas -- A página já foi publicada antes, mas você fez alterações desde a última publicação. Os visitantes ainda veem a versão publicada anteriormente.
• Publicada -- A página está no ar e seu conteúdo salvo corresponde ao que os visitantes veem.

Para publicar suas alterações, clique no botão Publicar na barra de ferramentas. A página se torna ao vivo imediatamente.

Para reverter para a última versão publicada sem afetar o que os visitantes veem, abra o menu de mais opções (⋮) e clique em Descartar Alterações.

Para tirar uma página do ar completamente, abra o menu de mais opções e clique em Despublicar. Os visitantes não verão mais essa página até que você a publique novamente.

Dica

Use o fluxo de rascunho/publicação quando quiser preparar uma página -- por exemplo, para um evento futuro -- e só colocá-la no ar no momento certo. Construa e pré-visualize a página, depois clique em Publicar quando estiver pronto.

Artigos Relacionados

• Gerenciando Páginas -- Crie páginas, defina URLs e gerencie a navegação do site
• Aparência -- Defina cores, fontes e identidade visual em todo o site
• Arquivos -- Envie imagens e documentos para usar no editor
• Criando Formulários -- Construa formulários que você pode incorporar em páginas