Catálogo de blocos

Blocos são as unidades de construção de uma página. Você os arrasta da paleta à esquerda do editor Puck sobre a tela, ajusta suas props à direita, e o site público os renderiza. Cada bloco é pensado para igreja — ele puxa dados ao vivo do resto da sua conta GCM quando faz sentido, então você não digita o conteúdo duas vezes.

A paleta é agrupada em quatro seções: Layout, Church, Media e Content feeds. Abaixo está o catálogo de trabalho com uma linha "quando usar" para cada um.

Blocos de layout

Estas são as primitivas estruturais — não se importam com seus dados, só mantêm as coisas no lugar.

• Hero banner — o grande bloco do topo da página com um título, subtítulo, imagem ou vídeo de fundo e um ou dois botões CTA. Solte no topo de cada página de landing. Se você colocar apenas um bloco na página, que seja este.
• Rich text — um bloco de prosa movido a TipTap. Títulos, listas, links, citações, imagens em linha. Use para páginas sobre, declaração de fé, missão, em qualquer lugar onde você escreveria parágrafos.
• Image / video — único item com legenda. A variante de vídeo aceita YouTube, Vimeo e MP4 enviado. Para um slideshow, use Image slider em Media.
• Columns — divide a linha em 2, 3 ou 4 colunas. Útil para seções de "três pilares", imagens e texto lado a lado.
• Grid — primitiva de layout mais densa (4–12 células, gap configurável). Recorra a esse quando Columns não dá conta.
• Section — um wrapper com sua própria cor de fundo, padding e forma divisora opcional no topo/base. Use para quebrar a página em faixas visualmente distintas.
• Spacer / divider — espaço em branco vertical ou um traço horizontal. Pequeno mas indispensável para dar ar.
• Custom HTML — saída livre para HTML/CSS bruto. Use apenas se nenhum outro bloco fizer o que você precisa. HTML personalizado não é sanitizado na renderização, então não cole nada que você não tenha escrito.

Blocos de igreja

Estes puxam dados ao vivo do resto da sua conta GCM.

• Service times — renderiza a agenda de reuniões do seu módulo Calendário. Sem retrabalho — quando você muda um horário recorrente de culto, o site atualiza.
• Giving button — leva à sua página hospedada /give. Use em qualquer lugar onde queira uma CTA. Para um formulário de doação completo na página, use Native giving form.
• Native giving form — incorpora o formulário de doação diretamente na página. Os visitantes doam sem sair.
• Visitor form embed / Native visitor form — incorpora o cartão de conexão de visitante. Embed carrega num iframe (mais leve); native renderiza inline (melhor UX). Veja Formulário de visitante para quais campos aparecem.
• Event list — próximos eventos do módulo Calendário, contagem e filtro de categoria configuráveis.
• Events calendar — um calendário completo em vista mensal. Mais pesado; use numa página /events dedicada, não na página inicial.
• Contact form — envia submissões para um endereço de e-mail configurado. Para mais controle (campos personalizados, roteamento), use Form block abaixo com um formulário criado no módulo Forms.
• Form block — incorpora qualquer formulário do módulo Forms. Escolha o formulário num dropdown — o bloco faz o resto.
• Staff directory — membros etiquetados com a role staff ou pastor. Inclui nome, função, foto, link de contato opcional.
• Ministry showcase / Groups showcase — cards alimentados pelos seus módulos Ministérios / Grupos.
• Location map — mapa Leaflet com um pin num endereço que você digita. A geocodificação roda no salvar.
• Sermon player — incorpora um único sermão (áudio ou vídeo) com notas em TipTap. Escolha o sermão num dropdown. Para uma lista de sermões, use Sermon feed abaixo.
• Birthday celebrations — aniversários de membros desta semana. A maioria das igrejas usa numa página só para membros.

Blocos de mídia

• Photo gallery — layout em alvenaria ou grade, lightbox ao clique.
• Image slider — carrossel horizontal, autoplay opcional.
• Testimonials — cartões de citação com nome do autor e foto.
• Social links — linha de botões com ícones (Facebook, Instagram, YouTube, X, TikTok, WhatsApp). Puxa as URLs de Settings.
• Newsletter signup — captura de e-mail de campo único. Submissões caem no seu CRM como registros de visitante com a tag newsletter.

Feeds de conteúdo

Estes são blocos de lista/grade alimentados por dados que você publica na aba Content.

• Blog feed — seus posts de blog publicados em grade, magazine ou lista. Contagem por página configurável, filtro de categoria opcional.
• Sermon feed — seus sermões publicados, mesmos três layouts. É o que a maioria das páginas iniciais usa para apresentar a última mensagem.
• FAQ — accordion de pares pergunta/resposta. Configure os itens inline; nenhum tipo de conteúdo separado.
• CTA banner — faixa promocional de largura total com um título e um botão. Mais leve do que um Hero.
• Scripture quote — referência bíblica formatada com o texto do versículo e uma linha de atribuição.
• Stats counter — contadores animados ("450 membros atendidos", "12 ministérios"). Os números podem ser fixos no código ou puxados ao vivo da sua conta.
• Feature grid — cartões com ícone + título + descrição. Útil para seções "no que cremos" ou "o que oferecemos".
• Countdown timer — conta regressiva para uma data de evento.
• Timeline — linha do tempo vertical de marcos.
• Video embed — cole uma URL do YouTube ou Vimeo.

Widgets flutuantes

Estes não estão na paleta de blocos — são configurados em Settings → Floating widgets e aparecem automaticamente em cada página.

• WhatsApp button — bolha flutuante verde que abre o WhatsApp com uma mensagem pré-preenchida. Configure o número de telefone e o texto padrão.
• Language switcher — pequeno alternador EN / ES no canto. Só é útil se o seu site tiver traduções.

Escolhendo um bloco — regras rápidas

• "Preciso de uma grande introdução no topo da página" → Hero banner.
• "Preciso escrever parágrafos" → Rich text.
• "Quero que os visitantes vejam os próximos eventos" → Event list.
• "Quero que doem sem sair da página" → Native giving form.
• "Quero que ouçam a mensagem do domingo passado" → Sermon feed (ou Sermon player para um específico).
• "Quero um formulário de contato que faça só uma coisa" → Contact form. Mais do que isso → Form block.
• "Quero uma lista de posts/artigos" → Blog feed.

Na dúvida, arraste um bloco para a tela e veja o que ele renderiza — cada bloco vem com defaults razoáveis, e o painel da direita mostra quais props importam.

De onde vêm os blocos

Cada bloco é um componente React em src/features/website-builder/blocks/ registrado em puck-config.tsx. Novos blocos são adicionados regularmente. Se algo aqui não aparece na sua paleta, seu build pode estar atrasado — atualize a página ou converse com o suporte.

Veja também: Criando uma página, Identidade visual, Publicação + rascunhos.