Cet article explique comment enregistrer l’apparence d’un bloc comme style, l’appliquer à d’autres blocs et le mettre à jour partout d’un coup. Vous saurez aussi adapter les styles livrés par Lovely Render et retrouver où chaque style sert.
Avant de commencer
- Un style enregistré est un habillage nommé : couleurs, typographie, bordures, ombres et tailles. Vous l’appliquez à d’autres blocs du même type en un clic.
- Un bloc qui porte un style suit ce style. Modifier le style modifie tous les blocs qui le portent, sur toutes les pages.
- Créer, mettre à jour et supprimer un style, ou choisir le style par défaut d’un bloc, demande le rôle Administrateur. Les autres rôles voient la liste et appliquent les styles, sans les boutons Créer, Mettre à jour ni Supprimer.
- Un style porte l’apparence d’un bloc, jamais son contenu. Pour réutiliser des blocs avec leur texte, servez-vous d’une composition : Écrire une fois l’en-tête, le menu et le pied de page.
Trouver le panneau Styles
- Dans l’éditeur, sélectionnez un bloc.
- Dans la barre latérale, ouvrez l’onglet Styles. Le panneau Styles est le premier de l’onglet.
Le panneau liste les styles de ce type de bloc. Chaque style est un bouton : plein quand le style est appliqué. Le crayon le met à jour et la corbeille le supprime. Sans style, le panneau affiche Aucun style enregistré pour ce bloc pour l’instant.
Un style créé sur une variante d’un bloc n’apparaît que sur cette variante. Un bouton est toujours sur une variante, Primaire par défaut : un style créé sur un bouton secondaire n’apparaît pas sur un bouton primaire.
Créer un style
- Réglez le bloc comme vous le voulez dans les panneaux de l’onglet Styles.
- Dans le panneau Styles, cliquez sur Créer.
- Saisissez le Nom du style.
- Sous S’applique à, laissez Ce bloc, ou choisissez Tous les blocs.
- Si chaque bloc de ce type inséré ensuite doit porter ce style, choisissez-le sous Définir par défaut pour.
- Décochez les familles de réglages que le style ne doit pas emporter.
- Cliquez sur Enregistrer. Le style est appliqué au bloc et s’ajoute à la liste.
Le bouton Enregistrer reste grisé tant que le nom est vide ou qu’aucune famille n’est cochée. Le formulaire ne propose que les familles que ce bloc sait régler : un logo ne propose que Taille et espacement.
| Famille | Contenu |
|---|---|
| Taille et espacement | Les dimensions, les marges et la position. |
| Écart | L’écart entre les enfants d’un bloc disposé en grille ou en flex, réglé dans l’onglet Réglages. |
| Visuel de l’option | Le mode d’affichage d’une case ou d’un bouton radio et son icône par état. |
| Couleurs | Les couleurs du texte, du fond et des liens. |
| Typographie | La police, la taille, la graisse, l’interlignage. |
| Marqueur | Le marqueur d’une liste. |
| Bordures | Les bordures, les angles et l’ombre portée. |
| Effets | Les transformations, l’opacité, le mode de fusion, le contour et le curseur. |
| Transitions | Les transitions entre les états. |
| Images de fond | Les images d’arrière-plan. |
| CSS avancé | Les déclarations du panneau CSS avancé. |
Le style n’enregistre que ce que vous avez réglé sur le bloc, état par état et écran par écran. Les valeurs que le bloc hérite restent ouvertes.
Un style n’emporte pas la mise en page du bloc (colonnes, direction et alignements), ses animations, ses liens ni les réglages de son image. Ces réglages restent propres à chaque bloc.
Créer un style pour tous les blocs
Un habillage de carte (un rayon, une marge intérieure et une ombre) sert à un conteneur comme à un média ou à la carte d’une liste. Enregistrez-le avec S’applique à réglé sur Tous les blocs. Il apparaît alors en tête du panneau Styles de tous les blocs, marqué Tous les blocs.
Un tel style n’emporte que ce que tous les blocs savent régler : les couleurs, la typographie, la taille et l’espacement, les bordures, les effets, les transitions et le CSS avancé. Les autres familles se grisent. Un avertissement nomme celles qui portaient une valeur sur ce bloc.
Le style propre au bloc l’emporte sur un style pour tous les blocs pour les réglages qu’ils ont en commun.
Appliquer un style
- Sélectionnez le bloc et ouvrez l’onglet Styles.
- Dans le panneau Styles, cliquez sur le nom du style. Le bouton devient plein.
- Pour le retirer, cliquez une seconde fois sur son nom.
Appliquer un style remplace les réglages du bloc que le style couvre, y compris l’écart entre les enfants. Réglez ensuite sur ce bloc les valeurs que vous voulez garder.
Un bloc peut porter plusieurs styles. Quand deux styles règlent la même chose, le dernier de la liste l’emporte, quel que soit l’ordre de vos clics. Si leurs valeurs diffèrent, le panneau affiche Des attributs sont définis par plusieurs styles appliqués :, puis chaque réglage, les styles qui le définissent et le style gagnant.
Le lien Tout réinitialiser, en haut du panneau, retire tous les styles du bloc.
Régler un bloc différemment de son style
Pour changer un seul bloc, réglez la valeur directement sur lui. Votre valeur l’emporte sur le style pour ce bloc. Les autres blocs continuent de suivre le style.
À côté de chaque réglage, un bouton dit où en est le bloc face à son style. Un seul s’affiche à la fois, selon la situation.
| Bouton | Info-bulle | Effet |
|---|---|---|
| Flèche de retour | Surcharge locale. Cliquez pour hériter du style | Le bloc a sa propre valeur : le clic lui rend celle du style. |
| Cercle barré | Supprimer la valeur héritée | Le bloc n’a plus cette valeur du style. Un second clic, Rétablir la valeur héritée, la lui rend. |
| Corbeille | Retirer la valeur | Le style ne règle rien ici : le clic efface la valeur du bloc. |
Mettre à jour un style
- Sur un bloc qui porte le style, modifiez les réglages voulus.
- Dans le panneau Styles, cliquez sur le crayon Mettre à jour de la ligne du style.
- Relisez les différences entre le bloc et le style, rangées par famille. Une famille sans différence affiche Aucune surcharge locale à reporter.
- Cochez les familles à reporter dans le style. Vous pouvez aussi changer son nom et le réglage Définir par défaut pour.
- Cliquez sur Oui, mettre à jour.
Le formulaire prévient : Le style sera mis à jour partout où il est utilisé. Continuer ? Tous les blocs qui suivent ce style changent, sur toutes les pages. Un bloc qui a sa propre valeur pour un réglage la garde.
Sans différence, le formulaire affiche Aucun changement d’attribut détecté. Vous pouvez renommer le style ou changer sa portée par défaut.
Pour retirer un réglage d’un style, supprimez sa valeur héritée sur un bloc, puis mettez le style à jour. Le réglage sort du style.
Retirer une déclaration de CSS avancé
Quand le style porte du CSS avancé, le formulaire Mettre à jour liste ses déclarations, avec l’état et l’écran de chacune. Cochez une ligne pour la retirer du style. C’est le seul endroit où une déclaration de CSS avancé quitte un style.
Définir un style par défaut
Un style par défaut s’applique à chaque bloc de ce type, à son insertion. Il se choisit à la création, ou plus tard dans le formulaire Mettre à jour, sous Définir par défaut pour.
| Choix | Effet |
|---|---|
| Aucun | Le style ne s’applique pas de lui-même. Valeur par défaut. |
| Bloc, suivi du nom du bloc | Le style s’applique à chaque bloc de ce type inséré ensuite. |
| Variante, suivi du nom de la variante | Le style s’applique à chaque bloc de cette variante inséré ensuite. Proposé quand le bloc est sur une variante. |
Un bloc inséré reçoit les styles par défaut du bloc puis ceux de sa variante, qui l’emportent. Un bloc collé ou dupliqué n’en reçoit pas. Un bloc ajouté par une création du catalogue ou par votre IA les reçoit.
Un style par défaut ne s’applique pas aux blocs déjà en place. Pour eux, appliquez le style à la main.
Adapter un style livré par Lovely Render
Vos blocs portent dès leur insertion des styles livrés par Lovely Render : Primaire, Secondaire et Tertiaire pour les boutons, Titre 1 à Titre 6 pour les titres, Page pour le texte de tout le site, Lien pour les liens d’un texte. D’autres s’appliquent à la demande, comme Carte, Section, Espacé, Surtitre, Légende ou FAQ.
- Un style livré se modifie comme les vôtres, avec Mettre à jour. Votre version vaut pour votre site seulement. Les réglages que vous n’avez pas touchés suivent les évolutions de Lovely Render.
- Son nom ne se change pas depuis votre site.
- Il ne se crée pas et ne se supprime pas depuis l’éditeur.
- Ses valeurs suivent les échelles et les couleurs de votre design system : changer votre couleur principale change les boutons, les liens et l’onglet actif ensemble.
Le style d’un titre suit son niveau : un titre passé de niveau 2 à niveau 3 quitte Titre 2 pour Titre 3. Ses autres styles restent.
Supprimer un style
Cliquez sur la corbeille Supprimer de la ligne du style. Le message dépend du style.
| Style | Message | Résultat |
|---|---|---|
| Un style que vous avez créé | Cela supprimera définitivement le style et peut affecter toutes les pages qui l’utilisent. Confirmez-vous ? | Oui, supprimer le supprime, si plus rien ne s’en sert. |
| Un style livré que vous avez modifié | Les surcharges locales seront abandonnées et le style du système reprendra la main. Continuer ? | Oui, réinitialiser rend la version d’origine. Les blocs qui le portent continuent de fonctionner. |
| Un style livré jamais modifié | C’est un style du système : il ne peut pas être supprimé depuis ce site. | Rien à supprimer. |
Savoir où un style est utilisé
L’écran Apparence > Design system liste, sous Entrées du design system, tout ce que votre site réutilise : les styles de bloc, les ombres, les dégradés, les filtres, les découpes, les arrondis, les tailles de police, les espacements et les couleurs de la palette.
| Colonne | Contenu |
|---|---|
| Nom | Le nom de l’entrée, sa valeur et son identifiant. Une entrée livrée porte la mention Fournie par Lovely Render. |
| Usages directs | Le nombre de contenus qui s’en servent. |
| Via un style ou une ombre | Le nombre de styles enregistrés qui s’en servent. Pour une couleur, s’y ajoutent les ombres dessinées avec elle. |
| Actions | Supprimer, Rétablir pour une entrée livrée que vous avez modifiée, ou la raison qui empêche d’agir. |
Cliquez sur la ligne d’une entrée utilisée pour ouvrir son détail : les Contenus, avec le lien pour y aller, les Styles enregistrés et, pour une couleur, les Ombres.
Une entrée ne se supprime que si ses deux compteurs sont à zéro. Supprimez dans cet ordre : retirez l’entrée des contenus, supprimez les styles qui s’en servent, puis supprimez l’entrée.