Aller au contenu

Autres types de blocs

Ces blocs répondent à des usages plus spécifiques : le logo du site, le séparateur, le paramétrage de colonne et le code HTML. Tous les quatre sont dans le groupe « Autres types de contenus » de la fenêtre d’ajout de bloc.

La fenêtre d’ajout de bloc, ouverte sur le groupe Autres types de contenus.

Bloc logo du site

Ce bloc affiche le logo configuré dans les réglages du site. Il n’a aucun réglage propre : la forme et la taille du logo viennent des options du site. La configuration du logo est décrite dans la section suivante Style du menu et logo.

  • utiliser ce bloc pour répéter le logo ailleurs que dans le menu, par exemple en pied de page ou dans une colonne latérale.
  • choisir un fichier PNG ou SVG avec un fond transparent : il s’intègre mieux sur une couleur de fond.
  • vérifier la taille d’affichage dans les réglages du site : le bloc reprend la même hauteur partout.

Rendu sur le site :

Numérique
Essentiel.

Bloc séparateur

Ce bloc ajoute une ligne horizontale. Elle sépare deux parties de la page.

  • utiliser le séparateur pour marquer un changement de sujet, pas pour aérer la page.
  • pour créer de l’espace, préférer les marges ou l’espacement interne d’un bloc : le trait n’est pas un outil d’espacement.
  • un seul séparateur suffit entre deux parties : deux traits rapprochés alourdissent la page.

Exemple : une ligne de séparation entre deux contenus


Édition d’un bloc séparateur dans l’espace d’administration, annoté
1. Espacement externe (marges)

Actif par défaut lors de l’ajout du bloc, vous pouvez éditer cette option pour ajouter ou enlèver de l’espaces autour de la ligne de séparation. Si vous la désactivez, la ligne touchera les contenus voisins.

Vous pouvez choisir la taille de l’espace au-dessus et en dessous de la ligne. Il y a quatre tailles : Aucune, Petite, Moyenne ou Grande.

Rendu sur le site :


Bloc paramétrage de colonne

Ce bloc s’applique à la colonne dans laquelle il est placé. Il ne produit rien de visible par lui-même : il modifie l’apparence de la colonne entière.

  • placer le bloc en première position dans sa colonne : sinon, il reste sans effet.
  • utiliser la couleur de fond pour distinguer une colonne d’information du reste de la page.
  • vérifier le contraste entre la couleur de fond et le texte avant de publier.

Exemple : une colonne avec une couleur de fond et un espacement interne


Placement d’un bloc de paramétrage de colonne dans l’espace d’administration dans une mise en page sur deux colonnes, annoté
1. Mise en page de l’exemple

La rangée utilisée pour cet exemple est composée de deux colonnes. Les notions de rangées et colonnes sont abordées en début de documentation dans la partie Éditer une page basique.

2. Placement du bloc de paramétrage

Le bloc de paramétrage de colonne est placé en premier dans la première colonne. Le paramétrage sera donc appliqué à cette colonne.


Édition d’un bloc de paramétrage de colonne dans l’espace d’administration, annoté
1. Information

Texte informatif qui rappelle que ce bloc doit être placé en haut de sa colonne pour être pris en compte.

2. Couleur de fond

Applique une couleur de fond à l’ensemble de la colonne. Si une couleur de fond a été défini au niveau de la rangée toute entière, prend en priorité la couleur sélectionnée ici.

3. Espacement interne

Ajoute de l’espace à l’intérieur de la colonne. Quand une couleur de fond est définie, cet espacement l’étend visuellement jusqu’aux bords de la colonne.

Rendu sur le site :

Colonne avec paramétrage : la couleur de fond et l’espacement interne viennent du bloc de paramétrage placé en tête de colonne.

Colonne sans paramétrage : la colonne garde l’apparence par défaut, avec la couleur de fond d’exemple et sans espacement interne.

Bloc code HTML

Ce bloc insère du code HTML dans la page, tel que vous l’écrivez. Le code est inséré sans transformation.

  • réserver ce bloc aux éléments que les autres blocs ne savent pas faire.
  • tester le rendu sur mobile : un code d’intégration externe ne s’adapte pas toujours.
  • vérifier la provenance et le poids du code : un script extérieur peut ralentir la page.

Prérequis technique

Ce bloc est destiné aux personnes qui connaissent le HTML. Un code incorrect peut modifier l’affichage de la page : utilisez-le avec précaution.

Exemple : une barre de progression écrite en HTML


Édition d’un bloc de code HTML dans l’espace d’administration, annoté
1. Code HTML

Vous saisissez le code dans ce champ unique. L’espace d’administration ne propose aucun autre réglage supplémentaire pour ce bloc.

Rendu sur le site :

Collecte de dons : 12 400 € sur 20 000 €

62 %