Réglages communs des blocs

Sujets

Typographie
Couleur
Styles
Mise en page
Dimensions
Bordure
À lire également

Chaque bloc dispose de ses propres réglages affichés dans les différentes sections de la colonne latérale des réglages, située à droite de l’écran dans l’onglet Bloc.

Certains de ces réglages sont communs à plusieurs blocs et sont listés ci-dessous.

Colonne latérale des réglages du bloc paragraphe

Si vous ne voyez pas la colonne latérale des réglages, cliquez simplement sur l’icône Réglages à côté du bouton Mettre à jour ou Publier (si vous êtes en mode brouillon).

Typographie

Les réglages de Typographie sont présents pour tous les blocs contenant du texte. Ils vous permettent de modifier les propriétés de la police. Ces options sémantiques peuvent être modifiées par votre thème pour vous aider à conserver un style cohérent.

Si l’onglet Typographie comporte un bouton Options de Typographie (icône « trois points empilés »), cela signifie que des options supplémentaires sont disponibles pour le bloc sélectionné. Ce bouton permet d’accéder à un menu déroulant proposant les options disponibles. Pour ajouter des options, cliquez sur le bouton Options de Typographie, puis dans le menu déroulant cliquez sur les options dont vous avez besoin. Pour restaurer l’affichage initial de l’onglet Typographie, cliquez sur l’option Tout réinitialiser. Attention, lorsque vous activez cette option, tous les réglages appliqués sont réinitialisés aux valeurs par défaut.

Capture d’écran montrant le bouton Options de Typographie

Selon les blocs, différentes options sont disponibles :

Police de caractère – Vous pouvez choisir une police de caractère prédéfinie (par le thème, cette option n’est pas disponible pour tous les thèmes).
Taille de la police – Vous pouvez choisir une taille prédéfinie (par le thème) ou définir une taille personnalisée en px, em ou rem, en cliquant sur le bouton Définir la taille personnalisée. Si vous souhaitez revenir aux tailles prédéfinies, cliquer sur le bouton Utiliser la taille prédéfinie.
Apparence – Dans la liste déroulante, choisissez l’apparence qui vous convient parmi les variations de graisses de police (de fin à noir – propriété CSS font-weight) et d’italique (propriété CSS font-style).
Casse – Vous avez le choix entre trois casses : majuscules (propriété CSS text-transform: uppercase), minuscules (propriété CSS text-transform: lowercase) ou capitalisation de la 1^ère lettre de tous les mots (propriété CSS text-transform: capitalize).
Espacement des lettres – Vous pouvez définir un espacement des lettres en px, em ou rem (propriété CSS letter-spacing).
Hauteur de ligne – Cette option est ajoutée par le thème. Elle permet de définir une hauteur de ligne (propriété CSS line-height).
Décoration – Vous pouvez choisir des options de décoration du texte : Souligner ou Barrer.

Veillez à utiliser des tailles de texte suffisantes afin qu’il soit lisible.

Haut ↑

Couleur

Les réglages de Couleur permettent de configurer la couleur du Texte et la couleur d’Arrière-plan d’un bloc ou encore, selon les thèmes, d’autres éléments comme la couleur du Lien.
Chacun de ces réglages vous proposera la palette de couleurs définie par votre thème.

Dans l’onglet Couleur, cliquez sur l’élément dont vous souhaitez modifier la couleur, puis choisissez la couleur parmi les couleurs de la palette du thème en cliquant simplement sur la couleur souhaitée ou définissez une couleur personnalisée. Pour cela, cliquez sur la zone de prévisualisation de la couleur, puis dans le sélecteur de couleur qui s’affiche, paramétrez une couleur ou copiez son code hexadécimal (ou RGB, ou HSL). Vous pouvez personnaliser une couleur grâce au curseur chromatique et au curseur d’opacité.

Capture d’écran de l’onglet Couleur dans les Réglages du bloc — Onglet **Couleur**

Pour effacer la couleur sélectionnée, cliquez sur le bouton Effacer ou cliquez à nouveau sur la couleur sélectionnée dans la palette.

Lorsque vous sélectionnez deux couleurs, une pour le texte et une pour l’arrière-plan, veillez à respecter un contraste suffisant. Si ce n’est pas le cas, un message s’affichera pour vous inviter à choisir une combinaison de couleurs différente.

Pour l’arrière-plan, vous aurez le choix entre une couleur Unie ou un Dégradé :

