Blocs du Page Builder

Le Page Builder propose de nombreux blocs à combiner pour construire votre site.

Blocs de mise en page

Bloc Hero

La première impression compte. Parfait pour l’en-tête de page.

Options :

• Image ou couleur de fond
• Titre et sous-titre
• Boutons d’appel à l’action
• Hauteur et alignement
• Effets d’overlay

Cas d’usage :

• Page d’accueil
• Pages de destination
• Annonces spéciales

Bloc Colonnes

Créez des mises en page multi-colonnes pour du contenu plus complexe.

Options :

• 2, 3 ou 4 colonnes
• Largeurs différentes
• Comportement mobile (empilé ou côte à côte)
• Espacement inter-colonnes

Bloc Onglets

Organisez du contenu en onglets.

Options :

• Onglets illimités
• Titre par onglet
• Contenu différent par onglet

Cas d’usage :

• Horaires par jour
• Différents services
• Catégories de FAQ

Bloc Accordéon

Sections dépliables pour FAQ ou infos détaillées.

Options :

• Plusieurs éléments d’accordéon
• Titre et contenu
• Ouvert/fermé par défaut
• Ouverture unique ou multiple

Cas d’usage :

• Page FAQ
• Informations détaillées
• Structurer des textes longs

Blocs texte

Bloc Texte

Zone de texte classique avec mise en forme riche.

Options :

• Éditeur riche
• Titres (H2–H4)
• Gras, italique, souligné
• Listes à puces/numérotées
• Liens
• Alignement du texte

Bloc Callout

Encarts mis en avant pour les infos importantes.

Options :

• Types (info, warning, success)
• Icône
• Couleur de fond
• Titre et texte

Cas d’usage :

• Annonces importantes
• Notes d’information
• Mise en avant des horaires de prière

Blocs média

Bloc Image

Image seule avec légende optionnelle.

Options :

• Image depuis la médiathèque
• Légende
• Texte alternatif (accessibilité)
• Lien
• Taille et alignement

Bloc Texte & Image

Bloc combiné texte + image côte à côte.

Options :

• Image à gauche ou droite
• Ratio texte/image
• Couleur de fond
• Ajouter un bouton

Cas d’usage :

• Section À propos
• Présentation de services
• Membre de l’équipe

Blocs interactifs

Bloc Bouton

Boutons d’appel à l’action.

Options :

• Texte du bouton
• Lien (interne ou externe)
• Style (primary, secondary, outline)
• Taille
• Alignement

Bloc Newsletter

Formulaire d’inscription à la newsletter.

Options :

• Titre et description
• Champ e-mail
• Texte de confirmation
• Intégration avec un service e-mail

Bloc Liens sociaux

Liens vers vos réseaux sociaux.

Options :

• Plateformes prises en charge :
  • Facebook
  • Instagram
  • YouTube
  • Twitter/X
  • WhatsApp
  • Telegram
• Style et taille des icônes
• Alignement

Blocs dynamiques

Ces blocs affichent du contenu mis à jour automatiquement.

Bloc Liste d’actualités

Affichage automatique de vos actualités.

Options :

• Nombre d’articles (1–10)
• Filtre par catégorie
• Style d’affichage (cards, list)
• Lien « View all »

Comportement :

• Affiche toujours les dernières actualités
• Mise à jour automatique
• Aucune maintenance manuelle

Bloc Calendrier des événements

Vue d’ensemble des prochains événements.

Options :

• Nombre d’événements
• Vue calendrier ou liste
• Filtre par catégorie
• Plage de temps

Comportement :

• Affiche les événements à venir
• Mise à jour automatique
• Les événements passés sont masqués

Blocs spéciaux

Bloc Cartes

Cartes d’information pour structurer vos contenus.

Options :

• Nombre de cartes
• Icône ou image
• Titre et texte
• Bouton/lien
• Effets au survol

Cas d’usage :

• Présenter des services
• Lister des fonctionnalités
• Montrer l’équipe

Bloc Témoignages

Citations et avis.

Options :

• Plusieurs témoignages
• Nom et rôle
• Photo de profil
• Texte de la citation
• Mode carrousel ou grille

Paramètres des blocs

Paramètres généraux

Chaque bloc partage des réglages communs :

• Spacing top/bottom : espacement vertical vers le bloc suivant
• Background : couleur ou image
• Visibility : masquer sur certains appareils
• CSS class : pour la personnalisation avancée

Comportement responsive

Tous les blocs sont optimisés pour les différents écrans :

• Desktop : mise en page complète
• Tablet : mise en page adaptée
• Mobile : vue mobile optimisée

Bonnes pratiques

Structure

• Commencez par un bloc Hero
• Alternez les types de blocs
• Utilisez les Callouts pour les infos importantes

Cohérence

• Utilisez des couleurs cohérentes
• Gardez des espacements homogènes
• Utilisez les mêmes styles de boutons

Performance

• Optimisez les images avant import
• Évitez trop de blocs sur une même page
• Utilisez le lazy loading pour les images

Prochaines étapes