How to use a split block in an email
You will learn
Learn how to use a split block to arrange content side-by-side in Klaviyo.
When to use a split block
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. A split block is best when:
- You need 2 columns and want full control over the width of each.
- You want to place text or images side-by-side.
- You want to choose whether the columns stack on mobile or remain side-by-side.
Learn more about split blocks, columns, and tables in the chart below.
Content layout | Number of columns | Width options | Allowed content types | Can columns stack on mobile view? |
Split block | 2 | Precise control (Use Styles > Layout) | Image or text | 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 | No |
Tables can be challenging for accessibility, as screen readers have a hard time parsing them.
Add a split block to an email template
To use mobile stacking and mobile previews, make sure Optimize for mobile is on in the email’s Styles > Mobile optimization settings.
- Within an email template, drag a Split block into the canvas.
- Under Column selector, toggle between the left and right sides of the split.
- Under Column content, choose whether the currently-selected side of the split should contain an image or text.
- For text, double-click the text in the email canvas and enter your content. For an image, use the image controls in the sidebar to select or upload an image.
- Repeat the process for the other side of the split.
- Open the block’s Styles tab.
- Under Layout, change Col 1 width or Col 2 width to set the column widths as percentages. The other column adjusts automatically so the total stays at 100%.
- Set Spacing to adjust the space between the columns in pixels.
- Under Mobile stacking in the block’s Styles tab, choose Left to right or Right to left to stack the columns, or No stacking to keep them side-by-side.
- Click Preview, then switch between Desktop and Mobile to check the column widths, spacing, and stacking.
Additional resources
- How to build dynamic blocks in a flow email
Learn how to use dynamic table blocks to add product and other event information to your metric-triggered flows. In this article, you'll learn how to create a dynamic block using the example of an abandoned cart reminder showing the products that were left behind.
- How to add columns to an email
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.