Block Types
Blocks are the building units of your email. Each block type serves a specific purpose -- from headings and paragraphs to images, buttons, and multi-column layouts. You add blocks by dragging them from the palette on the left side of the editor onto the canvas.
Content Blocks
Paragraph
A rich text block for body copy. Supports bold, italic, underline, links, and alignment. This is the most commonly used block type.
Text
A smaller text block, useful for captions, footnotes, or secondary information.
Title
A heading block with configurable heading level (H1 through H6). Use H1 for the main email heading and H2-H3 for section headers.
List
An ordered or unordered list. You can choose the list style (disc, circle, square for unordered; decimal, lower-alpha, upper-roman for ordered), adjust item spacing, and set text direction (LTR or RTL).
Properties: list type, style type, items, text color, link color, alignment, item spacing, indent, text direction.
Image
An image block with optional click-through link. Set the source URL, alt text, and width. Images are responsive by default.
Button
A call-to-action button with configurable text, URL, colors, border radius, width (auto or full-width), and alignment.
Table
A data table with configurable rows and columns. You can enable a header row, striped rows, and set border and header background colors.
Quote
A blockquote block for highlighted or quoted text. Includes a left border whose color and width you can customize.
Code
A preformatted code block. Useful for sharing code snippets, tracking IDs, or technical content. You can specify the language for syntax hints.
Link
A standalone text link with URL and alignment. Use this when you want a simple link without wrapping it in a paragraph.
Layout Blocks
Divider
A horizontal line to separate sections. Choose from solid, dashed, or dotted styles, and set the color and thickness.
Spacer
A blank vertical space. Set the height in pixels to control the gap between sections.
Columns
A multi-column layout container. Each column can hold its own blocks (paragraphs, images, buttons, etc.), giving you side-by-side layouts.
Column properties include:
| Property | Description |
|---|---|
| Number of columns | 1-4 columns |
| Gap | Space between columns |
| Row background color | Background for the full row |
| Content background color | Background for the content area |
| Vertical alignment | Top, middle, or bottom |
| Stack on mobile | Whether columns stack vertically on small screens (default: yes) |
| Stack order | Normal or reverse order when stacked |
| Per-column settings | Width, background, padding, and borders for each column individually |
Use 2-column layouts for hero sections (image + text), feature highlights, or side-by-side comparisons. Most email clients support up to 4 columns, but 2-3 columns tend to read better.
Advanced Blocks
Social
A row of social media icons with links. Supports 14 platforms: Facebook, Twitter/X, Instagram, LinkedIn, YouTube, TikTok, GitHub, Discord, Telegram, WhatsApp, Pinterest, Threads, Website, and Email.
You can configure icon size, color, background color, shape (none, circle, rounded), and alignment.
Video
An embedded video link with thumbnail image. Because most email clients do not play inline video, this block renders as a clickable thumbnail that opens the video URL in the browser.
Icons
A decorative row of icons, each with an optional link. Useful for feature highlights or visual markers.
Menu
A navigation menu with labeled links. Choose between horizontal and vertical layouts, and optionally set a separator character between items.
GIFs
An animated GIF image block. Set the GIF URL, alt text, and display width.
Stickers
A decorative sticker image. Works the same as GIFs but intended for static decorative elements.
HTML
A raw HTML block for custom code. Use this when you need something the other block types do not support -- for example, a custom interactive element or a third-party embed snippet.
Raw HTML blocks bypass the editor's responsive compilation. Test carefully across email clients when using custom HTML, as rendering varies significantly between Gmail, Outlook, and Apple Mail.
Block Properties
Every block has a Styles section in the properties panel with these common settings:
| Property | Description | Options |
|---|---|---|
| Font family | Override the default email font | Any web-safe font |
| Font size | Text size | px value |
| Font weight | Text weight | Normal, bold, etc. |
| Color | Text color | Any hex color |
| Text align | Horizontal alignment | Left, center, right |
| Line height | Line spacing | Multiplier or px |
| Letter spacing | Space between characters | px value |
| Background color | Block background | Any hex color |
| Padding | Space inside the block | Top, bottom, left, right (px) |
| Hide on | Hide this block on specific devices | None, desktop, mobile |
Adding Blocks
There are two ways to add a block:
- Drag from the palette -- grab a block type from the left panel and drop it onto the canvas at the desired position
- Drop into columns -- drag a block directly into a specific column within a Columns block
When you drop a block, it appears with default content and settings. Select it to customize the content and properties.
Reordering and Deleting
- Reorder: drag a block on the canvas to a new position
- Delete: select a block and press
DeleteorBackspace, or use the delete option in the block menu - Save as module: right-click or use the block menu to save a block (or group of blocks) as a reusable module
Next Steps
- Saved Modules -- save and reuse common block configurations
- Visual Editor Overview -- editor layout and keyboard shortcuts
- Variables -- insert dynamic content into text blocks