Styliser un élément avec du CSS

Chaque élément que vous pouvez sélectionner a sa propre section Custom CSS. C’est là que va le style que les contrôles habituels ne proposent pas.

Les blocs de page et les éléments de la barre latérale utilisent exactement le même panneau. Appris une fois, valable partout.

Ouvrir le panneau

Sur un bloc de page :

1. Ouvrez l’éditeur de mise en page et cliquez sur le bloc.
2. Dans l’inspecteur à droite, repérez la section repliée « Custom CSS ».
3. Dépliez-la. Le nombre dans le titre indique combien de règles sont actives.

Sur un élément de la barre latérale :

1. Passez à l’onglet Sidebar et cliquez sur l’élément dans l’aperçu.
2. Ouvrez l’onglet Style. Un peu plus bas, la même section vous attend.

Le CSS personnalisé gagne face aux onglets au-dessus. Si une règle dit autre chose qu’un contrôle habituel, c’est votre règle que les lecteurs verront.

Choisir ce que vous stylisez

Un bloc est rarement fait d’une seule pièce. Un bouton, c’est une boîte avec une pastille dedans ; une carte a un titre, une image et un cadre.

Cliquez sur + Choose what to style et choisissez l’élément entier ou l’une de ses parties. Chaque cible a son propre groupe, et chaque règle appartient à un seul.

C’est pour ça que background dans le groupe Button colore la pastille, et jamais la boîte derrière.

Mode Fields : construire des règles sans écrire de CSS

Le mode par défaut, sans aucune connaissance en CSS. Cliquez sur + Add property et le catalogue complet s’ouvre, rangé par objectif.

Le champ de valeur s’adapte à la propriété choisie :

Chaque ligne est vérifiée en direct :

Le bas du panneau fait les comptes : règles actives, règles ignorées, et part utilisée du budget de 1 000 caractères.

Mode Text : écrire le CSS directement

Passez le sélecteur en haut de Fields à Text pour un vrai éditeur de code : numéros de ligne, coloration syntaxique, autocomplétion. Une déclaration propriété: valeur; par ligne.

Les puces au-dessus changent la cible, et un point signale celles qui ont déjà des règles. Format remet au propre, l’icône d’agrandissement ouvre le plein écran.

Fields et Text sont deux vues des mêmes règles. Passez de l’un à l’autre quand vous voulez, rien ne se perd.

Le miroir en direct : partir de ce qui existe déjà

Tout en bas du mode Fields, « From the tabs above » montre en direct ce que vos contrôles habituels appliquent, avec la cible sur laquelle chaque valeur atterrit.

Cliquez sur une ligne et elle est copiée dans votre CSS personnalisé. Quelques valeurs, comme les URL d’images, s’affichent estompées, à titre indicatif.

Le miroir ne fonctionne que dans un sens, et c’est voulu : il alimente le CSS personnalisé, jamais l’inverse. Vos ajustements vivent à un seul endroit.