Aller au contenu

Blocs de texte essentiels

Prérequis

Si vous ne savez pas encore comment ajouter un bloc de contenu sur votre site, référez vous à la page Éditer une page basique avant d'aller plus loin.

Les blocs de contenus textes permettent de rédiger, structurer et mettre en forme le contenu de vos pages. Ils constituent la base de toute page : titres pour hiérarchiser, textes pour informer, listes pour organiser.

Sur cette page sont documentés les blocs de textes essentiels mais il existe aussi des blocs de texte structurés (tableaux, définitions, etc.). Ces blocs sont documentés sur la page blocs de textes structurés.

Liste des blocs dédiés aux contenus textuels essentiels : titre, texte, bloc de texte encadré et liste.

Bloc titre

Le bloc Titre permet de structurer le contenu d'une page à l'aide de titres hiérarchisés (H1 à H6). Il organise l'information, améliore la lisibilité et contribue au bon référencement (SEO) de la page. Utilisez-le pour introduire une nouvelle section, structurer un contenu long ou mettre en valeur une partie importante. Les options de style permettent de modifier l'alignement et la couleur du titre.

Les titres de section de cette page (Titre, Texte, Texte encadré…) sont eux-mêmes des exemples de blocs Titre au niveau H2.

Exemple

Titre de niveau H4 (exemple de sous-section)

Titre de niveau H5 (exemple de sous-sous-section)
Blocs de titre de cet exemple, vu dans l'espace d'administration
  • le niveau H1 correspond au titre principal de la page : n'utilisez-en qu'un seul par page.
  • le niveau H2 est utilisé pour les sections principales, H3 à H6 pour les sous-sections.
  • respecter une hiérarchie logique : ne pas passer de H2 à H4 sans passer par H3.
  • privilégier l'alignement à gauche pour une meilleure lisibilité.

Options du bloc titre

Chaque titre génère automatiquement une ancre à partir de son texte (caractères spéciaux et espaces normalisés). Cette ancre permet de créer des liens directs vers une section de la page, en ajoutant #nom-de-la-section à l'URL. Si deux titres ont le même texte sur une même page, leurs ancres peuvent entrer en conflit : préférez des formulations distinctes.

Bloc texte

Le bloc Texte permet d'ajouter du contenu rédactionnel à une page : paragraphes, descriptions, informations détaillées. C'est le bloc principal pour rédiger le contenu d'un site. La barre d'outils du bloc permet de mettre en forme le texte (gras, italique, liens). Les options de style permettent de modifier l'alignement, la taille (normale, grande ou petite) et la couleur du texte.

Pour accéder aux options avancées du bloc texte, cliquez dans le bloc pour qu'il affiche son menu puis cliquez sur l'icône "stylo".

Identification de l'emplacement de l'icône "stylo" du bloc texte
Exemple

Ci-dessous, le même contenu affiché en taille grande (idéale pour une introduction) puis en taille normale.

Essentiel CMS vous permet de créer et de gérer votre site en toute autonomie, sans nécessiter de compétences techniques particulières.

Essentiel CMS vous permet de créer et de gérer votre site en toute autonomie, sans nécessiter de compétences techniques particulières.

Modification de la taille du texte d'un bloc texte sur l'interface d'administration
1. Taille

Dans cet exemple, c'est grâce à cette option que nous avons rendu le premier texte plus grand que le second.

  • privilégier l'alignement à gauche (option par défaut).
  • éviter le texte justifié : il peut créer des espaces irréguliers entre les mots et rendre la lecture difficile.
  • utiliser la taille grande pour un texte d'introduction, afin de lui donner plus de poids visuel.

Bloc de texte encadré

Le bloc Texte encadré permet de mettre en avant un contenu dans un encadré distinct du reste de la page. Il crée une séparation visuelle qui attire l'attention. Quelques recommandations :

  • utilisez le pour mettre en avant une information importante, une note d'avertissement ou un encadré explicatif.
  • limiter l'usage : trop d'encadrés sur une même page diminue leur impact et alourdit la lecture.
  • si vous avez l'impression d'en avoir besoin partout, c'est souvent le signe qu'il faut retravailler la hiérarchie des titres plutôt qu'ajouter des encadrés.
Exemple

Enregistrement non automatique

Vos modifications ne sont pas sauvegardées automatiquement. Pensez à cliquer sur le bouton Enregistrer en haut à droite, ou utilisez le raccourci clavier Ctrl+S après chaque modification importante.

Édition d'un bloc de texte encadré dans l'espace d'administration, annoté
1. Titre du bloc

