Save a block’s style

This article explains how to save the look of a block as a style, apply it to other blocks and update it everywhere at once. You will also learn to adapt the styles supplied by Lovely Render and find where each style is used.

Before you start

• A saved style is a named look: colors, typography, borders, shadows and sizes. You apply it to other blocks of the same type in one click.
• A block that carries a style follows that style. Changing the style changes all the blocks that carry it, on all pages.
• Creating, updating and deleting a style, or choosing a block’s default style, requires the Administrator role. Other roles see the list and apply styles, without the Create, Update or Delete buttons.
• A style carries the look of a block, never its content. To reuse blocks with their text, use a composition: Write the header, menu and footer once.

Find the Styles panel

1. In the editor, select a block.
2. In the sidebar, open the Styles tab. The Styles panel is the first in the tab.

The panel lists the styles of this type of block. Each style is a button: solid when the style is applied. The pencil updates it and the trash deletes it. With no style, the panel shows No styles saved for this block yet.

A style created on a variation of a block appears only on that variation. A button is always on a variation, Primary by default: a style created on a secondary button does not appear on a primary button.

Create a style

1. Set the block as you want in the panels of the Styles tab.
2. In the Styles panel, click Create.
3. Enter the Style name.
4. Under Applies to, leave This block, or choose All blocks.
5. If every block of this type inserted afterwards should carry this style, choose it under Set as default for.
6. Uncheck the families of settings that the style should not take along.
7. Click Save. The style is applied to the block and added to the list.

The Save button stays grayed out as long as the name is empty or no family is checked. The form offers only the families this block can set: a logo offers only Size & Spacing.

The style saves only what you set on the block, state by state and screen by screen. The values the block inherits stay open.

A style does not take along the block’s layout (columns, direction and alignments), its animations, its links or its image settings. These settings stay specific to each block.

Create a style for all blocks

A card look (a radius, a padding and a shadow) serves a container as well as a media or the card of a list. Save it with Applies to set to All blocks. It then appears at the top of the Styles panel of all blocks, marked All blocks.

Such a style takes along only what all blocks can set: colors, typography, size and spacing, borders, effects, transitions and advanced CSS. The other families are grayed out. A warning names those that held a value on this block.

The block’s own style wins over a style for all blocks for the settings they have in common.

Apply a style

1. Select the block and open the Styles tab.
2. In the Styles panel, click the name of the style. The button becomes solid.
3. To remove it, click its name a second time.

Applying a style replaces the block’s settings that the style covers, including the gap between children. Then set on this block the values you want to keep.

A block can carry several styles. When two styles set the same thing, the last in the list wins, whatever the order of your clicks. If their values differ, the panel shows Some attributes are defined by more than one applied style:, then each setting, the styles that define it and the winning style.

The Reset all link, at the top of the panel, removes all the styles from the block.

Set a block differently from its style

To change a single block, set the value directly on it. Your value wins over the style for this block. The other blocks keep following the style.

Next to each setting, a button says where the block stands against its style. Only one shows at a time, depending on the situation.

Update a style

1. On a block that carries the style, change the settings you want.
2. In the Styles panel, click the pencil Update on the style’s row.
3. Review the differences between the block and the style, sorted by family. A family with no difference shows No local override to push.
4. Check the families to carry over into the style. You can also change its name and the Set as default for setting.
5. Click Yes, update.

The form warns: This will update the style everywhere it is used. Continue? All the blocks that follow this style change, on all pages. A block that has its own value for a setting keeps it.

With no difference, the form shows No attribute changes detected. You can rename the style or change its default scope.

To remove a setting from a style, suppress its inherited value on a block, then update the style. The setting leaves the style.

Remove an advanced CSS declaration

When the style carries advanced CSS, the Update form lists its declarations, with the state and the screen of each. Check a row to remove it from the style. This is the only place where an advanced CSS declaration leaves a style.

Set a default style

A default style applies to every block of this type, on insertion. It is chosen at creation, or later in the Update form, under Set as default for.

An inserted block receives the block’s default styles then those of its variation, which win. A pasted or duplicated block does not receive any. A block added by a catalog creation or by your AI receives them.

A default style does not apply to blocks already in place. For them, apply the style by hand.

Adapt a style supplied by Lovely Render

Your blocks carry, from insertion, styles supplied by Lovely Render: Primary, Secondary and Tertiary for buttons, Heading 1 to Heading 6 for headings, Page for the text of the whole site, Link for the links of a text. Others apply on demand, like Card, Section, Spaced, Eyebrow, Caption or FAQ.

• A supplied style is edited like yours, with Update. Your version applies to your site only. The settings you did not touch follow Lovely Render’s changes.
• Its name cannot be changed from your site.
• It cannot be created or deleted from the editor.
• Its values follow the scales and colors of your design system: changing your main color changes the buttons, the links and the active tab together.

The style of a heading follows its level: a heading moved from level 2 to level 3 leaves Heading 2 for Heading 3. Its other styles stay.

Delete a style

Click the trash Delete on the style’s row. The message depends on the style.

Know where a style is used

The Appearance > Design System screen lists, under Design system entries, everything your site reuses: block styles, shadows, gradients, filters, clip shapes, radii, font sizes, spacings and palette colors.

Click the row of a used entry to open its detail: the Contents, with the link to go there, the Registered styles and, for a color, the Shadows.

An entry can be deleted only if both its counters are at zero. Delete in this order: remove the entry from the contents, delete the styles that use it, then delete the entry.

See also

• Set size, borders and effects
• Add advanced CSS
• Set your colors, fonts and scales
• Adopt a design from the catalog