---
title: "Panneau de style de l'éditeur de page"
description: "Le panneau Style regroupe la mise en forme commune à presque tous les blocs : typographie, couleurs, fond, marges, bordures, ombres et animations."
url: https://docs.vivlab.com/editor/style/
---

# Panneau de style

Le panneau **Style** apparaît au bas du panneau latéral droit dès qu'un élément, une section ou la page sont sélectionnés sur la [canvas](https://docs.vivlab.com/editor/canvas.md). Il regroupe la mise en forme visuelle commune à la quasi-totalité des blocs : typographie, couleurs, fond, marges, bordures, ombres, animations…

Le **style** désigne l'apparence : couleurs, polices, espacements et effets. Une valeur en **px** est une taille en pixels, l'unité utilisée pour les dimensions à l'écran. Une **surcharge mobile** est un réglage réservé au téléphone, qui conserve la valeur ordinateur.

Chaque rubrique se replie ou se déplie. Dès qu'au moins un réglage est défini, un badge **Modifié** apparaît à côté du titre, avec un résumé de ce qui est appliqué (par exemple un échantillon de couleur pour le fond).

Si la valeur diffère entre ordinateur et mobile, le résumé affiche les deux valeurs, chacune précédée d'une icône écran ou smartphone. Survoler une rubrique repliée affiche une carte d'aperçu qui illustre son effet.

## Édition desktop, mobile, ou les deux

Une mention en haut de chaque rubrique dépliée précise dans quel mode vous êtes en train d'éditer : **Modifie l'ordinateur et le mobile**, **Modifie l'ordinateur uniquement** ou **Modifie le mobile uniquement**.

- En aperçu **Ordinateur uniquement**, un réglage s'applique aussi au mobile tant que vous n'avez pas défini une valeur différente pour le mobile. Si le mobile a déjà sa propre valeur, seule la version ordinateur change.
- En aperçu **Mobile uniquement**, vous définissez une valeur propre au téléphone. La valeur utilisée sur ordinateur reste inchangée.

Cela vous permet d'avoir, par exemple, un titre en 64 px sur desktop et 32 px sur mobile sans avoir à recopier toute la mise en forme.

## Réinitialiser une rubrique

La plupart des rubriques proposent un bouton de réinitialisation (texte **Réinitialiser les paramètres**) qui apparaît dès qu'au moins une valeur est définie. Il efface l'ensemble des réglages de la rubrique pour revenir au comportement par défaut (souvent celui du [thème](https://docs.vivlab.com/sections/themes-brands.md)).

## Liste des rubriques

| Rubrique                                                                         | Page de doc                          |
| -------------------------------------------------------------------------------- | ------------------------------------ |
| **Visibilité** : affiche ou masque l'élément sur ordinateur, mobile, ou les deux | [Visibilité](https://docs.vivlab.com/editor/style/display.md)           |
| **Style du texte** : police, taille, alignement, casse, couleur                  | [Style du texte](https://docs.vivlab.com/editor/style/text.md)          |
| **Positionnement** : alignement vertical du contenu                              | [Positionnement](https://docs.vivlab.com/editor/style/align.md)         |
| **Arrière-plan** : couleur unie, dégradé ou image                                | [Arrière-plan](https://docs.vivlab.com/editor/style/background.md)      |
| **Espacement intérieur** : marges intérieures sur les quatre côtés               | [Espacement intérieur](https://docs.vivlab.com/editor/style/padding.md) |
| **Bordure** : style, épaisseur, couleur et côtés à border                        | [Bordure](https://docs.vivlab.com/editor/style/border.md)               |
| **Bord arrondi** : arrondi global ou par coin                                    | [Bord arrondi](https://docs.vivlab.com/editor/style/border-radius.md)   |
| **Ombre** : ombre portée réaliste, plate ou prédéfinie                           | [Ombre](https://docs.vivlab.com/editor/style/box-shadow.md)             |
| **Maquette** : encadrement dans un appareil (iPhone, MacBook, iMac…)             | [Maquette](https://docs.vivlab.com/editor/style/mockup.md)              |
| **Filtre** : opacité, luminosité, contraste, sépia, flou…                        | [Filtre](https://docs.vivlab.com/editor/style/filter.md)                |
| **Animation** : apparition à l'écran (fondu, zoom, glissement…)                  | [Animation](https://docs.vivlab.com/editor/style/transition.md)         |

Toutes les rubriques ne sont pas affichées sur tous les types d'éléments : la rubrique **Style du texte** n'apparaît que sur les éléments qui contiennent du texte, **Maquette** uniquement sur les images et vidéos, etc. Les éléments dont le texte n'est pas éditable librement (Réseaux sociaux, Action de bouton, Menu langue) remplacent **Style du texte** par deux rubriques réduites, **Taille** et **Couleur**. Les éléments Navigation et Réseaux sociaux ajoutent un sélecteur **Direction** dans la rubrique [Positionnement](https://docs.vivlab.com/editor/style/align.md).