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
- In the admin of your Staging, open Pages then All pages. For an entry, open the menu of its content type.
- 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 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 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 describes them. |
| Settings | Opens or closes the inspector. |
| Publish | Publishes the page in the Staging. |
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 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.
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.
- Select the block, then open the Styles tab.
- In the row of states, click Hover.
- Change a setting, for example the background color. The page shows the block hovered.
- 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.
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.
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. |
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.
Each save keeps a revision of the page, with the name of the person who saved.