Catálogo de bloques

Los bloques son las unidades de construcción de una página. Los arrastras desde la paleta de la izquierda del editor Puck hacia el lienzo, ajustas sus propiedades a la derecha y el sitio público los renderiza. Cada bloque está pensado para iglesias — toma datos en vivo del resto de tu cuenta de GCM cuando tiene sentido, así no duplicas contenido.

La paleta está agrupada en cuatro secciones: Layout, Church, Media y Content feeds. Abajo está el catálogo de trabajo con una línea de "cuándo usarlo" para cada bloque.

Bloques de layout

Son las primitivas estructurales — no les importan tus datos, solo sostienen las cosas en su lugar.

• Hero banner — el bloque grande superior con un titular, subtítulo, imagen o video de fondo y uno o dos botones CTA. Suéltalo en la parte superior de cada página tipo landing. Si solo pones un bloque en la página, que sea este.
• Rich text — un bloque de prosa con TipTap. Encabezados, listas, enlaces, citas, imágenes en línea. Úsalo para páginas de nosotros, declaración de fe, misión, donde quiera que escribas párrafos.
• Image / video — un solo recurso con un pie de foto. La variante de video soporta YouTube, Vimeo y MP4 subido. Para una presentación, usa Image slider en Media.
• Columns — divide la fila en 2, 3 o 4 columnas. Útil para secciones de "tres pilares" o imágenes y texto en paralelo.
• Grid — primitiva de diseño más densa (4 a 12 celdas, separación configurable). Recurre a esto cuando Columns no alcanza.
• Section — un contenedor con su propio color de fondo, padding y forma de divisor opcional arriba/abajo. Úsalo para partir la página en bandas visualmente distintas.
• Spacer / divider — espacio en blanco vertical o una regla horizontal. Pequeño pero indispensable para dar aire.
• Custom HTML — escotilla de escape con HTML/CSS crudo. Úsalo solo si ningún otro bloque hace lo que necesitas. El HTML personalizado no se sanitiza al renderizar, así que no pegues nada que no hayas escrito.

Bloques de iglesia

Estos toman datos en vivo del resto de tu cuenta de GCM.

• Service times — renderiza el calendario de reuniones del módulo de Calendario. Sin recaptura — cuando cambias un horario de servicio recurrente, el sitio web se actualiza.
• Giving button — enlaza a tu página alojada /give. Úsalo donde quieras un CTA. Para un formulario de donación completo en la página, usa Native giving form.
• Native giving form — incrusta el formulario de donación directamente en la página. Los visitantes donan sin salir.
• Visitor form embed / Native visitor form — incrusta la tarjeta de conexión del visitante. Embed la carga en un iframe (más ligero); native la renderiza en línea (mejor UX). Consulta Formulario de visitante para ver qué campos aparecen.
• Event list — próximos eventos del módulo de Calendario, cantidad y filtro de categoría configurables.
• Events calendar — un calendario completo en vista mensual. Más pesado; úsalo en una página dedicada /events, no en una página de inicio.
• Contact form — envía las solicitudes a una dirección de correo configurada. Para más control (campos personalizados, enrutamiento), usa Form block abajo con un formulario armado en el módulo de Formularios.
• Form block — incrusta cualquier formulario del módulo de Formularios. Elige el formulario desde un dropdown — el bloque hace el resto.
• Staff directory — miembros etiquetados con rol staff o pastor. Incluye nombre, rol, foto y enlace de contacto opcional.
• Ministry showcase / Groups showcase — tarjetas alimentadas por tus módulos de Ministerios / Grupos.
• Location map — mapa Leaflet con un pin en la dirección que escribes. La geocodificación corre al guardar.
• Sermon player — incrusta un solo sermón (audio o video) con notas en TipTap. Elige el sermón desde un dropdown. Para una lista de sermones, usa Sermon feed abajo.
• Birthday celebrations — los cumpleaños de miembros de esta semana. La mayoría de iglesias usa esto en una página solo para miembros.

Bloques de media

• Photo gallery — diseño en mosaico o cuadrícula, lightbox al hacer clic.
• Image slider — carrusel horizontal, autoplay opcional.
• Testimonials — tarjetas de cita con nombre del autor y foto.
• Social links — fila de botones de iconos (Facebook, Instagram, YouTube, X, TikTok, WhatsApp). Toma las URLs de Settings.
• Newsletter signup — captura de correo con un solo campo. Las solicitudes llegan a tu CRM como registros de visitante etiquetados newsletter.

Feeds de contenido

Son bloques de lista/cuadrícula alimentados por los datos que publicas en la pestaña Content.

• Blog feed — tus entradas del blog publicadas en diseño grid, magazine o list. Cantidad por página configurable, filtro opcional de categoría.
• Sermon feed — tus sermones publicados, mismos tres diseños. Esto es lo que la mayoría de páginas de inicio usa para destacar el último mensaje.
• FAQ — acordeón de pares pregunta/respuesta. Configura los elementos en línea; sin tipo de contenido aparte.
• CTA banner — banda promocional de ancho completo con un titular y un botón. Más ligera que un Hero.
• Scripture quote — referencia bíblica formateada con el texto del versículo y una línea de atribución.
• Stats counter — contadores animados ("450 miembros atendidos", "12 ministerios"). Los conteos pueden ser fijos o tomarse en vivo de tu cuenta.
• Feature grid — tarjetas de icono + título + descripción. Útil para secciones de "qué creemos" o "qué ofrecemos".
• Countdown timer — cuenta regresiva hasta una fecha de evento.
• Timeline — línea de tiempo vertical de hitos.
• Video embed — pega una URL de YouTube o Vimeo.

Widgets flotantes

Estos no están en la paleta de bloques — se configuran en Settings → Floating widgets y aparecen en cada página automáticamente.

• WhatsApp button — burbuja flotante verde que abre WhatsApp con un mensaje precargado. Configura el número de teléfono y el texto por defecto.
• Language switcher — pequeño toggle EN / ES en la esquina. Solo es útil si tu sitio tiene traducciones.

Elegir un bloque — reglas rápidas

• "Necesito una introducción grande arriba de la página" → Hero banner.
• "Necesito escribir párrafos" → Rich text.
• "Quiero que los visitantes vean próximos eventos" → Event list.
• "Quiero que donen sin salir de la página" → Native giving form.
• "Quiero que escuchen el mensaje del domingo pasado" → Sermon feed (o Sermon player para uno específico).
• "Quiero un formulario de contacto que haga solo una cosa" → Contact form. Algo más → Form block.
• "Quiero una lista de entradas/artículos" → Blog feed.

Si tienes dudas, arrastra un bloque al lienzo y mira qué renderiza — cada bloque viene con valores por defecto sensatos y el panel derecho te muestra qué propiedades importan.

De dónde vienen los bloques

Cada bloque es un componente de React en src/features/website-builder/blocks/ registrado en puck-config.tsx. Se agregan bloques nuevos con regularidad. Si algo de aquí no aparece en tu paleta, tu build puede estar atrasado — recarga la página o consulta con soporte.

Consulta también: Crear una página, Marca, Publicación + borradores.