Use the Style tab to define the layout of your layout, modify typography, add spacing around images and blocks, and much more.
- Select a block in the Visual Editor to view its style within the Style tab.
- Adjust spacing, size, and decorative properties for blocks.
- Add custom CSS classes or specific CSS rules as needed.
To edit options for a block in the Style tab in a Builder Project—that is, you are on a Fusion plan—you must be in Design mode.
After selecting a block within the Visual Editor, select the Style tab.
There are several panels within the Style tab, each of which can affect the chosen block:
- Layout: Set the width and height of blocks, as well as its position on the page or relative to the containing block.
- Margin and padding: Adjust the spacing around a block.
- Design tokens: Make use of your design tokens within your content entry. For more details, see Design tokens.
- Visibility: Hide blocks on specific devices.
- Background: Choose background colors and images.
- Typography: Select fonts, text color, weight, and more to do with text.
- Border: Set a block's border color and style.
- Shadows and effects: Add text and box shadows to your block.
The final three panels are relevant only for those with additional front-end development knowledge.
- CSS properties: Add specific CSS rules to your block.
- HTML attributes: Define the specific HTML element to use for your block. Additionally, add attributes to the HTML that will be generated from the block such as
id. - Advanced: In this panel, add specific CSS classes to your block or access the unique Builder ID for this block.
Note: if you find you are unable to change the styling of a particular block, this may be due to your user permissions or your application's design token settings.
When you use Design system indexing, your design tokens appear in the Style tab of the Visual Editor. In Project Settings, Strict Mode determines whether users can apply only your design tokens or also use values outside the design system.
In the video below, notice that when the user goes to the Style tab and chooses styles, the many options available are from the indexed design system:
For more granular control over how design tokens are applied in the Visual Editor, read about Strict mode in Projects settings.
To learn about block-specific options, see Options tab.