Champ optionnel, si renseigné il sera ajouté dans son propre espace en début de bloc.

2. Onglet de style

Les options de style permettent de choisir une couleur de fond et de personnaliser la bordure.

3. Contenu principal

Peut contenir un ou plusieurs blocs (blocs texte, liste, citation, titre, ligne de séparation, bouton).

Options du bloc de texte encadré

Le bloc Texte encadré dispose de deux onglets. L'onglet Contenu regroupe le titre, le corps et la note de bas de bloc. L'onglet Style permet d'ajuster la couleur de fond et gérer les bordures.

Titre du bloc

Texte affiché dans l'en-tête du bloc, au-dessus du contenu principal. Supporte les réglages de taille, d'alignement et de couleur. Laissé vide, l'en-tête n'est pas affiché.

Note de bas de bloc

Texte affiché dans le pied du bloc, en dessous du contenu principal. Mêmes réglages que le titre. Pratique pour une source, une condition ou une remarque secondaire.

Couleur de fond

Couleur de fond choisie dans la palette du site. L'option Atténuer la couleur applique une variante plus claire et moins saturée, utile pour les blocs d'information discrets.

Bordure

Le bloc possède une bordure par défaut. Sa couleur peut être remplacée par une couleur de la palette du site. Cette bordure entoure le bloc sur les quatre côtés.

Bordure décorative

Bordure plus épaisse que la bordure standard, à choisir parmi la palette du site. Sa position est sélectionnable : haut, bas, gauche ou droite. Plusieurs positions peuvent être combinées. Particulièrement efficace en bordure gauche pour les blocs de type encart ou mise en avant.

Exemple

Bon à savoir

Ceci est un exemple de bloc Texte encadré avec un titre en en-tête et une note en bas de bloc. La bordure plus large à gauche est obtenue via le réglage Bordure décorative dans l'onglet Style.

Note de bas de bloc

Bloc liste

Le bloc Liste permet de créer des listes très facilement, et de leur appliquer un style en particulier. L'exemple ci-dessous présente comment choisir parmi les styles disponibles ainsi que leur rendu sur le site web.

Exemple : styles de liste de base

Lors de l'ajout d'un bloc liste, il sera par défaut en tant que "Liste non ordonnée" :

  • facilité d'utilisation, sans compétences techniques
  • mise à jour du contenu à tout moment
  • cohérence graphique sur l'ensemble du site
Bouton de sélection du style par défaut d'un bloc liste
Bloc liste, l'option d'affichage "Liste non ordonnée" est sélectionnée

Elle peut être modifiée facilement en liste numérotée, aussi appelée "liste ordonnée" :

  1. facilité d'utilisation, sans compétences techniques
  2. mise à jour du contenu à tout moment
  3. cohérence graphique sur l'ensemble du site
Bloc liste, l'option d'affichage "Liste ordonnée" est sélectionnée
Exemple : liste avec icônes

Ces deux options plus avancées, remplacent les deux styles de base lorsqu'elles sont activées. Il s'agit des options "Icône" et "numéroration imbriquée".

Pour accéder à ces options, cliquez sur l'icône "stylo" du bloc de la liste.

Accéder aux options avancées de mise en page d'un bloc liste
Bloc liste, l'option d'affichage "Icône" est sélectionnée
1. Modifier le style de la liste

Vous pouvez choisir entre l'option "icône" qui vous permettra de choisir un icône parmi une liste, ou l'option "Numérotation imbriquée".

2. Icône de liste

Menu déroulant listant tous les icônes disponibles pour le style de la liste.

Le résultat de la configuration ci-dessus donne la liste suivante :

  • facilité d'utilisation, sans compétences techniques
  • mise à jour du contenu à tout moment
  • cohérence graphique sur l'ensemble du site
Exemple : liste avec numérotation imbriquée

La numérotation imbriquée est appropriée lorsqu'une liste comporte des sous-éléments, et que l'on souhaite que ceux-ci héritent du numéro de leur élément parent :

Liste ordonnée simple :

  1. Créer la page
  2. Choisir un modèle de page
    1. Définir le titre
  3. Ajouter le contenu
    1. Créer des rangées et des colonnes
    2. Ajouter des blocs de contenus
  4. Enregistrer et publier la page

Liste ordonnée avec numérotation imbriquée :

  1. Créer la page
    1. Choisir un modèle de page
    2. Définir le titre
  2. Ajouter le contenu
    1. Créer des rangées et des colonnes
    2. Ajouter des blocs de contenus
  3. Enregistrer et publier la page