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 tableWhen 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.
Content layout | Number of columns | Width options | Allowed content types | Can columns stack on mobile view? |
Split block | 2 | Precise control (Use Split settings > Column widths) | Image or text only | Yes |
Columns | 1-4 | Limited selection | Any type of content block (e.g., text block, image block, review quote block) | Yes |
Table block | Any number | Precise control (Use Column width > Manual) | Image or text only | No |
Tables can be challenging for accessibility, as screen readers have a hard time parsing them.
Split block
To add a split block to an email:
- Drag a Split block into your template.
- Adjust the Layout percentages to customize the width of the 2 columns.
- In the Content section, choose whether each side of your split block should contain text or an image.
- Click the icons under Column selector to switch between the columns.
- Click Save to save the block.
Columns
To add columns to an email:
- Drag in the Columns option under Layout to create columns in your email.
- Choose your desired layout from the options in the modal.
- 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 blockTable 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