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
- In the admin menu, open Appearance then Preview. The editor opens on the page Design Preview.
- 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.
- Click a sample block, for example a card in the section Cards.
- 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.
- Above the page, click Open the design catalog.
- At the bottom of the catalog, click Apply this design to the whole site then Yes, apply. The Card style receives your setting.
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 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.
| 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.
- In the list view, select Body.
- In the Styles tab, Typography panel, click the + next to Font size. Create a size of
16px. If it already exists, choose it from the list. - On the Page style row, click the pencil Update. Leave the Typography group checked then click Yes, update.
- 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.
Switch the preview to dark mode
- In the editor toolbar, click the Preview in dark mode button, next to the preview-by-device button. The whole page turns dark.
- 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.
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.