Le bloc Conteneur regroupe d’autres blocs et décide de leur rangement : empilés, côte à côte ou en grille. Cette page décrit ses trois présentations, ses balises, ses réglages de mise en page par écran et son lien, qui rend toute sa surface cliquable.
Ajouter un conteneur
- Dans l’éditeur, ouvrez l’inserteur et cherchez Conteneur, ou le mot-clé
section. Ajouter un bloc détaille les façons d’insérer un bloc. - Choisissez l’une des trois présentations proposées : Conteneur, Flex ou Grille.
- Cliquez à l’intérieur du conteneur et insérez les blocs qu’il doit regrouper. Il accepte tous les blocs.
| Présentation | Rangement des blocs | Usage courant |
|---|---|---|
| Conteneur | Les blocs s’empilent les uns sous les autres. C’est la présentation par défaut. | Une section de page ou un encadré. |
| Flex | Les blocs se placent côte à côte ou en colonne et s’adaptent à la largeur de l’écran. | Une rangée de boutons, une rangée de cartes ou un en-tête. |
| Grille | Les blocs se rangent en rangées et en colonnes alignées. | Une galerie, un catalogue ou une grille de cartes régulière. |
Vous changez de présentation à tout moment avec les boutons Bloc, Flex et Grille de la barre d’outils du bloc. La première rangée de boutons en haut de l’inspecteur fait de même. Le contenu et le style du conteneur sont gardés.
Choisir la balise HTML
Sous la rangée des présentations, la rangée Balise HTML fixe le rôle du conteneur dans la page pour les navigateurs et les lecteurs d’écran. Elle reste visible quel que soit l’onglet ouvert. Chaque balise a une infobulle qui rappelle son usage.
| Balise | Rôle | Exemple |
|---|---|---|
div (par défaut) | Un conteneur générique, sans valeur sémantique. | Un bloc de mise en page ordinaire. |
header | Le contenu d’ouverture ou les liens de navigation d’une section. | L’en-tête du site ou celui d’un article. |
main | Le contenu dominant du document, une seule fois par page. | La zone qui porte le contenu de la page. |
nav | Un bloc de liens de navigation. | Le menu principal ou le menu du pied de page. |
section | Une section thématique autonome. | Un chapitre de page qui a son propre titre. |
article | Un contenu autonome, qui aurait un sens publié seul. | Une carte d’actualité ou un témoignage. |
aside | Un contenu qui n’a qu’un rapport indirect avec ce qui l’entoure. | Une colonne latérale ou un encadré. |
footer | Le contenu de clôture de la section qui le contient. | Le pied de page du site. |
ul | Une liste : chaque bloc à l’intérieur est lu comme un élément. | Une rangée de cartes de services ou de logos. |
ol | Une liste numérotée, pour des éléments dont l’ordre compte. | Les étapes d’une démarche. |
Avec ul ou ol, un lecteur d’écran annonce le nombre d’éléments et permet de passer de l’un à l’autre. Rien ne change à l’écran : la grille, l’ordre et les animations des blocs restent ceux que vous avez réglés.
Pour nav, section et aside, le champ Nom de la région apparaît sous la rangée. Il est lu par les lecteurs d’écran pour distinguer cette région des autres, par exemple « Menu principal » et « Menu du pied de page ». Remplissez-le dès qu’une page porte deux régions de même nature.
Régler la mise en page flex
En présentation Flex, le panneau Mise en page flex s’ouvre en tête de l’onglet Réglages. Ses onglets à icônes règlent la mise en page pour tous les écrans (Ensemble), puis écran par écran (Bureau, Tablette, Mobile). L’icône d’appareils à côté d’un libellé fait passer ce réglage en réglage par écran.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Orientation | Horizontale : les blocs sont disposés en ligne. Verticale : ils sont disposés en colonne. | Horizontale |
| Passage à la ligne | Les blocs qui ne tiennent pas sur une ligne passent à la ligne suivante. | Désactivé |
| Inverser | Les blocs s’affichent dans l’ordre inverse. | Désactivé |
| Écart | L’espace entre les blocs, en colonnes et en rangées, pris dans l’échelle d’espacement du site. | Celui du style enregistré, sinon aucun |
| Aligner les éléments | La position des blocs sur l’axe transversal : début, centre, fin ou ligne de base. | Aucun alignement imposé |
| Justifier le contenu | La répartition des blocs sur l’axe principal : groupés au début, au centre ou à la fin, ou espacés de trois façons. | Aucune répartition imposée |
| Aligner le contenu | La répartition des rangées quand les blocs passent à la ligne. Affiché seulement si Passage à la ligne est activé. | Par défaut |
Un passage à la ligne ou une inversion réglés dans l’onglet Ensemble valent pour tous les écrans. Dans l’onglet d’un écran, la case reste alors cochée et grisée, avec la mention Réglé pour tous les écrans dans l’onglet Ensemble.
Régler la mise en page en grille
En présentation Grille, le panneau Mise en page en grille commence par cinq Préréglages. Un clic règle d’un coup les colonnes des trois écrans.
| Préréglage | Bureau | Tablette | Mobile |
|---|---|---|---|
| 4 / 2 / 1 | 4 colonnes | 2 colonnes | 1 colonne |
| 2 / 2 / 1 | 2 colonnes | 2 colonnes | 1 colonne |
| 3 / 1 / 1 | 3 colonnes | 1 colonne | 1 colonne |
| 1/3, 2/3 | 2 colonnes, la seconde deux fois plus large | 1 colonne | 1 colonne |
| 2/3, 1/3 | 2 colonnes, la première deux fois plus large | 1 colonne | 1 colonne |
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Mode de grille (onglet Ensemble) | Gabarit : vous fixez le nombre de colonnes. Auto : la grille crée ses colonnes ou ses rangées au fil des blocs. | Gabarit |
| Colonnes | Le nombre de colonnes sur cet écran, de 1 à 24. En mode Gabarit. | 1 |
| Flux automatique | Le sens de remplissage : Rangée, Rangée dense, Colonne ou Colonne dense. Un mode dense comble les trous laissés par les blocs plus grands. | Rangée |
| Tailles des colonnes | La largeur de chaque colonne, en fraction de l’espace restant (fr), en pixels, en largeur d’écran (dvw) ou automatique. Affiché à partir de deux colonnes. | 1fr pour chaque colonne |
| Sous-grille | Les blocs enfants partagent les rangées du conteneur, pour aligner leurs titres et leurs boutons d’une carte à l’autre. Le champ Rangées dit combien, de 1 à 12. | Désactivé |
| Mode avancé | Chaque bloc enfant se place sur la grille par ses lignes de début et de fin. Afficher les rangées ajoute le placement en rangées. | Désactivé |
| Colonnes automatiques, Rangées automatiques | La taille des colonnes ou des rangées que la grille crée seule. En mode Auto. | max-content pour les colonnes |
| Écart, Aligner les éléments, Justifier le contenu, Aligner le contenu | Les mêmes réglages qu’en flex. | Comme en flex |
Sous ces réglages, un aperçu dessine la grille de l’écran choisi. La section Enfants liste les blocs du conteneur. Pour chacun, vous réglez sa largeur en colonnes, sa hauteur en rangées, son Ordre, Aligner cet élément et Justifier cet élément. En mode avancé, Début de colonne, Fin de colonne, Début de rangée et Fin de rangée le placent précisément.
Dissoudre le conteneur sur un écran
En flex ou en grille, l’onglet de chaque écran commence par l’interrupteur Dissoudre sur cet écran. Activé, le conteneur perd sa boîte sur cet écran. Ses blocs rejoignent la grille ou la rangée du bloc au-dessus et s’y placent comme ses enfants.
Le fond, les bordures, l’espacement et la taille du conteneur n’ont plus rien sur quoi s’appliquer sur cet écran. Un rappel s’affiche dans l’onglet Styles quand vous prévisualisez cet écran. Les autres écrans ne changent pas.
Rendre le conteneur cliquable
Le panneau Lien de l’onglet Réglages fait de tout le conteneur un lien : l’image, le titre, le texte et les marges intérieures. C’est la façon de construire une carte entièrement cliquable. Le même panneau existe sur le Bouton, le Titre, le Bloc simple, le Média, le lien de Navigation et la carte d’une liste.
Choisir la cible
- Dans le panneau Lien, cliquez dans le champ Cherchez ou collez une adresse…. La liste propose d’abord les pages que le site trouve seul.
- Tapez au moins deux caractères pour chercher une page, un article, une composition ou un fichier de la médiathèque.
- Pour une autre destination, tapez son adresse, puis cliquez sur la proposition marquée Adresse en bas de la liste. Coller l’adresse ne suffit pas.
La cible choisie s’affiche en pastille, avec son titre et son type. Les boutons Modifier et Retirer le lien vident la cible : le premier pour en choisir une autre, le second pour ne plus avoir de lien.
| Étiquette | Cible |
|---|---|
| Carte | Lien vers la publication : le contenu que montre chaque carte d’une liste ou de références. Proposé en tête, dans une carte seulement. |
| Gabarit | Page d’accueil, dans la langue de la page lue. Archive : suivi du nom d’un type de contenu, pour la page qui liste ses contenus. |
| Page, Article, Composition | Un contenu du site. Un contenu d’un autre type porte le nom de son type. |
| Image, PDF, Vidéo, Audio, Fichier | Un fichier de la médiathèque. |
| Adresse | Une adresse tapée : https:// pour un autre site, mailto: pour écrire, tel: pour appeler, #ancre pour descendre vers un bloc de la page. Une adresse en http:// n’est pas proposée. |
Un lien vers un contenu du site est gardé par l’identité du contenu. Si vous renommez la page ou changez son adresse, le lien suit.
Régler le lien
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Masquer le lien aux moteurs de recherche | La page publiée ne contient plus l’adresse en clair. Le conteneur reste cliquable à la souris et au clavier. Nofollow et Ouvrir dans un nouvel onglet sont alors décochés et grisés. | Désactivé |
| Ouverture du lien | La façon dont la cible s’affiche, parmi six valeurs. Absent pour un mailto:, un tel:, une ancre, l’accueil, une archive et Lien vers la publication. | Classique (dans l’onglet du navigateur) |
| Nom accessible | Le nom que les lecteurs d’écran annoncent à la place du contenu du lien. | Vide |
| Nofollow | Demande aux moteurs de recherche de ne pas suivre le lien ni de lui transmettre de valeur de référencement. | Désactivé |
| Ouvrir dans un nouvel onglet | Ouvre la cible dans un nouvel onglet. Actif seulement avec l’ouverture classique. Absent pour un mailto:, un tel: ou une ancre. | Désactivé |
| Valeur | Affichage de la cible |
|---|---|
| Dans une modale | Une fenêtre centrée, par-dessus la page. |
| Modale en bas à gauche, Modale en bas au centre, Modale en bas à droite | Une fenêtre ancrée en bas de l’écran. |
| Sur le côté droit | Un panneau qui glisse depuis la droite. |
| Classique (dans l’onglet du navigateur) | La page cible remplace la page en cours. |
Les cinq ouvertures en surimpression chargent la cible sans recharger la page. Ouvrir une modale ou un panneau latéral explique comment les mettre en forme.
Une composition ou un fichier de la médiathèque s’ouvre toujours en surimpression : Classique quitte la liste et passe à Dans une modale. Le lien est alors masqué aux moteurs et marqué Nofollow. Les cases concernées sont grisées.
Poser une ancre HTML
Le panneau Avancé, replié en bas de l’onglet Réglages, contient le champ Ancre HTML. Écrivez-y un identifiant, par exemple tarifs : une adresse terminée par #tarifs amène le visiteur à ce conteneur. Les espaces deviennent des tirets et le # est retiré.
L’ancre permet de désigner le conteneur depuis la section Interactions d’un autre bloc, dans l’onglet Animations.
Onglet Styles
Le conteneur se règle dans les états Par défaut, Survol et Actif. Actif habille le conteneur quand un autre bloc l’active. Il reçoit les styles enregistrés : Carte, Section et Espacé sont livrés avec le produit.
| Panneau | Guide |
|---|---|
| Taille et espacement | Régler la taille, les bordures et les effets et Espacer vos blocs |
| Images de fond | Poser un arrière-plan |
| Couleurs | Colorer un bloc |
| Typographie | Mettre en forme un texte. Le réglage s’applique aux textes du conteneur qui n’ont pas le leur. |
| Bordures, Effets, Transitions | Régler la taille, les bordures et les effets |
Un conteneur cliquable gagne à changer au survol, par une ombre ou un léger agrandissement : la carte se signale ainsi comme cliquable.
Onglet Animations
L’onglet Animations fait apparaître ou bouger le conteneur avec tout son contenu. Sa section Interactions active d’autres blocs. Animer un bloc décrit les effets et les déclencheurs.
Sur téléphone
- Les réglages de flex et de grille se font écran par écran. Une grille de quatre colonnes sur ordinateur peut passer à une colonne sur téléphone.
- Sans Passage à la ligne, les blocs d’une rangée flex horizontale restent sur une seule ligne, quelle que soit la largeur de l’écran.
- Dissoudre sur cet écran retire la boîte du conteneur sur un seul écran.
Accessibilité
- Une page a besoin d’une région
main, une seule. Le panneau Accessibilité de l’éditeur signale une page sansmainou qui en porte plusieurs. Il signale plusieurs régions de navigation dont une n’a pas de nom. - Un conteneur cliquable reçoit le focus avec la touche
Tabet s’active avecEntrée. Masqué aux moteurs, il s’active aussi avecEspace. - Laissez Nom accessible vide quand la carte porte un texte visible : ce nom remplacerait le titre et le résumé pour un lecteur d’écran. Remplissez-le pour un lien qui ne montre qu’une image ou une icône.
- Quand Ouvrir dans un nouvel onglet est coché, les lecteurs d’écran annoncent « s’ouvre dans un nouvel onglet » après le nom du lien. Rien ne change à l’écran.
Vérifier l’accessibilité de vos pages décrit le panneau Accessibilité.
Limites
- La balise choisie est remplacée par un lien dès que le conteneur porte un lien.
- Masquer un lien aux moteurs ne le protège pas : l’adresse reste dans la page, encodée. Une page confidentielle se protège par son statut ou par un mot de passe.
- Une présentation en Conteneur n’a pas de panneau de mise en page ni d’interrupteur Dissoudre sur cet écran.