Group Block

The Group block is a container that allows you to organize multiple blocks together and apply shared styling. Use groups to create sections, apply backgrounds to multiple blocks, and organize your email template structure.

Adding a Group Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Group” or find it in the “Design” category
3. Click to insert the block
4. Add blocks inside the group

Adding Content to Groups

Adding Blocks

1. Click inside the Group block
2. Add any block type (paragraph, heading, image, button, etc.)
3. Add multiple blocks to create a section

Block Types

Groups can contain:

• Text blocks (paragraphs, headings, lists)
• Media blocks (images)
• Design blocks (buttons, separators)
• Layout blocks (columns, other groups)
• Any combination of blocks

Styling Options

Background

Background Color

Set a background color for the entire group:

• Choose from preset color palette
• Use custom colors with the color picker
• Apply brand colors for consistency

Background Image

Add a background image to the group:

• Upload an image or select from media library
• Set background size and positioning
• Useful for hero sections or decorative backgrounds

Note: Background images have limited support in email clients. Test thoroughly.

Colors

• Text Color: Set default text color for all content in the group
• Heading Color: Set color for headings within the group
• Button Color: Set color for buttons within the group
• Link Color: Set color for links within the group

Typography

Set typography defaults for all content in the group:

• Font size
• Font family
• Font weight
• Line height
• Letter spacing
• Text transform
• Text decoration

Spacing

• Padding: Add internal spacing around group content
• Block Gap: Control spacing between blocks within the group
• Creates visual breathing room

Borders

Add borders around the entire group:

• Border Color: Choose a border color
• Border Radius: Round the corners
• Border Style: Solid, dashed, dotted, etc.
• Border Width: Set border thickness

Layout Options

Constrained Layout

Groups use a constrained layout by default, which:

• Limits the maximum width of content
• Centers content within the group
• Provides consistent content width

Template Lock

Control how the group can be edited:

• All: Lock all editing (prevents adding/removing blocks)
• Insert: Allow inserting new blocks but not removing existing
• Content Only: Allow editing content but not structure
• None: No restrictions (default)

Best Practices

1. Logical Grouping: Group related content together
2. Shared Styling: Use groups to apply styling to multiple blocks at once
3. Section Creation: Use groups to create distinct sections in your email
4. Background Colors: Use background colors to visually separate sections
5. Consistent Padding: Use consistent padding for visual harmony
6. Nested Groups: You can nest groups within groups for complex layouts
7. Mobile Testing: Test grouped content on mobile devices

Examples

Example 1: Highlighted Section

Goal: Create a highlighted information section

• Background Color: Light yellow (#fff9e6)
• Padding: 20px all sides
• Border: 1px solid #ffd700
• Border Radius: 5px
• Content: Heading + Paragraph with important information

Example 2: Hero Section

Goal: Create a hero section with background

• Background Color: Brand primary color
• Text Color: White
• Padding: 40px vertical, 20px horizontal
• Content: Large heading + Paragraph + Button

Example 3: Content Card

Goal: Create a card-style content section

• Background Color: White
• Border: 1px solid #e0e0e0
• Border Radius: 8px
• Padding: 30px all sides
• Content: Image + Heading + Paragraph + Button

Troubleshooting

Group Not Displaying Correctly

• Verify blocks are properly nested inside the group
• Check that the group has content
• Test in multiple email clients
• Some email clients may render groups differently

Background Not Showing

• Background images have limited support in email clients
• Test in multiple email clients
• Consider using background colors instead
• Some clients may not support background images at all

Spacing Issues

• Adjust padding values to achieve desired spacing
• Test on mobile devices
• Some email clients may render spacing differently
• Use consistent padding values

Border Issues

• Some email clients have limited border support
• Test in multiple email clients
• Border radius may not work in all clients
• Consider using background colors for visual separation

Nested Content Issues

• Ensure blocks are properly nested
• Test nested groups in multiple email clients
• Some complex nesting may not render correctly
• Keep nesting simple for better compatibility