How to add columns to an email

You will learn

Learn how to add columns to your emails when needed to make your templates more aesthetically pleasing. There are a few ways to add columns to your templates. This article will run through all the ways you can add columns to your email and how to optimize your design based on device.

When to use a split block, columns, or a table

There are 3 ways to arrange content side-by-side using Klaviyo’s email editor: split block, columns, and table block. Each option offers certain advantages and tradeoffs. 

Split block

To add a split block to an email: 

1. Drag a Split block into your template. 
2. Adjust the Layout percentages to customize the width of the 2 columns.
3. In the Content section, choose whether each side of your split block should contain text or an image.
4. Click the icons under Column selector to switch between the columns.
5. Click Save to save the block.

Columns 

To add columns to an email:

1. Drag in the Columns option under Layout to create columns in your email.
2. Choose your desired layout from the options in the modal. 
3. Drag blocks of any type into your columns. 

Unlike the split block, you can use any block, have multiple blocks within the same column, and choose to have more than two columns. For example, this is an email with an image on one side and text and a button the other.

Additionally, when a mobile browser opens the email, the columns will stack on top of each other, with the left side stacking on top of the right. If you do not want your columns stacked on mobile, opt for using a table block.

Table block

You can use a table block to create columns in your email. While table blocks can only contain text and images, they allow you to customize your emails with columns by maintaining side-by-side columns on mobile. Just like any block, drag and drop a table block into your email to get started.

To alter the look of the table block, head to block settings where you can adjust the padding, or spacing, around the columns as well as the border colors and fonts.

To optimize for the mobile experience, test the mobile view of your table. If you have a table with many columns, it will likely only look ideal on desktop. To change or hide a column for mobile, adjust the setting in the column tab.

For more information on email design, check out our course on email design

Additional resources

• How to add a first name to an email or SMS
• Accessibility in emails and forms best practice reference