TL;DR
Sections sit inside containers and control layout and style of grouped content blocks.
You can customize stack direction, alignment, padding, and background.
When to Use It
Use section styling when you want to:
Create visual separation within a single message
Control how blocks are grouped and spaced
Apply background styles different from the container
How It Works
Sections help organize your message into flexible parts that can each have their own design. They are especially helpful for:
Breaking up content visually (e.g. header vs. body vs. image)
Stacking blocks in horizontally or vertically
Applying alternate colors to help guests scan quickly
Important: Section styling will override container styling within that section. If you choose not to apply a section background, the section will appear transparent—showing the container background behind it.
You can also define a different stack direction than the one used in the container, giving you more layout flexibility within a message.
Step-by-Step Instructions
1. Select the Section
Click on the area of the message you’d like to customize, or use the layers panel to find the correct section.
2. Customize Section Settings
Once selected, a panel titled Section appears with the following settings:
Stack
Choose Vertical or Horizontal.
This determines how the content inside this section is arranged (column vs. row).
You can stack sections differently from the container setting.
Apply Background Color
Toggle this on to apply a background color.
Leave it off to keep the section transparent.
Background Color
Use a hex code or color picker to apply brand-aligned background colors.
Corner Radius
Adjust the roundness of the section’s corners.
Layout > Alignment
Controls how content inside the section is aligned.
Options include left, center, right, top, middle, bottom.
Padding & Gap
Horizontal & Vertical Padding: Controls spacing inside the section border.
Gap(px): Sets the space between elements stacked within the section.
Border
Add a border around the section.
Adjust thickness and color as needed.
Suggested screenshot: Section style panel with background color, stack, and padding settings visible
Pro Tips
Use background colors to differentiate stacked sections, especially when layering content
Transparent sections let the container color show through—be sure that supports your design goals
Padding ensures content doesn’t touch the edges—this makes text easier to read and improves the overall design
FAQs / Troubleshooting
Question: Why doesn’t my background color show?
Answer: Check that "Apply background color" is toggled on. Also confirm you're editing the section—not the container.
Q: Can I stack blocks horizontally inside a vertically stacked container?
A: Yes! Section stack settings are independent of the container. This is useful for layouts like image + text rows.
Q: Why do my alignment settings not work?
A: Section alignment settings only control content inside that section. If a block within the section has its own alignment, it may override the section's setting.