Réglages communs des blocs

Chaque bloc dispose de ses propres réglages affichés dans la colonne latérale des réglages, située à droite de l’écran dans l’onglet Bloc. Certains de ces réglages sont communs à de nombreux blocs et sont décrits ci-dessous.

⚠️ Veuillez noter que la disponibilité des réglages présentés dans cet article peut varier selon les thèmes.

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

La colonne latérale des réglages est alors affichée.

Colonne latérale des réglages du bloc enfant **Colonne**

Les réglages sont répartis entre deux onglets : l’onglet Réglages (à gauche) et l’onglet Styles (à droite), vous pouvez basculer de l’un à l’autre en cliquant sur l’onglet que vous souhaitez afficher. La plupart des réglages communs présentés ici se situent dans l’onglet Styles.

Ces onglets comportent généralement plusieurs sections dont l’affichage des options proposées varie :

Les options par défaut sont visibles, et vous pouvez choisir des options supplémentaires en cliquant sur le bouton Options (icône trois points superposés), situé à droite du nom de la section. Cochez alors, dans le menu déroulant, les options que vous souhaitez afficher. Vous ne pouvez pas masquer les options par défaut.
Toutes les options proposées sont visibles, et vous pouvez les masquer en réduisant la section à l’aide du bouton flèche vers le haut, situé à droite du nom de la section.
Toutes les options sont masquées, et vous pouvez les afficher toutes en développant la section à l’aide du bouton flèche vers le bas, situé à droite du nom de la section.
Toutes les options sont masquées, et vous pouvez choisir celles que vous souhaitez afficher en cliquant sur le bouton « + », cochez alors, dans le menu déroulant, les options souhaitées. Notez que dans ce cas, les options proposées sont des options supplémentaires, qu’il n’y a donc pas d’options par défaut, et que le bouton « + » se transforme en trois points superposés lorsque vous avez coché au moins une option.

Vous pouvez réinitialiser les valeurs des options à leurs valeurs par défaut :

globalement, pour toutes les options en même temps en cliquant sur l’option Tout réinitialiser dans le menu déroulant des Options ;
ou individuellement,
- pour les options par défaut, en cliquant sur le bouton Réinitialiser dans le menu déroulant des Options ;
- pour les options supplémentaires, en les décochant dans le menu déroulant des Options.

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 la section Typographie comporte un bouton Options de Typographie (icône « trois points superposés »), cela signifie que pour le bloc sélectionné des options supplémentaires sont disponibles.

Selon les blocs et les thèmes, différentes options sont disponibles :

Taille de la police – Vous pouvez choisir une des tailles prédéfinies (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.
Famille de police – Vous pouvez choisir une police de caractères prédéfinie par le thème (cette option n’est pas disponible pour tous les thèmes).
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).
Interlignage – Cette option est ajoutée par le thème. Elle permet de définir une hauteur de ligne (propriété CSS line-height).
Interlettrage – Vous pouvez définir un espacement des lettres en px, em ou rem (propriété CSS letter-spacing).
Décoration de texte – Vous pouvez choisir des options de décoration du texte (propriété CSS text-decoration: underline ou line-through) : Souligner ou Barrer.
Orientation du texte – Vous pouvez choisir des options d’orientation du texte (propriété CSS writing-mode) : Horizontal ou Vertical. Cette option n’est pas présente avec tous les thèmes.
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).
Lettrine – Cette option est ajoutée par le thème. Elle permet de transformer la première lettre en lettrine (lettre de plus grande taille). Cette option n’est pas présente avec tous les thèmes.

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

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.
Pour certains blocs, comme le bloc Groupe ou le bloc Colonnes, vous pouvez aussi définir les couleurs du texte et de l’arrière-plan des blocs Titre et Boutons qui y sont insérés.

Pour ajouter les réglages concernant les boutons et les titres, cliquez sur le bouton Options de couleur (trois points superposés) puis sélectionnez les éléments souhaités dans la liste. Pour appliquer les mêmes couleurs à tous les titres quelque soit leur niveau, sélectionnez l’élément Titre. Pour définir des couleurs différentes selon le niveau de titre, sélectionnez chaque niveau de titre concerné dans la liste. Vous pouvez bien évidemment, définir une couleur par défaut (pour le texte et l’arrière-plan) pour l’ensemble des titres avec l’élément Titre et spécifier des couleurs différentes pour un ou plusieurs niveaux de titre, avec les éléments Hn correspondants.

Chacun de ces réglages vous proposera la palette de couleurs définie par votre thème.

