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 à gauche du bouton Enregistrer ou Publier (si vous êtes en mode brouillon).

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

La colonne latérale des réglages pour le 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, sauf Mise en page et Espacement. Pour certains blocs qui n’ont pas de réglages spécifiques comme le bloc Paragraphe, les réglages sont disponibles dans une seule section et les onglets Réglages et Styles ne sont pas présents.

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.

Styles

Il ne s’agit pas ici de l’onglet Styles (avec les réglages de Couleur, Typographie, etc.) mais de différents réglages de Styles proposés par le thème que vous pouvez appliquer à 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.

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 ainsi que sa couleur au survol.

Pour accéder à d’autres options de réglages des couleurs proposées pour le bloc, cliquez sur le bouton Options de couleur, puis sélectionnez les options dont vous avez besoin en plus de celles proposées par défaut.

Chacun de ces réglages vous proposera la palette de couleurs définie par votre thème, mais il est possible de choisir n’importe quelle couleur.

Pour certains blocs, comme le bloc Groupe (et ses déclinaisons) 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 (notez que les réglages du thème sont prioritaires vis-à-vis des réglages de ces blocs Groupe et Colonnes).

Pour ajouter les réglages concernant les boutons et les titres au niveau des blocs Groupe ou Colonnes, sélectionnez-les puis cliquez sur le bouton Options de couleur (trois points superposés) pour sélectionner 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.

Définir les couleurs

Sélectionnez le bloc puis 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 l’arrière-plan, vous aurez le choix entre une Couleur ou un Dégradé :

Pour définir un dégradé :

Sélectionnez une couleur pour le premier point de contrôle, symbolisé par un petit cercle blanc.
Cliquez sur ce cercle, et choisissez une couleur et une opacité. Éventuellement saisissez un code hexadécimal (ou RGB ou encore HSL) dans le champ prévu à cet effet.
Ajoutez éventuellement d’autres points de contrôle, en cliquant sur le + entouré d’un cercle qui apparaît lorsqu’on positionne le curseur entre deux points de contrôle, puis sélectionnez une couleur comme précédemment.
Une fois toutes les couleurs des points de contrôle définies, vous pouvez déplacer ceux-ci en les faisant glisser vers la gauche ou la droite.
Pour effacer un point de contrôle, cliquez dessus, la boîte de sélection de couleur s’affiche, vous pouvez alors cliquer sur Retirer le point de contrôle.
Vous pouvez ensuite définir si vous souaitez un dégradé Linéaire associé à un Angle ou un dégradé Radial.
Lorsque vous avez terminé de paramétrer votre dégradé, cliquez dans un espace vide pour refermer la boîte de sélection de la couleur de l’arrière-plan.

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 les liens, en termes de couleur, vous aurez la possibilité de sélectionner une couleur Par défaut et une couleur au Survol. La sélection des couleurs s’effectuant toujours de la même façon.

Effacer une 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.

Réinitialiser aux couleurs par défaut

Pour réinitialiser aux couleurs par défaut, il existe deux possibilités :

Soit couleur par couleur, pour le texte, l’arrière-plan ou les liens, en cliquant sur le signe moins (Réinitialiser) qui apparaît au survol de la couleur dans la colonne des réglages, ou encore via le bouton Options de couleur puis Réinitialiser pour la couleur que vous souhaitez réinitialiser.
Soit pour l’ensemble des couleurs, en cliquant sur le bouton Options de couleur puis Tout réinitialiser.

Disponibilité selon les blocs des réglages de Couleur

Pour plus de détails sur la disponibilité des réglages de Couleur selon les blocs, consultez la liste des outils de conception par bloc établie pour la version 6.8 (en anglais).
Cette section de réglages a été ajoutée dans la version 6.8 pour les blocs Archives, Catégories, Liste des pages, et Total de la requête.

Image d’arrière-plan

Pour ajouter une image d’arrière-plan à un bloc :

Sélectionnez-le et accédez à la section Image d’arrière-plan dans la colonne des réglages. Pour le bloc Groupe et ses déclinaisons, activez l’onglet Styles pour accéder à cette section.
Cliquez sur le bouton Ajouter une image d’arrière-plan.
Choisissez une des deux options proposées :
- Ouvrir la médiathèque – Choisissez une image dans la médiathèque et cliquez sur le bouton Sélectionner.
- Ou Téléverser – Choisissez un fichier et cliquez sur Ouvrir.

Une fois l’image ajoutée à l’arrière-plan du bloc, cliquez sur son nom dans la colonne des réglages afin d’accéder à la fenêtre modale des réglages pour :

Modifier le Point de focalisation – Utilisez le curseur ou saisissez des valeurs dans les champs Gauche et Haut.
Fixer l’arrière-plan – En cochant l’option Arrière-plan fixe.
Choisir une option de Taille – Cliquez sur l’une des options Couvrir, Contenir ou Répéter.
- Couvrir – L’image couvre l’ensemble de l’espace correspondant au bloc.
- Contenir – L’image est contenue intégralement dans l’espace correspondant au bloc, avec d’éventuels espaces vides au-dessus et en-dessous, sauf si l’option Répétition est cochée ; les espaces vides seront alors comblés avec l’image.
- Répéter – Une largeur fixe est affectée à l’image automatiquement ou saisie dans le champ prévu à cet effet ; l’option Répétition est cochée par défaut. L’image est ainsi répétée en X et en Y de manière à recouvrir l’ensemble de l’espace correspondant au bloc. La largeur fixée peut être définie dans diverses unités telles que pixels, pourcentages, em, rem, vw et vh.

Lorsque vous avez terminé les réglages, cliquez à nouveau sur le nom de l’image ou sur une zone vide de l’éditeur.

