Skip to main content
Column blocks create multi-column layouts for side-by-side content. Use them for product cards with images and descriptions, comparison layouts, image grids, or any content that benefits from horizontal structure.

​
Adding a column block

  1. In Design Studio, select a channel.
  2. Add a Column block from the block sidebar, toolbar, or slash menu.
  3. The block starts as a two-column row with equal widths.
  4. Drag content blocks (text, image, button, etc.) into each column cell.
Each column cell is an independent container that accepts any content block type: text, images, buttons, dividers, lists, and nested columns.
Column block in Design Studio

​
Column settings

Select the column block to configure it in the settings panel:
  • Columns count — choose 1, 2, 3, or 4 columns
  • Frame — horizontal/vertical padding (pixels) and background color for each cell
  • Border — width, radius, and color for each cell
  • Conditions — show or hide the block based on profile or data values
Column layout settings panel in Design Studio
Frame and border settings apply per cell, so you can style each column independently (e.g. a highlighted left column with a colored background next to a plain right column).

​
Channel behavior

Column blocks render differently depending on the channel:
ChannelBehavior
EmailFull multi-column layout using MJML for maximum email client compatibility
PushColumns stack vertically (single-column fallback)
SMSNot applicable; content renders as plain text
In-App (Inbox)Full support with responsive behavior
On mobile email clients, columns typically stack vertically to fit narrow screens. Design your column content so it reads well in both side-by-side and stacked layouts.

​
Tips

  • Keep to 2-3 columns — more columns get cramped, especially on mobile where they stack.
  • Balance content height — columns with very different content lengths can look uneven. Use vertical alignment or padding to compensate.
  • Test across channels — preview your template in email, push, and inbox to verify the layout works in each context.
  • Use for product cards — a common pattern is an image column (30-40% width) alongside a text + button column (60-70% width).

​
What’s Next

Elemental Columns

Column layout in the Elemental JSON format

Image Blocks

Images inside column cells

List Blocks

Lists with loops for dynamic content

Block Basics

Overview of all Design Studio blocks