Ajouter des sections, des blocs et des mises en page

Une page de site Web est composée de sections. Choisissez un modèle de section prêt à utiliser pour obtenir une conception complète, ajoutez un bloc Activity Messenger pour afficher du contenu de la plateforme ou utilisez un conteneur lorsque plusieurs blocs doivent partager une même rangée.

# Ouvrir la bibliothèque de sections

Dans le créateur de site Web, sélectionnez Ajouter une section sur une page vide ou le bouton plus avant ou après une section existante. La bibliothèque comprend quatre onglets :

• Modèles pour des sections Web complètes et modifiables;
• Blocs pour le contenu et les fonctions d'Activity Messenger;
• Conteneurs pour disposer un ou plusieurs blocs dans une mise en page personnalisée;
• Mes sections pour les conceptions enregistrées par votre organisation.

Vous pouvez rouvrir la bibliothèque chaque fois que la page nécessite une nouvelle section.

# Choisir un modèle de section

Un modèle réunit la mise en page, les champs de contenu, les éléments répétés et les styles adaptatifs. Commencez par la fonction du contenu plutôt que par son apparence actuelle.

Les groupes de modèles comprennent notamment :

• Bannière principale pour le message d'ouverture, l'image et l'action principale;
• À propos pour les récits, les valeurs, l'équipe, les médias ou les listes de vérification;
• Fonctionnalités pour les avantages, les statistiques, les liens, les avis, les horaires, les appels à l'action, les logos et d'autres contenus promotionnels;
• Tarification pour les forfaits et les caractéristiques incluses;
• FAQ pour les questions et réponses;
• Séparateur pour créer une séparation visuelle;
• Articles de blogue pour une grille, une liste ou un article vedette;
• Commerce électronique pour présenter des produits ou des réservations;
• Mises en page pour des zones de contenu déjà structurées.

Sélectionnez une carte pour l'insérer. La bibliothèque crée la section avec du contenu de départ afin que sa structure soit immédiatement visible.

Modifier un modèle

Cliquez sur la nouvelle section dans l'aperçu. Son inspecteur peut comprendre :

• les titres, le texte, les libellés et les boutons;
• les images, les vidéos, les textes de remplacement, les légendes et les superpositions;
• les éléments répétés comme les avantages, les personnes, les forfaits, les FAQ ou les entrées d'horaire;
• les couleurs d'arrière-plan, de texte, d'accent et de bouton;
• l'espacement, la largeur du contenu, les coins, les bordures et les styles de carte;
• les effets d'apparition ou de survol pris en charge.

Cliquez sur un texte, une image ou un élément répété visible dans l'aperçu pour ouvrir le champ le plus précis. Utilisez la flèche vers le haut de l'inspecteur pour revenir à l'élément ou à la section qui le contient.

Sélectionnez Enregistrer la section lorsque vous avez terminé. Le menu Modifications non enregistrées de la barre supérieure confirme si la section doit encore être enregistrée.

# Ajouter un bloc Activity Messenger

Utilisez un bloc lorsque la page doit afficher ou ouvrir du contenu géré ailleurs dans Activity Messenger. Selon les modules de l'organisation, les blocs peuvent comprendre :

• les formulaires, les documents, les cartes, les lieux et les réponses de formulaire;
• les calendriers, les inscriptions, les réservations, les produits, les forfaits et les accès au compte;
• les répertoires de membres, les équipes, les présences ou les accès du personnel et des clients;
• le texte, les cartes visuelles, les images, les vidéos, l'audio, les diaporamas, les tableaux, les onglets, les liens, la recherche ou les alertes;
• le contenu HTML intégré ou personnalisé.

La bibliothèque affiche seulement les choix disponibles pour l'organisation et le contexte actuel. Si une autre organisation possède un bloc que vous ne voyez pas, comparez les modules activés et les permissions. Ne remplacez pas une fonction métier manquante par du HTML personnalisé avant d'avoir vérifié le module et le contenu source.

Un bloc autonome convient lorsqu'il doit occuper sa propre section. Sélectionnez-le, configurez sa source et son affichage, puis utilisez Enregistrer le bloc.

# Disposer des blocs dans un conteneur

Choisissez un conteneur lorsque plusieurs blocs doivent apparaître dans la même section. Après l'ajout du conteneur :

1. insérez un bloc dans une zone vide;
2. ajoutez les autres blocs nécessaires à la rangée;
3. choisissez les largeurs prises en charge, comme un quart, un tiers, une demie, deux tiers, trois quarts ou la pleine largeur;
4. ajustez l'alignement lorsque le bloc le permet;
5. enregistrez chaque bloc modifié et la section.

Certains blocs complexes doivent rester en pleine largeur. Si l'éditeur agrandit un bloc ou empêche une combinaison non prise en charge, conservez cette structure et placez le contenu voisin dans une autre rangée.

Les largeurs fractionnelles décrivent la mise en page de bureau. Sur un écran plus petit, les blocs peuvent s'empiler pour rester lisibles.

# Réorganiser ou réutiliser une section

Ouvrez les actions d'une section pour :

• la déplacer en faisant glisser la poignée;
• la dupliquer sur la même page;
• la dupliquer vers une autre page;
• la masquer sur la page publique;
• l'enregistrer dans Mes sections;
• la détacher d'une section enregistrée synchronisée;
• la supprimer.

Le masquage est pratique pour du contenu saisonnier : la section demeure visible pour les éditeurs avec une indication de masquage, mais elle est omise de la page publique. La suppression l'enlève plutôt de la page.

Utilisez Mes sections lorsque la même conception doit être insérée ailleurs. Une section enregistrée peut être une copie indépendante ou une section synchronisée; consultez le guide sur les sections réutilisables avant de choisir.

# Vérifier le résultat adaptatif

Prévisualisez la page aux trois formats de la barre supérieure :

• ordinateur;
• tablette à 768 × 1024;
• mobile à 390 × 844.

Utilisez du contenu réaliste pendant la révision. Vérifiez en particulier :

• les longs titres anglais et français;
• le retour à la ligne et l'espacement des boutons;
• l'empilement des colonnes et des blocs de conteneur;
• le recadrage des images et les textes de remplacement;
• les tableaux et les contenus denses afin d'éviter le défilement horizontal;
• l'ordre de lecture du contenu sur mobile.

L'action Aperçu séparée ouvre la page sans les outils d'édition. Un éditeur connecté peut l'utiliser pour une page brouillon, mais la page n'est pas publique avant sa publication.

# Exemple

Pour une page de programme, commencez par un modèle de bannière principale, ajoutez une grille de caractéristiques, utilisez un conteneur à deux blocs pour l'horaire et le lieu, puis terminez avec un bloc de formulaire. Sur mobile, confirmez que l'horaire et le lieu s'empilent dans un ordre logique et que l'action du formulaire reste facile à trouver.

# Articles connexes

• Modifier, prévisualiser, enregistrer et publier un site Web
• Concevoir l'en-tête, le pied de page et les styles généraux
• Réutiliser et synchroniser des sections
• Ajouter des formulaires, des inscriptions, des réservations et des produits