Capture d’écran montrant la boîte de dialogue permettant de créer un dégradé de couleurs

Choisissez un dégradé parmi ceux proposés par défaut ou définissez le vôtre.
Vous pouvez modifier les couleurs de départ/fin et des points de contrôle en cliquant sur les ronds blancs, définissez alors la couleur dans le sélecteur de couleur qui s’affiche.
Vous avez le choix entre deux types de dégradé : Linéaire ou Radial.
Et vous pouvez spécifier un Angle entre 0 et 360°.

Haut ↑

Styles

Le réglage de Styles permet d’appliquer un style prédéfini par votre thème à un bloc.

Les styles varient en fonction des thèmes, mais ils sont en général disponibles pour les blocs Image, Citation, Groupe, Bannière, Boutons, Tableau, Séparateur et Icônes de réseaux sociaux.

Vous pouvez choisir le style du bloc sélectionné en cliquant sur l’aperçu souhaité, et également définir le style par défaut pour tous les blocs de ce type dans le sélecteur Style par défaut. La prochaine fois que vous utiliserez ce bloc dans un autre contenu, il aura le style défini dans Style par défaut.

Par exemple, le thème Twenty Twenty-One permet d’appliquer des bordures au bloc Groupe.

Haut ↑

Mise en page

L’onglet Mise en page contient des réglages qui permettent de définir comment se comportent des blocs enfants à l’intérieur d’un bloc parent. Il est notamment disponible pour les blocs Groupe, Colonnes, Boutons.

Haut ↑

Les blocs intérieurs utilisent la largeur du contenu

Lorsque ce réglage est désactivé (par défaut), les blocs imbriqués rempliront la largeur de ce conteneur.

À l’inverse, lorsqu’il est activé, les blocs imbriqués utilisent la largeur du contenu avec des options pour les largeurs pleines et larges.

Haut ↑

Justification

Ce réglage défini comment sont distribués les blocs imbriqués sur l’axe horizontal : à gauche, au centre, à droite, ou répartis uniformément.

Haut ↑

Orientation

Disponible notamment pour le bloc Boutons, ce réglage défini si les blocs imbriqués sont distribués horizontalement (les uns à côté des autres) ou verticalement (les uns en dessous des autres) dans le flux.

Haut ↑

Autoriser le passage sur plusieurs lignes

Disponible notamment pour les blocs Boutons, Ligne, Empilement, en activant l’option Autoriser le passage sur plusieurs lignes, les blocs enfants passeront à la ligne suivante lorsqu’il n’y a pas assez d’espace sur les écrans de petite taille (appareil mobile). Si cette option est désactivée, tous les blocs enfants resteront sur la même ligne, quelle que soit la taille de l’écran.

Haut ↑

Dimensions

L’onglet Dimensions est présent pour de nombreux blocs et propose, selon les blocs, diverses options telles que :

Marges internes – Elles correspondent à la propriété CSS padding.
Marges externes – Elles correspondent à la propriété CSS margin.
Hauteur minimale – Il s’agit de la hauteur minimale allouée au bloc.
Espacement des blocs – Il s’agit de la propriété CSS gap qui permet d’espacer les blocs.

Attention, certaines options sont apportées par le thème, aussi pour un même bloc, les options proposées peuvent être différentes d’un thème à l’autre.

Pour les marges, les propriétés CSS proposent une valeur unique pour les quatre côtés du bloc ou se déclinent avec une valeur différente pour chacun des côtés. Par défaut, l’interface vous permet de saisir une valeur unique pour les quatre côtés. Si vous souhaitez utiliser des valeurs différentes pour chaque côté, cliquez sur le bouton Dissocier les côtés.

Les valeurs saisies peuvent être exprimées en diverses unités : pixels (px), en pourcentage de l’élément parent (%), relative à la taille de la police de l’élément (em), relative à la taille de la police de l’élément racine (rem), en pourcentage de la largeur de la fenêtre (vw) et en pourcentage de la hauteur de la fenêtre (vh).

Lorsque vous souhaitez réinitialiser les valeurs aux valeurs par défaut du bloc, cliquez sur le bouton Options de Dimensions de l’onglet Dimensions, puis dans le menu déroulant, cliquez sur Tout réinitialiser.

Pour de plus amples informations sur ces options de dimensions, lire l’article Vue d’ensemble des options de dimensions.

Haut ↑