# Get around the editor

The editor is the screen where you compose a page, a content item or a template with blocks. This article presents its areas and its three settings tabs. You will learn to set a block for a state like hover and for a screen like the phone.

## Before you start

- The editor opens in your Staging. The Production is not edited: it receives a copy of the Staging at each publication of the site.
- The colors, fonts, sizes and spacings the editor offers are those of your site’s design system.

## Open the editor

1. In the admin of your Staging, open **Pages** then **All pages**. For an entry, open the menu of its content type.
2. Hover the page title and click **Edit**. The editor opens.

The editor keeps the admin menu on the left and opens the list view next to it.

![The editor open on the home page of a wine estate: the top bar, the list view on the left with the Heading 2 block selected, the page in the center with the toolbar of the heading Our wines, then the inspector on the right on the Styles tab, with the list of heading styles and the row of states.](https://static.lovelyrender.com/uploads/2026/10/929-doc-pages-editeur.png)

## The areas of the editor

| Area | Role |
| --- | --- |
| The top bar | The page tools: add a block, undo, open the list view, save, preview and publish. |
| The list view, on the left | The tree of the page’s blocks. A click on a row selects the block, a drag moves it. The **Structure** tab shows the outline of the page by its headings. |
| The page, in the center | The page as your visitors will see it, with the header and footer of its template. You write directly in the blocks. |
| The inspector, on the right | Two tabs. **Page** sets the whole content item, for example its status, slug, parent and SEO. **Block** sets the selected block. |

## The buttons of the top bar

| Button | Effect |
| --- | --- |
| **Block inserter** (+) | Opens the list of blocks to add. [Add a block](https://lovelyrender.com/documentation/add-block/) details the insertion. |
| **Undo** and **Redo** | Undo or redo your last change. |
| **Document overview** | Opens or closes the list view. |
| **Save draft** | Saves without publishing a page that has never been published. |
| **View** | Shows the page at the width of a **Desktop**, a **Tablet** or a **Mobile**. |
| **Preview in dark mode** | Switches the page to dark mode. The same button, **Preview in light mode**, brings it back. |
| **Accessibility** | Opens the page’s accessibility checks. [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/) describes them. |
| **Settings** | Opens or closes the inspector. |
| **Publish** | Publishes the page in the Staging. |

**Note:** A page published in the editor goes online with the whole Staging at the next publication of the site. [Publish your site](https://lovelyrender.com/documentation/publish-site/) explains this publication.

## Select a block

Click a block in the page, or its row in the list view. A toolbar appears above the block and the inspector switches to the **Block** tab.

- The toolbar arrows move the block up or down. The six-dot handle drags it.
- The **Options** menu, the three dots of the toolbar, is used to copy, duplicate or delete the block, or to add a block right before or after.
- At the bottom of the screen, the breadcrumb gives the path of the selected block, for example **Page** > **Flex** > **Heading 2**. A click on a link selects that parent block.

## Read the Block tab

The **Block** tab starts with the name of the block and its description. Some blocks show their variants there, for example the levels of a heading or the layouts of a container. Below, three tabs hold all the block’s settings, in the same order on every block.

| Tab | Content |
| --- | --- |
| **Settings** | The block’s behavior and structure: the level of a heading, the layout of a container or a link. The **Advanced** panel gives the block its **HTML anchor**, for a link that leads straight to it. |
| **Styles** | The block’s appearance: the list of its styles, then the panels **Colors**, **Background images**, **Typography**, **Size & Spacing**, **Borders**, **Effects**, **Transitions** and **Advanced CSS**, depending on what the block accepts. |
| **Animations** | The block’s animations and its interactions with other blocks. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes them. |

A tab with no setting for the selected block is not shown. The inspector opens on **Settings**. When that tab only holds the **Advanced** panel, as for a paragraph, it opens on **Styles**.

![The top of the Block tab of a card: the Flex block and its description, its three variants, its HTML tag, the Settings, Styles and Animations tabs, the Styles list with Card selected and the Create button, then the row of states Default, Hover and Active and the row of screens.](https://static.lovelyrender.com/uploads/2026/10/931-doc-pages-onglets.png)

## Set a state

You choose the state to set in the row at the top of the **Styles** tab. Your changes in the style panels only apply to that state. The page shows the block in that state.

1. Select the block, then open the **Styles** tab.
2. In the row of states, click **Hover**.
3. Change a setting, for example the background color. The page shows the block hovered.
4. Go back to **Default** to set the block at rest.

| State | When it applies |
| --- | --- |
| **Default** | The block at rest. Always present. |
| **Hover** | The pointer is over the block. |
| **Focus** | The block, or an element it contains, has keyboard focus. |
| **Active** | The block is marked active: the slide or tab on screen, the entry of the page being read or a block that another one activates. |
| **Checked** | The checkbox or radio button is checked. |
| **Required**, **Disabled** | The form field is required, or disabled. |
| **Valid**, **Invalid** | The form field passes validation, or fails it. |
| **Odd**, **Even** | The odd or even rows of a table, to alternate their colors. |

Only the states useful to the block are offered: a heading or a container offers **Default**, **Hover** and **Active**. A state you do not set keeps the look of **Default**. Hover a state to read when it applies. When you select another block, the row goes back to **Default**.

![The row of states of a form field: Default, Hover, Focus, Active, Required, Disabled, Valid and Invalid, then the row of the four screens.](https://static.lovelyrender.com/uploads/2026/10/150-design-champ.png)

**Note:** **Valid** and **Invalid** apply when the server answers the form submission. A required field still empty when the page loads never shows as an error.

## Set for a screen

You choose the screen in the second row, under the states: **Overall**, **Desktop**, **Tablet** and **Mobile**. Each setting of the **Styles** tab applies to one state and one screen.

- **Overall** gives the value for all screens.
- A screen keeps only what differs from **Overall**. Left empty, it takes **Overall**.
- Screens are not copied from one to another: **Tablet** never takes **Desktop**.
- A dot on a screen signals that it holds a value for the current state.

For example, a padding of 24 px on **Overall** and 16 px on **Mobile** gives 16 px on a phone and 24 px on a computer or tablet.

A setting placed above the two rows applies to all states and all screens.

**Note:** Choosing **Mobile** in the row of screens does not shrink the page. To see the page at that width, choose **Mobile** in the **View** menu of the top bar.

## Go back to a style’s value

A block often carries a saved style, for example **Card** or **Heading 2**. Its settings come from it as long as you do not change them. Next to a setting’s name, an icon says where its value comes from. Hover it to read its name.

| Icon | It appears when | A click |
| --- | --- | --- |
| Circular arrow, **Local override. Click to inherit from the style** | The style gives a value and you set another one on the block. | Gives the block the style’s value back. |
| Crossed circle, **Suppress inherited value** | The value comes from the style and you did not change it. | Removes the style’s value on this block. A second click, **Restore inherited value**, brings it back. |
| Trash can, **Remove value** | The style gives no value and you set one. | Removes your value. |

**Warning:** If you update the style after clicking the crossed circle, the setting leaves the style for all the blocks that carry it. [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/) explains updating a style.

## See the page in dark mode

The **Preview in dark mode** button switches the whole page to dark, background included, as for a visitor who chose dark mode. **Preview in light mode** brings it back. The editor does not follow your computer’s setting. Your choice stays in place from one visit to the next on this browser.

On a site that only shows light mode or only dark mode, the button does not appear: the page always displays in that mode.

## Save your changes

Your changes stay in the editor until you save. On a published page, saving replaces the published version in the Staging. To prepare changes without touching the published page, follow [Prepare the new version of a live page](https://lovelyrender.com/documentation/prepare-new-version/).

Each save keeps a revision of the page, with the name of the person who saved.

## See also

- [Add a block](https://lovelyrender.com/documentation/add-block/)
- [Start from a ready-made creation](https://lovelyrender.com/documentation/start-from-creation/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)
- [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/)