Dans la section 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 celle 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é.

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° pour le type Linéaire.

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’option souhaitée.

Mise en page

La section 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.

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 colonnes centrales ou larges.

Vous pouvez définir l’unité en PX, %, EM, REM, VW ou VH.

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.

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.

Autoriser le passage sur plusieurs lignes

Disponible notamment pour les blocs Boutons, Ligne, Rangée, 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.

Dimensions

La section Dimensions est présente 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.
Espacement des blocs – Il s’agit de la propriété CSS gap qui permet d’espacer les blocs.
Hauteur minimale – Il s’agit de la hauteur minimale allouée au bloc.

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.

Marges internes et externes

Pour les marges (internes et externes), les options proposées sont les suivantes :

Vertical – Vous pouvez définir une seule valeur pour les marges haut et bas.
Horizontal et vertical – Vous pouvez définir deux valeurs différentes : celle des marges haut et bas, et celle des marges gauche et droite.
Haut, Droite, Bas, Gauche – À utiliser si vous souhaitez définir la valeur d’une seule de ces marges, car vous ne pouvez sélectionner qu’une seule option à la fois.
Personnalisé – Permet de spécifier une valeur différente pour chaque marge.

Pour accéder aux options décrites ci-dessus, cliquez sur le bouton Options des Marges internes ou Options des Marges externes.

Pour toutes les valeurs des marges, vous avez le choix entre sélectionner une valeur prédéfinie par le thème ou une valeur personnalisée en cliquant sur le bouton Définir une taille personnalisée. Pour revenir aux valeurs prédéfinies par le thème, cliquez sur le bouton Utiliser une taille prédéfinie.

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).

Hauteur minimale

Ce réglage correspond à la propriété CSS min-height. Vous pouvez définir cette hauteur minimale en plusieurs unités (px, %, em, rem, vw ou vh), comme pour les marges.

Par exemple, si vous définissez une hauteur minimale pour le bloc Contenu de publication, celui-ci sera au moins de cette hauteur même s’il y a peu de contenu dans le bloc, forçant la zone de pied de page à s’afficher plus bas sur la page. Pour cette raison, il peut être très utile d’utiliser les unités relatives de la fenêtre lors de la définition de la hauteur minimale, par exemple 100vh pour un bloc qui occupe toute la hauteur de la fenêtre.

Espacement des blocs

Selon les blocs vous pouvez définir l’Espacement vertical (propriété CSS row-gap) ou l’Espacement horizontal (propriété CSS column-gap) ou l’Espacement (propriété CSS gap).

Ce réglage a un impact sur l’espace entre les blocs imbriqués. Par exemple, si vous définissez un Espacement de 50 px pour le bloc Bannière, s’il contient plusieurs blocs, ceux-ci seront espacés verticalement de 50 px.

Bordure et ombre

La section Bordure permet de définir les réglages de bordure suivants :

Couleur – En cliquant sur le bouton Sélecteur de couleur et style de bordure, situé à gauche du champ de saisie. Ce réglage correspond à la propriété CSS border-color.
Largeur – En saisissant une valeur ou en déplaçant le curseur. Ce réglage correspond à la propriété CSS border-width.
Rayon – En saisissant une valeur ou en déplaçant le curseur. Ce réglage correspond à la propriété CSS border-radius.

Chaque élément peut être défini individuellement en utilisant le bouton Dissocier les côtés ou Dissocier les coins arrondis (icône lien). Vous avez alors accès aux 4 valeurs. Pour revenir à une seule valeur identique pour tous les côtés ou coins, cliquer sur le bouton Lier les côtés ou Lier les coins arrondis.

Si vous souhaitez ajouter un ombrage, cliquez sur le bouton Options de Bordure & ombre pour activer l’option, cliquez sur le bouton Ombre portée puis choisissez ensuite un ombrage parmi les options proposées.

Pour supprimer l’ombrage, sélectionnez l’option Non défini ou désactiver l’option.

⚠️ L’option d’ombrage est pour l’instant disponible uniquement pour les blocs Image, Colonnes et Boutons.

Emplacement

Cette section est disponible pour les blocs Groupe, Rangée et Empilement. Deux options sont disponibles : Valeur par défaut et Épinglé. Pour que l’option Épinglé fonctionne, il est nécessaire que le bloc ne soit pas lui-même imbriqué dans un autre bloc, en d’autres termes, le réglage Épinglé fonctionne pour un bloc de premier niveau.

Notez que cette section n’est pas disponible pour l’ensemble des thèmes, en particulier les thèmes non spécifiquement basés sur des blocs.

Dans cet article

Catégories