Available on the Free plan
The Columns block puts other blocks side by side in your emails. For example, a product next to its description, three features in a row, or an image next to a button. Each column is its own box that you can style, and you choose what happens to the row on a phone.
How the Columns block works
On a computer, the columns sit side by side.
On a phone, the columns stack by default, one per row.
You can use the block to:
Show a product next to a short description or a button.
Lay out two, three or four short blocks in a row.
Style each column as a card, with its own background color, corners and spacing.
The block works in flow emails, campaigns and saved templates.
Considerations
There are six fixed layouts, with up to four columns. You can't drag to change a column's width.
A column can hold Text, Image, Button, Product, Divider, Spacer, Social links and Reviews blocks.
A column can't hold Discount, HTML or Image with text blocks.
You can't put a Columns block inside another Columns block.
Inside a column:
Product and Reviews blocks show one card per row.
Social links icons stack vertically.
Blocks start with less spacing than at the top level.
These changes undo themselves when you move the block out of the column.
Some email clients ignore mobile styling. In those clients, rows stack even on a computer, hidden blocks and columns still show, and your phone order isn't used.
In Outlook for Windows and Yahoo Mail, columns with different amounts of content can end at different heights. This only shows when a column's background color differs from the email's.
An email can have up to 50 blocks. The blocks inside your columns count toward the limit.
An email can't be larger than about 100 KB. Many rows of four columns can reach that limit, and the editor shows an error if they do.
If you pick a layout with fewer columns, the blocks from the removed columns move to the end of the last column. Nothing is deleted.
A column with no background or corners of its own follows your branding. When you click Update flows after a branding change, the columns in your flow emails go back to your brand color and corners.
Add a Columns block
Add the block
To add a Columns block:
From Judge.me Email, open the email in the editor. This can be a flow email, the Content step of a campaign, or a template.
Click Add section.
Select Columns.
For Layout, select:
1 column
2 equal columns
3 equal columns
4 equal columns
One third and two thirds
Two thirds and one third
Fill the columns
To fill the columns:
Click Add block inside a column, and select a block.
Repeat for each column.
Click Save.
You can also drag a block from the email into a column.
Style a column
To style a column:
Click the column on the email.
Set Background color, Corners and Spacing.
Click Save.
Corners can be Same as branding (the default), Square, Soft, Rounded, Extra round, or Custom.
Set how the row looks on a phone
Choose the arrangement
To choose how the columns show on a phone:
Click the Columns block.
For Columns per row on mobile, select one of the following options:
1 (stacked): one column per row, full width. This is the default.
2: columns in pairs. An odd last column stays half width, in the center.
Same as desktop: the columns stay side by side.
Click Save.
Change the column order on a phone
To change the order of the columns on a phone:
Switch the editor to the mobile view.
Make sure Columns per row on mobile is set to 1 (stacked).
Click a column.
Click ⬆ or ⬇ to move the column up or down.
Click Save.
Only the phone order changes. The order on a computer stays the same.
Hide content on a phone
To hide content on a phone:
Click the Columns block.
To hide the whole row, turn on Hide this block on mobile.
To hide one column:
Click the column.
Turn on Hide this column on mobile.
Click Save.
To undo all phone changes for the block, click Reset mobile layout. Each column's own hide setting stays as it is.
Troubleshoot
My columns stack on a computer, or hidden columns still show
My columns stack on a computer, or hidden columns still show
Issue:
The row stacks on a computer, or content you hid on mobile still shows.
Why it happens:
Some email clients ignore mobile styling. They stack rows on every screen, show hidden content, and ignore your phone order.
How to fix:
To keep a row side by side in those clients, set Columns per row on mobile to Same as desktop.
"Pick a value between 0 and 24" shows under Column spacing
"Pick a value between 0 and 24" shows under Column spacing
Issue:
The editor shows this message, and you can't save, preview or send the email.
Why it happens:
Column spacing accepts 0 to 24 px.
How to fix:
Enter a number from 0 to 24.
I can't add a Discount or HTML block to a column
I can't add a Discount or HTML block to a column
Issue:
You can't drop a Discount or HTML block into a column.
Why it happens:
Columns can't hold Discount, HTML or Image with text blocks, or another Columns block.
How to fix:
Add the block above or below the Columns block.
My product cards are one per row inside a column
My product cards are one per row inside a column
Issue:
A Product block in a column shows one card per row.
Why it happens:
Inside a column, Product and Reviews blocks always show one card per row.
How to fix:
To show several cards in a row, place the Product block outside the Columns block.
Resources
See our latest updates:
➡️ Check our Unboxed page to discover newly launched features and improvements from Judge.me. See what's new and start using the latest updates to grow your store.