# Enregistrer le style d’un bloc

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](https://lovelyrender.com/fr/documentation/compositions/).

## Trouver le panneau Styles

1. Dans l’éditeur, sélectionnez un bloc.
2. 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.**

![Le panneau Styles d’un conteneur : le style Carte appliqué, en noir, les styles Section et Espacé, chacun avec son crayon et sa corbeille, le lien Tout réinitialiser et le bouton Créer.](https://static.lovelyrender.com/uploads/2026/10/985-doc-pages2-styles.png)

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

1. Réglez le bloc comme vous le voulez dans les panneaux de l’onglet **Styles**.
2. Dans le panneau **Styles**, cliquez sur **Créer**.
3. Saisissez le **Nom du style**.
4. Sous **S’applique à**, laissez **Ce bloc**, ou choisissez **Tous les blocs**.
5. Si chaque bloc de ce type inséré ensuite doit porter ce style, choisissez-le sous **Définir par défaut pour**.
6. Décochez les familles de réglages que le style ne doit pas emporter.
7. Cliquez sur **Enregistrer**. Le style est appliqué au bloc et s’ajoute à la liste.

![Le formulaire Créer : le nom du style Carte à bordure, S’applique à réglé sur Ce bloc, Définir par défaut pour réglé sur Aucun, les neuf familles cochées de Taille et espacement à CSS avancé, puis le bouton Enregistrer.](https://static.lovelyrender.com/uploads/2026/10/988-doc-pages2-creer.png)

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é](https://lovelyrender.com/fr/documentation/css-avance/). |

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.

**Attention :** Avec toutes les familles cochées, le style créé couvre tout ce que le bloc sait régler. Les styles déjà appliqués à ce bloc lui sont retirés. Pour empiler le style créé sur les autres, décochez les familles qu’il ne doit pas emporter.

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

1. Sélectionnez le bloc et ouvrez l’onglet **Styles**.
2. Dans le panneau **Styles**, cliquez sur le nom du style. Le bouton devient plein.
3. 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. |

**Attention :** Supprimer une valeur héritée ne concerne que ce bloc, tant que vous ne mettez pas le style à jour. Si vous le mettez à jour depuis ce bloc, le réglage sort du style pour tous les blocs qui le portent.

## Mettre à jour un style

1. Sur un bloc qui porte le style, modifiez les réglages voulus.
2. Dans le panneau **Styles**, cliquez sur le crayon **Mettre à jour** de la ligne du style.
3. Relisez les différences entre le bloc et le style, rangées par famille. Une famille sans différence affiche **Aucune surcharge locale à reporter.**
4. Cochez les familles à reporter dans le style. Vous pouvez aussi changer son nom et le réglage **Définir par défaut pour**.
5. 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. |

**Attention :** Un style encore utilisé ne se supprime pas. Le refus dit combien de contenus et de styles enregistrés s’en servent encore. Retirez-le d’abord de ces endroits.

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

**Remarque :** Un pictogramme d’alerte signale qu’une révision ou un contenu à la corbeille utilise aussi l’entrée. Ces usages ne sont pas comptés, mais restaurer l’un d’eux ramènerait la référence.

## Voir aussi

- [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)
- [Ajouter du CSS avancé](https://lovelyrender.com/fr/documentation/css-avance/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)
- [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)