Add styles to groups

Using Group blocks, you can add design styles to groups of content. In this guide, you will learn how to customize the appearance of a Group block with colors, borders, and visual elements.

The options in this guide are in the block settings sidebar. Depending on your site, they appear under a Styles tab (a black-and-white circle icon) or directly in the sidebar.

In this video, you’ll learn how to use the Group block to organize related content and style grouped sections. It also covers managing blocks in the List View, locking content to prevent accidental changes, and previewing the layout on mobile.

Preset styles are a feature included in several block themes. To apply a preset style, follow these steps:

1. Click List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the available preset styles.
4. Click a style to apply it to your Group block.

If you do not have preset styles, you still have full control to apply your styles to a Group block (described below).

You can change the default colors of a Group block, including the background color, text color, and more. To change the colors used in a Group block, follow these steps:

1. Click List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the Color section.

4. Click the name of the element you want to change the color for, and select your new color.
5. Click the Color options (⋮) icon to enable options for changing default heading and button colors.
6. Click “Save” or “Publish” to save your changes.

When you select a custom color, use the opacity slider below the color field to make it partly transparent.

Learn more about changing colors.

Background images create visual interest and context for your content. To add a background to a Group block, follow these steps:

1. Click List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the Background image section.
4. Choose one of the following options:
   • Image: Select an image from your site’s Media Library, or upload a new one from your computer.
   • Gradient: Select a gradient color background.
5. Click Save or Publish to save your changes.

Once you’ve added a background image, click the image again in the Background image section to open its display options:

• Focal point: Drag the circle on the image preview, or enter Left and Top percentage values, to set which part of the image stays in view.
• Size: Choose how the image fills the block — Cover, Contain, or Tile.
• Repeat: Turn on Repeat to tile the image across the block.
• Fixed background: Turn on “Fixed background” to keep the image in place as visitors scroll.

To remove the background image or reset the gradient, click the three-dot (⋮) menu next to “Background image” and click reset for either option, or Reset all to reset both.

Borders and shadows create depth and help separate content sections visually. To add these elements to a Group block, follow these steps:

1. Click List View at the top of the editing screen.
2. Select the Group block.
3. In the block settings sidebar, find the Border & Shadow section.
4. Customize your border by adjusting:
   • Width: How thick the border appears.
   • Style: Solid, dashed, or dotted line styles.
   • Color: Choose from preset colors or create a custom color.
   • Radius: Add rounded corners to your Group block.
5. Click the Border & Shadow Options (⋮) menu to display the Shadow option, then select from preset shadow designs.

Learn more about border & shadow settings.

Creating consistent designs across your site saves time and improves visual cohesion. To set default styles for all Group blocks, follow these steps:

1. Navigate to Appearance → Editor → Styles.
2. Locate the Group block in the Blocks section and set your preferred background, border, and other style options.
3. Click Save to apply these defaults to all Group blocks.

Note: You can still customize individual Group blocks through the block settings sidebar.

Learn more about setting up styles for your site.