---
title: "Style panel of the page editor"
description: "The Style panel gathers the formatting common to almost every block: typography, colors, background, spacing, borders, shadows and animations."
url: https://docs.vivlab.com/en/editor/style/
---

# Style panel

The **Style** panel appears at the bottom of the right side panel as soon as an element, a section or the page is selected on the [canvas](https://docs.vivlab.com/en/editor/canvas.md). It gathers the visual formatting common to almost every block: typography, colors, background, margins, borders, shadows, animations…

**Style** means appearance: colors, fonts, spacing and effects. A value in **px** is a size in pixels, the unit used for on-screen dimensions. A mobile **override** is a setting used only for phones, keeping the desktop value unchanged.

Each subsection collapses or expands. As soon as at least one setting is defined, a **Modified** badge appears next to the title, with a summary of what's applied (for example a color swatch for the background). If the value differs between desktop and mobile, the summary shows both values, each preceded by a monitor or smartphone icon. Hovering a collapsed subsection shows a preview card that illustrates its effect.

## Editing desktop, mobile, or both

A note at the top of each expanded subsection says which mode you're editing in: **Edits desktop and mobile**, **Edits desktop only** or **Edits mobile only**.

- In **Desktop only** preview, a setting also applies to mobile until you give mobile its own value. If mobile already has a different value, only the desktop version changes.
- In **Mobile only** preview, you set a value just for phones. The desktop value stays unchanged.

This lets you have, for example, a heading at 64px on desktop and 32px on mobile without having to recopy the entire formatting.

## Reset a subsection

Most subsections offer a reset button (**Reset settings** text) that appears as soon as at least one value is set. It clears every setting in the subsection to revert to the default behavior (often that of the [theme](https://docs.vivlab.com/en/sections/themes-brands.md)).

## List of subsections

| Subsection                                                           | Doc page                              |
| -------------------------------------------------------------------- | ------------------------------------- |
| **Visibility**: show or hide the element on desktop, mobile, or both | [Visibility](https://docs.vivlab.com/en/editor/style/display.md)            |
| **Text style**: font, size, alignment, case, color                   | [Text style](https://docs.vivlab.com/en/editor/style/text.md)               |
| **Positioning**: vertical alignment of the content                   | [Positioning](https://docs.vivlab.com/en/editor/style/align.md)             |
| **Background**: solid color, gradient or image                       | [Background](https://docs.vivlab.com/en/editor/style/background.md)         |
| **Inner spacing**: inner margins on all four sides                   | [Inner spacing](https://docs.vivlab.com/en/editor/style/padding.md)         |
| **Border**: style, thickness, color and bordered sides               | [Border](https://docs.vivlab.com/en/editor/style/border.md)                 |
| **Rounded corners**: global or per-corner radius                     | [Rounded corners](https://docs.vivlab.com/en/editor/style/border-radius.md) |
| **Shadow**: realistic, flat or preset drop shadow                    | [Shadow](https://docs.vivlab.com/en/editor/style/box-shadow.md)             |
| **Mockup**: frame inside a device (iPhone, MacBook, iMac…)           | [Mockup](https://docs.vivlab.com/en/editor/style/mockup.md)                 |
| **Filter**: opacity, brightness, contrast, sepia, blur…              | [Filter](https://docs.vivlab.com/en/editor/style/filter.md)                 |
| **Animation**: appearance on screen (fade, zoom, slide…)             | [Animation](https://docs.vivlab.com/en/editor/style/transition.md)          |

Not every subsection is shown for every type of element: the **Text style** subsection only appears on elements that contain text, **Mockup** only on images and videos, etc. Elements whose text is not freely editable (Social media, Button action, Language menu) replace **Text style** with two reduced subsections, **Size** and **Color**. The Navigation and Social media elements add a **Direction** selector in the [Positioning](https://docs.vivlab.com/en/editor/style/align.md) subsection.