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

Bibliothèque de sections présentant les modèles disponibles

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

Inspecteur de section à côté de l'aperçu de la page

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

Bibliothèque de blocs regroupés par contenu et fonctionnalités 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 blocs Team standings, Teams schedule et Player statistics sont décrits dans Équipes, bâtir les équipes et feuilles de jeu), 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.

Pour les réponses soumises, ajoutez Résultats du formulaire et suivez Partager les résultats d’un formulaire sur un site ou un microsite.

Créer et modifier un tableau natif

Utilisez un bloc Tableau pour une comparaison, un horaire ou une liste de prix. La première ligne fournit les en-têtes des colonnes; les autres lignes contiennent les données. Modifiez les cellules dans la grille et enregistrez le bloc. Sur un site bilingue, modifiez et vérifiez séparément les valeurs anglaises et françaises. Utilisez les aperçus ordinateur, tablette et mobile pour vérifier les longs en-têtes et les lignes denses.

Vous pouvez aussi demander à l’assistant du site Web de créer un tableau natif, de modifier des cellules précises ou de convertir un tableau simple intégré à un bloc de texte. Si vous voulez que le tableau ait sa propre section, demandez à l’assistant de le déplacer dans une section distincte; il peut conserver le contenu qui l’entoure. Révisez les modifications proposées avant de les approuver. La conversion accepte un seul tableau simple; les cellules fusionnées, les liens ou la mise en forme dans les cellules, les tableaux imbriqués et les tableaux multiples exigent une modification manuelle pour éviter toute perte de contenu. Les tableaux sources en anglais et en français doivent déjà exister, et les cellules doivent contenir du texte brut.

Après l’enregistrement d’une modification de contenu approuvée sur la page actuelle, l’éditeur ouvert actualise les sections concernées et l’inspecteur sans recharger la page. Les modifications non enregistrées dans les autres sections sont conservées. Si la section concernée contient des modifications non enregistrées, enregistrez-les ou abandonnez-les, puis actualisez la page pour afficher le résultat enregistré par l’assistant. Une nouvelle page, les paramètres de page et les paramètres partagés du site peuvent encore entraîner une navigation ou un rechargement. Un éditeur ouvert avant une mise à jour de l’application doit être rechargé une fois pour obtenir la nouvelle version.

L’enregistrement et la révision de qualité sont distincts : le reçu confirme l’enregistrement; un avertissement de vérification exige encore une révision. Ne répétez pas une conversion uniquement parce que son résultat enregistré présente un avertissement de qualité.

Modifier une disposition sans réécrire son contenu

Demandez à l’assistant du site Web de modifier la disposition d’une section native ou de réorganiser ses blocs existants. Par exemple : « Place la première section sur une seule colonne, avec le contenu de gauche au-dessus du contenu de droite. Conserve la mise en forme et les liens. » Vous pouvez aussi lui demander de changer l’ordre des blocs ou d’ajuster leurs largeurs et leur alignement pris en charge.

L’assistant conserve les blocs existants, le contenu anglais/français, les titres, la mise en forme, les liens, les photos, les tableaux et les connexions de formulaire prises en charge. Le changement de disposition préserve la position, la visibilité et le style de la section. Révisez l’ordre proposé et les aperçus ordinateur, tablette et mobile avant d’approuver. Les sections partagées et les blocs dynamiques ou personnalisés complexes peuvent encore exiger une modification manuelle; l’assistant doit expliquer toute limite.

Examiner une modification antérieure de la page

Demandez à l’assistant de lister les versions enregistrées ou de comparer deux versions de cette page. Il peut identifier les changements enregistrés dans l’ordre des sections, les dispositions, le texte bilingue et les tableaux, ainsi que les changements de référence d’image ou de lien. C’est utile pour comprendre une section en double ou une photo inattendue.

Les outils d’historique sont en lecture seule et portent sur le contenu enregistré. Ils n’incluent pas les modifications non enregistrées, ne restaurent aucune version et ne vérifient pas le sujet d’une photo. Un contenu volumineux ou non pris en charge peut produire une comparaison partielle. Toute réparation est une proposition distincte fondée sur la page actuelle et soumise à son approbation habituelle. Utilisez le contrôle Historique de la page pour consulter ou restaurer manuellement une version enregistrée.

Disposer des blocs dans un conteneur

Bibliothèque de conteneurs avec des structures de colonnes adaptatives

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

insérez un bloc dans une zone vide;
ajoutez les autres blocs nécessaires à la rangée;
choisissez les largeurs prises en charge, comme un quart, un tiers, une demie, deux tiers, trois quarts ou la pleine largeur;
ajustez l'alignement lorsque le bloc le permet;
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.

Ajuster les réglages avec l’assistant

Demandez à l’assistant du site Web de modifier le dégradé, les bordures ou l’affichage des titres d’une section en conservant son contenu. Par exemple : « Ajoute un dégradé bleu pâle et une bordure bleue en bas de cette section. Cache son sous-titre sans supprimer le texte. » Les contrôles offerts dépendent du modèle choisi; certaines sections éditoriales permettent aussi des titres en pleine largeur.

L’assistant peut identifier les sections synchronisées et lire la date du dernier changement de visibilité enregistré. Une section synchronisée ou protégée peut exiger l’éditeur natif. Un changement enregistré indique un événement, pas l’intention d’une personne.

Vous pouvez aussi lui demander d’attribuer une ancre à une section qui n’en a pas, comme produits-et-prix, pour créer une destination telle que #produits-et-prix. Les ancres doivent être uniques dans la page. L’assistant conserve les ancres existantes, car des liens et styles peuvent en dépendre; utilisez l’éditeur natif pour les renommer.

Révisez et approuvez les réglages proposés avant l’enregistrement. Les réglages inchangés, le texte anglais/français, les blocs, les images et les liens sont conservés. Ces modifications ne publient pas une page brouillon.

Afficher ou cacher une section

Sélectionnez une section et utilisez Afficher au public ou Cacher du public. Une section cachée demeure dans l’éditeur avec l’indication Cachée du public, mais les visiteurs ne la voient pas.

Vous pouvez aussi demander à l’assistant du site Web d’afficher ou de cacher une section précise, par exemple : « Rends la section Produits et prix visible au public. » L’assistant peut lire sa visibilité actuelle et proposer ce changement en conservant le contenu, les blocs, le style et la position. Révisez et approuvez la proposition avant son enregistrement. Les sections protégées ou synchronisées peuvent encore exiger une modification manuelle.

La visibilité d’une section et la publication de la page sont distinctes. Afficher une section sur une page brouillon laisse cette page non publiée. Sur une page déjà publiée, enregistrer la visibilité modifie ce que les visiteurs voient. Si vous demandez pourquoi une section était cachée, l’assistant peut consulter l’historique enregistré pour identifier un changement et son auteur; cela ne prouve pas l’intention de l’auteur.

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

Aperçu mobile de la page actuelle

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

Suite : Configurer un site Web et ouvrir le créateur