Blocs de texte structurés
Sur cette page sont documentés les blocs de textes structurés mais il existe aussi des blocs de texte essentiels (titres, texte, listes, etc.). Ces blocs sont documentés sur la page blocs de textes essentiels.
Bloc liste de définitions
Le bloc liste de définition permet d'afficher des paires terme/description, sous forme de glossaire. Il est adapté pour présenter des définitions de vocabulaire, des questions-réponses ou des paramètres accompagnés de leur explication. Chaque terme saisi est automatiquement associé à sa description.
- privilégier des termes courts et explicites, pour que la liste reste facile à parcourir visuellement.
- regrouper les termes proches dans un même bloc plutôt que de multiplier les listes de définition sur une page.
- ne pas utiliser une liste de définition pour une simple liste à puces : elle est réservée aux paires terme/description.
- 1. Onglets contenu et style
-
L'onglet contenu permet d'éditer la liste de définitions. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet style permet de modifier l'apparence de la liste (couleur du terme à définir).
- 2. Définition
-
Contient la définition de chaque terme sous forme de blocs de contenus.
- 3. Ajouter une définition
-
Ces deux boutons avec icône "plus" permettent d'ajouter une définition à la liste
Pour modifier une définition, cliquez sur une des lignes du tableau de définitions. L'illustration suivante montre l'interface pour le terme "CMS".
- 1. Fil d'ariane
-
Grâce à ce fil d'ariane, nous comprenons que nous sommes en train de modifier une définition qui est à l'intérieur d'une liste de définition. Un clic sur le lien "Liste de définitions" permet de revenir sur le tableau présenté juste avant (tableau listant de tous les termes).
- 2. Ajouter un bloc pour la définition
-
Ces deux boutons avec icône "plus" permettent d'ajouter des blocs de contenus pour définir le terme. Les blocs disponibles dans ce contexte sont les blocs : texte, liste, citation, ligne et bouton (lien).
Rendu de l'exemple sur le site (style par défaut) :
- Responsive
-
Site web capable de s'adapter automatiquement à la taille de l'écran (ordinateur, tablette, mobile)
- CMS
-
Système de gestion de contenu. Permet de créer et modifier les pages d'un site sans écrire de code.
- RGAA
-
Référentiel Général d'Amélioration de l'Accessibilité. Ensemble de règles françaises visant à rendre les sites web accessibles à tous.
Bloc citation
Le bloc Citation permet de mettre en valeur un extrait de texte attribué à une personne ou une source. Il est adapté pour illustrer un propos, appuyer une idée par une référence extérieure ou mettre en avant un témoignage. La citation et son auteur sont saisis séparément, l'auteur étant affiché distinctement du texte cité.
Ce bloc est simple à l'usage car il n'a pas d'options particulières. Une fois le bloc ajouté, vous pouvez renseigner directement la citation ainsi que l'auteur. Le rendu du bloc dans l'espace d'administration est très proche du rendu réel sur le site.
Rendu de l'exemple sur le site :
La simplicité est la sophistication suprême.
Bloc tableau
Le bloc Tableau permet d'afficher des données organisées en lignes et colonnes. Il est adapté pour présenter des informations comparatives, des listes de données structurées ou des synthèses de résultats. La première ligne saisie sert automatiquement d'en-tête. Une légende optionnelle peut être ajoutée sous le tableau.
- limiter le nombre de colonnes pour préserver la lisibilité sur les petits écrans.
- ajouter une légende si le tableau a besoin d'être contextualisé.
- ne pas utiliser un tableau pour faire de la mise en page : il est réservé aux données structurées.
- 1. Onglets contenu et style
-
L'onglet contenu permet d'éditer le contenu du tableau. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet style permet de modifier l'apparence du tableau (couleur du texte et des bordures).
- 2. Ajouter une colonne
-
Ce bouton permet d'ajouter une colonne au tableau.
- 3. Ajouter une ligne
-
Ce bouton permet d'ajouter une ligne au tableau.
- 4. Légende
-
Ajoute une légende en dessous du tableau.
Rendu de l'exemple sur le site (style par défaut) :
| Modèle | Usage |
|---|---|
| Page basique | Page libre avec contenu personnalisé |
| Page contact | Page avec formulaire de contact intégré |
| Groupement de pages basiques | Regroupe plusieurs pages basiques |
| Groupement d'articles | Publie des actualités ou articles de blog |
| Groupement d'événements | Présente des événements avec leurs dates |
Bloc accordéon
Le bloc Accordéon permet d'organiser du contenu en sections pliables, idéal pour structurer de longs textes ou regrouper des questions-réponses. Chaque section dispose d'un titre et d'un contenu (textes, listes, titres, etc.).
- idéal pour les FAQ ou les guides pas-à-pas.
- ne pas utiliser pour masquer du contenu principal : les sections pliables servent à regrouper des informations complémentaires, pas à réduire artificiellement la longueur d'une page.
- 1. Onglets contenu et style
-
L'onglet contenu permet d'éditer le contenu de l'accordéon. C'est cet onglet qui est sélectionné dans l'image d'exemple. L'onglet style permet de modifier l'apparence et le comportement de l'accordéon.
- 2. Ajouter
-
Ces boutons permettent d'ajouter un nouvelle ligne à l'accordéon.
Voici d'abord un accordéon dans sa configuration par défaut, toutes les sections sont fermées et une seule peut s'ouvrir à la fois :
Cliquez sur le bouton Enregistrer en haut à droite de l'interface, ou utilisez le raccourci clavier Ctrl+S.
Ouvrez la page dans l'espace d'administration, cliquez sur son statut actuel (Brouillon) et choisissez l'option Publier.
Ouvrez l'onglet Paramètres de la page et désactivez l'option de présence dans le menu, puis enregistrez.
Le même accordéon avec deux options activées : première section ouverte par défaut et Conserver les sections ouvertes (plusieurs sections peuvent rester ouvertes simultanément) :
Cliquez sur le bouton Enregistrer en haut à droite de l'interface, ou utilisez le raccourci clavier Ctrl+S.
Ouvrez la page dans l'espace d'administration, cliquez sur son statut actuel (Brouillon) et choisissez l'option Publier.
Ouvrez l'onglet Paramètres de la page et désactivez l'option de présence dans le menu, puis enregistrez.
Options
- Ouvert par défaut
-
Réglage disponible pour chaque section individuellement. Quand activé, la section est dépliée dès le chargement de la page. Utile pour mettre en avant la première section ou une information prioritaire.
- Conserver les sections ouvertes
-
Par défaut, ouvrir une section ferme automatiquement les autres. En activant cette option, plusieurs sections peuvent rester ouvertes simultanément. Pratique quand l'utilisateur a besoin de consulter plusieurs sections en parallèle.
- Type d'affichage des en-têtes
-
Trois niveaux disponibles pour le rendu visuel des titres de sections :
- Titre de niveau 4 (h4) : rendu plus imposant, à préférer quand l'accordéon doit être mis en évidence sur la page.
- Titre de niveau 5 (h5) : valeur par défaut, équilibrée pour la plupart des usages.
- Paragraphe (p) : style texte simple, adapté aux titres longs ou aux accordéons plus discrets.
Styles partagés entre les blocs de texte
Les blocs Texte, Liste et Tableau partagent un même onglet de style avec trois réglages communs. Le bloc Tableau dispose en outre d'une option de couleur de bordure.
- Alignement
-
Quatre options : gauche (par défaut), centré, droite, justifié. L'option justifié est à utiliser avec prudence : elle aligne le texte sur les deux marges en espaçant les mots, ce qui peut nuire à la lisibilité sur les colonnes étroites.
- Taille
-
Deux variantes disponibles en plus de la taille normale : Grande (pour les textes d'introduction ou d'accroche) et Petite (pour les notes ou légendes). Sans sélection, la taille normale est appliquée.
- Couleur du texte
-
Permet de choisir une couleur parmi la palette du site. Quand une couleur de fond est définie sur la rangée ou la colonne, veillez à conserver un contraste suffisant pour la lisibilité.
- Couleur de bordure (tableau uniquement)
-
Le bloc Tableau dispose d'une option supplémentaire dans son onglet Style : la couleur de bordure. Elle remplace la couleur neutre appliquée par défaut aux cellules et à la bordure extérieure du tableau.