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.
To learn about block-specific options, see Options tab.
Was this article helpful?