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.

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, click the Styles tab (the icon looks like a black and white circle).
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, click the Styles tab.
4. Locate 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.

Learn more about changing colors.

Background images create visual interest and context for your content. To add a background image 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, click the Styles tab.
4. Find the “Background image” section. Then select from the following two options:
   • Image: Select a background image for your Group block from your site’s Media Library or upload a new one.
   • Gradient: Select a gradient color background.
5. Click “Add background image” to select an image from

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, click the Styles tab.
4. Find the Border & Shadow section.
5. 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.
6. 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.