Section Styles

Section styles allow you to apply visual customizations to sections in Layout Builder without writing custom code. These styles control the appearance of the section container, including background colors, spacing, and content width.

Accessing Section Styles

1. In the Layout Builder interface, click on the section you want to style (or click the settings/configure icon on the section).

2. Look for the Style or Appearance settings within the section configuration form.

3. Adjust the available style options.

4. Click Update or Save to apply the styles.

Available Style Options

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

Background Color

• Set a background color for the entire section.

• Choose from predefined color options that match your site's design system.

• Background colors help visually separate different content areas on a page.

Background Image or Video

• Some configurations allow setting a background image or video for a section.

• This is useful for hero sections or visually rich content areas.

Spacing (Padding and Margin)

• Padding: Controls the space between the section border and its content (inner spacing).

• Margin: Controls the space between the section and adjacent sections (outer spacing).

• Spacing options may be available for top, bottom, left, and right independently.

• Use consistent spacing to create a balanced page layout.

Container Width

• Full width: The section spans the full width of the browser window.

• Contained: The section content is constrained to a maximum width, centered on the page.

• Narrow: A narrower content width, suitable for text-heavy sections.

Choose the container width based on the content type. Full-width sections work well for media and banners, while contained or narrow sections are better for text-based content.

Text Alignment

• Set the default text alignment for content within the section (left, center, or right).

Combining Styles

You can combine multiple style options to create varied visual effects:

• A dark background color with light text for a high-contrast section.

• A full-width background image with contained inner content.

• Extra padding on top and bottom to create breathing room around content.

Tips

• Stay consistent. Use a limited set of section styles across your site to maintain visual coherence.

• Follow brand guidelines. Use background colors and spacing values that align with your organization's brand standards.

• Test responsiveness. Preview styled sections on different screen sizes to ensure they look good on all devices.

• Avoid overuse of backgrounds. Too many sections with different background colors or images can make a page feel cluttered. Use backgrounds strategically to highlight important content areas.

• Coordinate with your theme. The available section styles are defined by your site's theme configuration. If you need additional style options, work with your development team to extend the available choices.