Si vous souhaitez supprimer l’image d’arrière-plan, cliquer sur le bouton Options de l’Image d’arrière-plan puis sur Réinitialiser. Cela permet de réinitialiser l’arrière-plan du bloc Groupe, c’est-à-dire de retirer le fichier média qui avait été choisi.

Disponibilité du réglage Image d’arrière-plan

La section de réglages Image d’arrière-plan est disponible pour les blocs suivants : le bloc Groupe (et ses déclinaisons), Contenu, Citation, Citation en exergue et Couplet.

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 – 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. Cette option n’est pas disponible pour le bloc Nuage d’étiquettes.
Police de caractères – 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). Notez que le sélecteur de polices de caractères présente depuis la version 6.8 un aperçu de la police.
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 – Vous pouvez choisir des options de décoration du texte (propriété CSS text-decoration: underline ou line-through) : Souligner ou Barrer. Cette option n’est pas disponible pour les blocs Calendrier et Nuage d’étiquettes.
Orientation – Vous pouvez choisir des options d’orientation du texte (propriété CSS writing-mode) : Horizontal ou Vertical. Cette option n’est pas disponible avec tous les thèmes et n’est présente que pour les blocs suivants : Article suivant, Article précédent, Bouton, Couplet, Description du site, Notes de bas de page, Paragraphe, Titre, Titre du site.
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.

Disponibilité selon les blocs des réglages de Typographie

La section de réglages de Typographie est disponible pour tous les blocs contenant du texte, soit pratiquement l’ensemble des blocs, c’est pourquoi ils ne sont pas listés exhaustivement dans cet article.
Pour plus de détails, consultez la liste des outils de conception par bloc établie pour la version 6.8 (en anglais).
Cette section de réglages a été ajoutée dans la version 6.8 pour le bloc Total de la requête.

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.

Les blocs intérieurs utilisent la largeur du contenu

Lorsque ce réglage est activé (par défaut), les blocs imbriqués utiliseront la largeur du contenu par défaut. Il est possible de personnaliser les valeurs de largeur du contenu dans les champs Contenu et Grande largeur.

Vous pouvez définir l’unité en px, %, em, rem, vw ou vh.

À l’inverse, lorsqu’il est désactivé, les blocs imbriqués utilisent la largeur du conteneur parent.

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

Disponibilité selon les blocs des réglages de Mise en page

La section de réglages de Mise en page est disponible pour un petit nombre de blocs car il s’agit de blocs « parents » pouvant inclure d’autre blocs « enfants », comme le bloc Boucle de requête, Boutons, Colonne, Contenu, Groupe (et ses déclinaisons Rangée, Empilement et Grille), Icônes des réseaux sociaux, Modèle de publication, Navigation, Pagination, Pagination des commentaires.

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.

Marges internes et externes

Selon les blocs, les valeurs des marges (internes et externes) se définissent soit par une valeur commune aux côtés haut et bas (ou gauche et droit), soit par une valeur différente pour chaque côté. Pour certains blocs vous ne pouvez définir les marges que des côtés haut et bas, comme par exemple pour les marges externes du bloc Boutons.

Dans la plupart des cas, les réglages des marges sont affichés par paire : haut/bas et gauche/droite. Vous avez un exemple dans la capture ci-contre pour les marges internes.

Pour accéder aux valeurs de chaque côté, il faut cliquer sur le bouton Dissocier les côtés (icône lien à droite du libellé Marges internes ou Marges externes). Vous pourrez alors saisir une valeur différente pour chaque côté.

Si au contraire, vous souhaitez définir les marges par paire (gauche/droite ou haut/bas), il suffit de cliquer sur le bouton Lier les côtés (icône lien barrée).

Pour spécifier une valeur pour les marges, vous avez deux possibilités :

utiliser une des valeurs prédéfinies du thème en déplaçant le curseur ;
ou cliquer sur le bouton Définir une valeur personnalisée et saisir cette valeur dans le champ qui apparaît. 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).

Notez que depuis la version 6.6, vous pouvez utiliser des valeurs négatives pour les marges externes.

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.

Disponibilité selon les blocs des réglages de Dimensions

Pour plus de détails sur la disponibilité des réglages de Dimensions selon les blocs, consultez la liste des outils de conception par bloc établie pour la version 6.8 (en anglais). Pour encore plus de précisions, consultez le tableau des options de dimensions disponibles pour chaque bloc (en anglais).
Cette section de réglages a été ajoutée dans la version 6.8 pour les blocs Liste des pages, RSS, Total de la requête.

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.

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. Sélectionnez une couleur et un Style, puis cliquez à nouveau sur le bouton. 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 de Bordure (pour la couleur, le style et l’épaisseur) ou de Rayon 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, avec un aperçu pour les épaisseurs, couleurs et styles de bordure.
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 (icône lien barrée).

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

Pour supprimer l’ombrage, cliquez sur le bouton Retirer (signe moins) situé à droite dans le bouton Ombre portée ou sélectionnez l’option Non défini ou désactiver l’option via le bouton Options de Bordure & Ombre.

Disponibilité selon les blocs des réglages de Bordure

Pour plus de détails sur la disponibilité des réglages de Bordure selon les blocs, consultez la liste des outils de conception par bloc établie pour la version 6.8 (en anglais).
Les réglages d’Ombre sont présents pour les blocs : Image, Bouton, Colonne et Colonnes, Bannière, Groupe (et ses déclinaisons), Image mise en avant.
Cette section de réglages a été ajoutée dans la version 6.8 pour les blocs Archives, RSS, Liste des pages, Derniers articles et Commentaires.

Emplacement

Cette section est disponible pour les blocs Groupe et ses déclinaisons Rangée, Empilement et Grille. 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