Modifier les styles communs avec les réglages visuels

Un style commun évite de régler chaque bouton séparément. Vous lui donnez une apparence dans le thème, puis l’appliquez aux éléments concernés. Une modification de ce style se répercute sur tous ses utilisateurs.

1. Appliquer un style commun à un élément

Dans Design, passez en Expert et sélectionnez le bouton dans la page ou dans Calques. Les commandes restent visuelles, sans code.

Dans Arrière-plan, cliquez sur +, puis choisissez Style du thème. Le style Bouton principal est appliqué par défaut. Le panneau permet aussi de choisir un bouton secondaire, avec contour ou fantôme, ainsi que les styles de carte. Un élément porte un style de bouton à la fois : choisir un autre remplace le précédent.

Répétez l’opération sur un second bouton, puis enregistrez. Ces deux éléments peuvent garder des textes et des destinations différents tout en partageant leur apparence. Le style commun ne crée pas le lien : configurez sa destination séparément.

2. Modifier le style pour plusieurs éléments

Ouvrez Thème, puis Classes. Malgré le nom de ce panneau, ses réglages se font avec les commandes visuelles. Dépliez Boutons, puis repérez Bouton principal.

Cliquez sur la valeur de la propriété à modifier. Tous les éléments utilisant ce style reprennent le réglage. Dans la démonstration, une opacité de 75 % s’applique aux deux boutons. Cette valeur rend aussi leur texte plus transparent : utilisez-la pour comprendre la portée du réglage, puis choisissez une apparence suffisamment lisible pour votre site.

Les groupes organisent les styles du Body, des Boutons, des Cartes, des Sections et des Accents. Générique rassemble notamment la police des titres, les arrondis des boutons et des cartes et la largeur maximale commune.

Un élément réglé uniquement avec des valeurs locales ne reçoit pas automatiquement un style de bouton du thème. Inversement, lorsque le style commun est appliqué, ses propriétés peuvent prendre le dessus sur les valeurs locales correspondantes. Les autres réglages locaux restent sur l’élément.

3. Ajouter et retirer une propriété

Dans un style proposant +, ajoutez une propriété visuelle compatible. Les propriétés déjà présentes ne sont pas proposées une deuxième fois. Choisissez ensuite sa valeur.

Pour retirer une propriété ajoutée, survolez sa ligne et utilisez la croix de cette propriété. Ce retrait affecte tous les éléments utilisant le style. Une croix située sur une condition retire seulement cette condition.

Certains réglages sont essentiels à la définition du style et ne proposent pas de retrait. Dans la démonstration, nous ajoutons Opacité au Body, choisissons 75 %, puis retirons la propriété. Le corps retrouve son opacité initiale ; sa police essentielle reste disponible.

Le Body concerne tout le corps de la page. Modifier son opacité agit donc sur ses titres, ses textes et ses images ensemble. Pour un changement limité à quelques boutons, modifiez leur style plutôt que le Body.

4. Régler une condition

Certains styles, notamment les boutons, permettent d’ajouter une condition à une propriété. Dans sa ligne, ajoutez Survol, puis choisissez la valeur de cet état.

La démonstration conserve 75 % au repos et ajoute 50 % au survol du bouton principal. Elle retire ensuite la ligne de survol en gardant la valeur de base. Un changement de condition peut affecter chaque utilisateur du style ; vérifiez le résultat sur plusieurs éléments.

Utilisez les conditions effectivement proposées par la propriété. Pour un changement selon l’écran, distinguez le cadre d’aperçu et les règles d’écran. Afficher un petit cadre ne crée pas une condition à lui seul.

5. Détacher un élément et contrôler le site

Enregistrez les modifications du thème avant de revenir à une page. Pour qu’un bouton cesse d’utiliser le style commun, revenez à Pages, ouvrez sa page et sélectionnez-le. Dans Style du thème, cliquez sur le style actif pour le retirer. Ses réglages locaux redeviennent visibles pour les propriétés jusque-là couvertes par le thème ; les autres boutons gardent leur style commun.

Si le réglage disparaît après le retrait du dernier style, ajoutez à nouveau Style du thème avec + dans Arrière-plan pour le réappliquer. Vous pouvez aussi choisir un autre style de bouton. Si vous voulez personnaliser un seul élément, vérifiez d’abord qu’une propriété du style partagé ne masque pas votre réglage local.

Enregistrez et rechargez la page. Contrôlez deux utilisateurs du style, puis un élément détaché. Ouvrez la prévisualisation publiée sur ordinateur et téléphone. Une modification du thème concerne les autres pages qui l’utilisent : vérifiez-les avant de publier en production.

Les styles communs décrits ici partagent une apparence. Pour réutiliser également la structure et le contenu d’un bloc, consultez les composants.