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.
The Style tab provides the full capabilities of Builder's Visual Editor for building interfaces without code.
To edit an element:
- Make sure you're in Interact mode.
- Click the Style tab.
- Select an element on the page.
After choosing an element, you can now edit the style of that element within the Visual Editor.
Within the style tab, you can:
- Adjust alignment, margin, and padding
- Change colors, backgrounds, and visibility
- Integrate your Design System into your Project
These changes are reflected within your code.
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.