Catalogue de blocs

Les blocs sont les unités de construction d'une page. Tu les fais glisser depuis la palette à gauche de l'éditeur Puck sur le canevas, tu règles leurs propriétés à droite, et le site public les rend. Chaque bloc est pensé pour l'église — il tire des données en direct du reste de ton compte GCM quand cela a du sens, donc tu ne dois pas saisir le contenu deux fois.

La palette est regroupée en quatre sections : Layout, Church, Media et Content feeds. Voici le catalogue de travail avec une ligne « quand l'utiliser » pour chacun.

Blocs de mise en page

Ce sont les primitives structurelles — elles se moquent de tes données, elles tiennent juste les choses en place.

• Hero banner — le gros bloc en haut de page avec un titre, un sous-titre, une image ou vidéo de fond et un ou deux boutons CTA. Dépose-le en haut de chaque page de type landing. Si tu ne mets qu'un bloc sur la page, mets celui-là.
• Rich text — un bloc de prose alimenté par TipTap. Titres, listes, liens, citations, images en ligne. Utilise-le pour les pages à propos, profession de foi, mission, partout où tu écrirais des paragraphes.
• Image / video — un seul élément avec une légende. La variante vidéo prend en charge YouTube, Vimeo et le MP4 téléversé. Pour un diaporama, utilise plutôt Image slider dans Media.
• Columns — divise la rangée en 2, 3 ou 4 colonnes. Utile pour les sections « trois piliers », images et texte côte à côte.
• Grid — primitive de mise en page plus dense (4 à 12 cellules, espacement configurable). Recours à cela quand Columns ne suffit pas.
• Section — un conteneur avec sa propre couleur de fond, padding et forme de séparateur optionnelle en haut/en bas. Utilise-le pour découper la page en bandes visuellement distinctes.
• Spacer / divider — espace blanc vertical ou une règle horizontale. Petit mais indispensable pour respirer.
• Custom HTML — échappatoire HTML/CSS brut. À utiliser seulement si aucun autre bloc ne fait ce qu'il te faut. Le HTML personnalisé n'est pas assaini au rendu, donc ne colle rien que tu n'as pas écrit.

Blocs d'église

Ceux-ci tirent des données en direct du reste de ton compte GCM.

• Service times — rend le planning des réunions depuis ton module Calendrier. Pas de re-saisie — quand tu changes un horaire de culte récurrent, le site web se met à jour.
• Giving button — lie vers ta page hébergée /give. Utilise-le partout où tu veux un CTA. Pour un formulaire de don complet sur la page, utilise Native giving form.
• Native giving form — intègre le formulaire de don directement dans la page. Les visiteurs donnent sans partir.
• Visitor form embed / Native visitor form — intègre la carte de connexion visiteur. Embed la charge dans une iframe (plus léger) ; native la rend en ligne (meilleur UX). Voir Formulaire visiteur pour savoir quels champs apparaissent.
• Event list — événements à venir du module Calendrier, nombre et filtre de catégorie configurables.
• Events calendar — un calendrier en vue mensuelle complète. Plus lourd ; utilise-le sur une page dédiée /events, pas sur une page d'accueil.
• Contact form — envoie les soumissions à une adresse e-mail configurée. Pour plus de contrôle (champs personnalisés, routage), utilise Form block ci-dessous avec un formulaire construit dans le module Formulaires.
• Form block — intègre n'importe quel formulaire du module Formulaires. Choisis le formulaire dans un menu déroulant — le bloc fait le reste.
• Staff directory — membres étiquetés avec le rôle staff ou pastor. Inclut nom, rôle, photo, lien de contact optionnel.
• Ministry showcase / Groups showcase — cartes alimentées par tes modules Ministères / Groupes.
• Location map — carte Leaflet avec une épingle à une adresse que tu tapes. Le géocodage s'exécute à la sauvegarde.
• Sermon player — intègre un seul sermon (audio ou vidéo) avec des notes TipTap. Choisis le sermon dans un menu déroulant. Pour une liste de sermons, utilise Sermon feed ci-dessous.
• Birthday celebrations — les anniversaires des membres de cette semaine. La plupart des églises utilisent cela sur une page réservée aux membres.

Blocs média

• Photo gallery — mise en page en mosaïque ou grille, lightbox au clic.
• Image slider — carrousel horizontal, lecture automatique optionnelle.
• Testimonials — cartes de citation avec nom d'auteur et photo.
• Social links — rangée de boutons d'icônes (Facebook, Instagram, YouTube, X, TikTok, WhatsApp). Tire les URLs depuis Settings.
• Newsletter signup — capture e-mail à un seul champ. Les soumissions arrivent dans ton CRM comme enregistrements visiteur étiquetés newsletter.

Flux de contenu

Ce sont des blocs de liste/grille alimentés par les données que tu publies dans l'onglet Content.

• Blog feed — tes articles de blog publiés en mise en page grid, magazine ou list. Nombre par page configurable, filtre de catégorie optionnel.
• Sermon feed — tes sermons publiés, mêmes trois mises en page. C'est ce que la plupart des pages d'accueil utilisent pour mettre en avant le dernier message.
• FAQ — accordéon de paires question/réponse. Configure les éléments en ligne ; pas de type de contenu séparé.
• CTA banner — bande promotionnelle pleine largeur avec un titre et un bouton. Plus léger qu'un Hero.
• Scripture quote — référence biblique formatée avec le texte du verset et une ligne d'attribution.
• Stats counter — compteurs animés (« 450 membres servis », « 12 ministères »). Les comptes peuvent être codés en dur ou tirés en direct de ton compte.
• Feature grid — cartes icône + titre + description. Utile pour les sections « ce que nous croyons » ou « ce que nous offrons ».
• Countdown timer — compte à rebours jusqu'à une date d'événement.
• Timeline — chronologie verticale de jalons.
• Video embed — colle une URL YouTube ou Vimeo.

Widgets flottants

Ceux-ci ne sont pas dans la palette de blocs — ils sont configurés sous Settings → Floating widgets et apparaissent automatiquement sur chaque page.

• WhatsApp button — bulle flottante verte qui ouvre WhatsApp avec un message pré-rempli. Configure le numéro de téléphone et le texte par défaut.
• Language switcher — petit toggle EN / ES dans le coin. Utile seulement si ton site a des traductions.

Choisir un bloc — règles rapides

• « J'ai besoin d'une grande intro en haut de page » → Hero banner.
• « J'ai besoin d'écrire des paragraphes » → Rich text.
• « Je veux que les visiteurs voient les événements à venir » → Event list.
• « Je veux qu'ils donnent sans quitter la page » → Native giving form.
• « Je veux qu'ils entendent le message de dimanche dernier » → Sermon feed (ou Sermon player pour un précis).
• « Je veux un formulaire de contact qui fait juste une chose » → Contact form. Quelque chose de plus → Form block.
• « Je veux une liste d'articles » → Blog feed.

En cas de doute, fais glisser un bloc sur le canevas et regarde ce qu'il rend — chaque bloc est livré avec des valeurs par défaut raisonnables, et le panneau de droite te montre quelles propriétés comptent.

D'où viennent les blocs

Chaque bloc est un composant React dans src/features/website-builder/blocks/ enregistré dans puck-config.tsx. De nouveaux blocs sont ajoutés régulièrement. Si quelque chose ici n'apparaît pas dans ta palette, ton build est peut-être en retard — recharge la page ou contacte le support.

Voir aussi : Créer une page, Image de marque, Publication + brouillons.