Skip to main content

​
Overview

Structural elements organize and lay out your simple elements. They contain other elements and define how they’re arranged. These are the “containers” that give structure to your emails.

​
Types of Structural Elements

​
Group

A group is a simple container that groups multiple elements together. It lets you apply common styles to several elements and manipulate them as a unit.

Characteristics

  • Simple container
  • Full width by default
  • Can contain any elements
  • Allows applying styles to the group

Key Properties

  • Background: Background color
  • Padding: Inner spacing
  • Border Radius: Rounded corners
  • Border: Width and color
  • Width: Container width
Use cases: Sections with colored backgrounds, bordered containers, wrappers for multiple elements.

​
Multi-columns (Flex-row)

A Multi-column element creates a layout with side-by-side content. It’s the most powerful tool for creating complex layouts.

Structure

  • Contains columns
  • Each column contains elements
  • Columns stack vertically on mobile (configurable)

Key Properties

  • Columns: Number and size of columns
  • Gap: Spacing between columns
  • Alignment: Vertical and horizontal alignment
  • Mobile Behavior: Stack vertically or stay horizontal on mobile

​
Columns

Each column in a layout has its own properties:

Column Properties

  • Width: Width as percentage (e.g., “50%”)
  • Background: Background color
  • Padding: Inner spacing
  • Vertical Align: Content vertical alignment

Column Content

  • Can contain any elements (simple or structural)
Use cases: 2/3 column layouts, product grids, headers with logo + menu.
On mobile, columns typically stack vertically for better readability. You can configure this behavior in the element properties.

​
Flexible Column Widths

Columns can have different widths:
  • Equal: 50% / 50% (2 columns)
  • Unequal: 33% / 67% (sidebar + main content)
  • Three columns: 33% / 34% / 33%
  • Any combination that adds up to 100%

​
Structural Hierarchy

Structural elements can be nested to create complex layouts. For example, you can have a “Header Group” containing a “Multi-column” element for your logo and navigation links.

​
Working with Structural Elements

​
Creating Structures

1

Group

Select multiple elements and group them, or create an empty group and add elements to it.
2

Multi-columns

Click the “Multi-columns” button in the toolbar, or select elements and convert them to a multi-column layout.
3

Columns

Add columns to a layout via the properties panel. Adjust widths by resizing or typing values.

​
Modifying Structures

  • Group: Select the group to modify its properties (background, padding, etc.)
  • Multi-columns: Select the container to modify spacing, alignment, mobile behavior
  • Column: Select a specific column to modify its width, background, padding

​
Deleting Structures

Deleting a group or multi-column element also deletes all elements it contains. Make sure you want to remove everything before deleting.

​
Best Practices

  • Logical grouping of elements
  • Applying common styles (background, padding)
  • Making sections easier to manipulate
  • Side-by-side layouts
  • Product/article grids
  • Multi-columns with a single column (use a group instead)
  • Too many nesting levels (2-3 levels recommended max)
  • Test how columns stack on mobile
  • Consider mobile readability when choosing column widths