Block Styles

Block styles allow you to apply visual customizations to individual blocks within Layout Builder. These styles control how a block looks, independently of the section styles that affect the overall container.

Accessing Block Styles

1. In the Layout Builder interface, click on the block you want to style.

2. Select Configure or Style from the contextual menu.

3. Look for the style settings within the block configuration panel.

4. Adjust the available style options.

5. Click Update to apply the styles.

Available Style Options

The specific style options depend on your site's theme and configuration. Common block-level style options include:

Background

• Apply a background color to an individual block.

• Choose from predefined colors that align with your site's design system.

Spacing

• Padding: Adjust the inner spacing between the block's border and its content.

• Margin: Adjust the outer spacing between the block and surrounding blocks.

Text Styles

• Text alignment: Set text alignment to left, center, or right.

• Text color: Choose a text color (typically from a predefined palette).

Border and Shadow

• Border: Add or configure a border around the block.

• Border radius: Round the corners of the block.

• Box shadow: Apply a shadow effect for visual depth.

Display Options

• Visibility: Control whether the block title is displayed or hidden.

• Animation: Some themes offer entrance animations for blocks (e.g., fade-in, slide-up).

How Block Styles Differ from Section Styles

• Section styles affect the entire row (section) and all blocks within it. They control the overall container appearance.

• Block styles affect only the individual block they are applied to. They allow you to differentiate specific blocks within a section.

You can combine both section and block styles. For example, a section might have a dark background, while individual blocks within it have different accent colors or spacing.

Tips

• Maintain consistency. Apply similar styles to blocks of the same type across your site for a cohesive visual design.

• Use sparingly. Over-styling individual blocks can create a cluttered appearance. Let the site's theme handle most of the visual design.

• Follow your design system. Use predefined colors and spacing values to stay within your site's brand guidelines.

• Test across devices. Preview styled blocks on different screen sizes to ensure they look appropriate on mobile, tablet, and desktop.

• Work with your team. If you need style options that are not available, coordinate with your development team to extend the block style configuration.