# See your settings in the design preview

The design preview shows, on a single page, every block that carries a product style. This article teaches you to set a style for the whole site, to fix the base size of your pages and to check dark mode.

## Before you start

- The preview is reserved for the site’s administrators.
- The preview shows sample blocks, one example of each styled block, and not your pages. It is used to judge the look of the whole site.
- Your settings are only saved when you click **Apply this design to the whole site**, in the design catalog.

## Open the preview

1. In the admin menu, open **Appearance** then **Preview**. The editor opens on the page **Design Preview**.
2. To browse its sections, scroll the page. To jump to one of them, open the list view.

The page is rebuilt every time it opens. It is not published, has no address and never becomes a page of the site.

## Browse the sections

Each section shows the blocks that carry a product style. The examples are those of an ordinary services site, so that you look at the look and not the text.

| Section | Sample blocks |
| --- | --- |
| **Typography** | The six heading levels, an eyebrow, a paragraph, a link, a signature, a bulleted list and a numbered list. |
| **Buttons** | The primary, secondary and tertiary buttons. |
| **Cards** | Three cards with the **Card** style: Advice, Project and Follow-up. |
| **Breadcrumb** | A three-level breadcrumb, the last page read. |
| **Accordion** | An accordion of three questions, the first one open. |
| **Forms** | Text, email and message fields, a dropdown, radio buttons, checkboxes, a switch, the step buttons and the send button. |
| **Tabs** | A tab bar and its panels. |
| **Media** | An image and its caption, a three-slide slider and a three-card carousel. |
| **Icons** | A phone, an envelope, a location pin and a clock. |
| **Tables** | A **WordPress table** and an **Advanced table**. |
| **Separator** | Vertical separators between two columns and horizontal ones between two rows. |
| **PDF viewer** | A dummy page. |
| **Navigation** | A **Menu** and its submenu, a **Table of contents** and a **List of pages**. |
| **Switchers** | The **Language switcher**, the **Language suggestion** and the selectors **Appearance and animations**. |

The sentences in italics introduce the blocks and cannot be set. Each section carries the **Section** style and is at most 1,280 px wide.

## Set a style from a sample block

A sample block carries the same style as the blocks of your pages. When you apply the design, a style modified here changes on all the site’s blocks that carry it.

1. Click a sample block, for example a card in the section **Cards**.
2. In the right-hand column, open the **Styles** tab and change a setting, for example the border. The three cards and those of the carousel follow.
3. Above the page, click **Open the design catalog**.
4. At the bottom of the catalog, click **Apply this design to the whole site** then **Yes, apply**. The **Card** style receives your setting.

![The notice above the design preview and its Open the design catalog button.](https://static.lovelyrender.com/uploads/2026/10/1021-doc-design-avis.png)

Here, you see on all the components the effect of a shared setting. A comfortable rounding on a button can be too pronounced on a form field.

You choose a palette, a typeface or a component in the catalog’s sidebar. [Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/) details it.

## Set the page’s base size

All the text sizes shipped are in rem: they are calculated from the page size. Changing this size makes all the site’s text grow or shrink in the same proportions.

The page size is carried by the **Page** style of the **Body** block, the one that wraps all the sample blocks. By default, it is `1rem`.

![The Page body block selected in the preview: its description, then the Styles tab with the Page style and its pencil.](https://static.lovelyrender.com/uploads/2026/10/1023-doc-design-corps.png)

| Visitor setting | Base size `1rem` | Fixed base size, for example `16px` |
| --- | --- | --- |
| Browser zoom | Everything grows. | Everything grows. |
| Browser default text size | The text follows. | No effect. |
| Phone text size | Firefox on Android enlarges. Safari on iPhone and Chrome on Android do not. | Same effect. |

`1rem` equals 16 px for almost all visitors. A person who has asked their browser to write larger sees your site larger.

### Fix the base size

A fixed size keeps your layout as you drew it, for example a large heading that must fit on one line.

1. In the list view, select **Body**.
2. In the **Styles** tab, **Typography** panel, click the **+** next to **Font size**. Create a size of `16` `px`. If it already exists, choose it from the list.
3. On the **Page** style row, click the pencil **Update**. Leave the **Typography** group checked then click **Yes, update**.
4. In the design catalog, click **Apply this design to the whole site** then **Yes, apply**.

To go back to `1rem`, click the trash **Delete** on the **Page** style row then **Yes, reset**. Then apply the design.

**Note:** A size in px set on a block never follows the browser’s text size. For all the text to react the same way, prefer the sizes of the scale.

## Switch the preview to dark mode

1. In the editor toolbar, click the **Preview in dark mode** button, next to the preview-by-device button. The whole page turns dark.
2. To go back to light, click the same button, now **Preview in light mode**.

Each mode shows the page of a visitor who chose it. Your computer’s setting plays no part. Dark mode stays chosen from one visit to the next on this browser.

![The Advice card of the preview in light mode: its title, its text and its See details button on a light background.](https://static.lovelyrender.com/uploads/2026/10/151-design-carte-clair.png)

![The same card in dark mode: the very dark green background, the light text and the See details button in a more vivid green.](https://static.lovelyrender.com/uploads/2026/10/152-design-carte-sombre.png)

A block whose color has no dark value keeps the same color in both modes. On a site set to **Light** or **Dark**, the button does not appear: the page stays in that mode.

## Know the preview’s limits

- You cannot add, remove or move a sample block.
- The images are examples, the PDF reader shows a dummy page and the page list shows five example entries.
- Blocks with no product style are not in it, for example a content list or a modal.
- You see a single state at a time, hover, focus or active, by choosing its tab in the tab **Styles**.
- The page has neither an SEO tab nor a language tab.

**Warning:** If you leave the page without applying the design, your settings are lost. The browser warns you.

## See also

- [Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)
- [Set your colors, fonts and scales](https://lovelyrender.com/documentation/set-colors-fonts-scales/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)