Guide to the email template editor (new editor)

You will learn

Learn about Klaviyo’s new email template editor, including how to use template styles and configure each block type. The new template editor includes brand-new features like sections to organize your content, the ability to add a background image behind a call to action, and an undo button. 

About blocks and layouts 

When you open the Klaviyo email template editor, the sidebar will display a selection of block and section options to choose from. Choose between default blocks, which are blank slates used to build emails from scratch, and universal content, which is content you’ve built in other templates and saved for later use. Note that only content built and saved in the new editor is available for use; saved blocks from the classic editor cannot be added to new editor templates. 

In the Default section, you’ll find a selection of both blocks and layouts. Use blocks to add content, like text, images, or buttons. Use layouts (i.e., sections and columns) to group your blocks and configure them. 

Blocks and sections can be cloned, deleted, or saved using the icons that appear when you hover over the block or section. 

To move a block or section, click and drag it. 

Template styles

The main Styles tab contains several styling options that will apply to your entire template. To access a template’s main styles settings, navigate out of any blocks or sections you’re working in using the Done button, then click Styles. 

This is where you can set the look and feel of your email. If you've gone through the setup wizard, this area will already contain some of your brand styles.

Here, you can edit the following settings:

• Email 
  • Template background
    Choose a background color for your template 
  • Background image
    Optionally add a background image 
  • Content background
    Set a background color for the content of your email; this color can be different than the template background, and only spans the width of your email’s content 
  • Width
    The width of your email content (600px recommended)
  • Corner radius, margins, padding, and border
    Add spacing and borders to your template 
• Text & Headings
  Set styles for normal text and four heading styles, then choose a text style from the dropdown menu in any text block to apply it 
• Font
  Select a font, font spacing, size, weight, and color for the text style 
• Letter spacing
  Spacing between each letter horizontally 
• Line spacing
  Vertical spacing between lines of text
• Text alignment
  Choose left, center, or right-aligned
• Mobile
  Choose whether to enable mobile optimization (recommended) or display the same styles and content on both desktop and mobile 
• Other
  • Currency
    Select a default currency for the template, if different than your account settings 

How template styles interact with block and section styles

Your template style settings will be applied to your template first, before any block or section-specific settings are applied. If a block or section’s styles conflict with your template styles, the block and section styles will be used. For example, if you set a content background color in the main Styles section, then set a block-specific background color, the block's background color will be used for that block's area. 

Sections and section styles 

All content in the new template editor is organized into sections. When you create a new template, it will contain one or more sections by default, and you can add or delete sections as needed. 

To open a section’s settings, click the area to the right or left of that section’s content. Note that clicking a block will open the settings for that block, rather than the section containing it. 

Each section has a Styles tab and a Display Options tab. Use the section’s styles to add background images, padding, and other styles to that section. Use the section’s display options to choose which device types and recipients should see the sections. 

Learn more about sections.

The section style settings will be applied to your template after your template styles, but before any block-specific styles. If the template styles conflict with your section styles, section style will be used. If a block’s settings conflict with your section styles, the block’s style will be used. 

Blocks and block styles

Within sections, add blocks to populate your email with content. Most content blocks have a Styles tab, where you can configure the appearance of the block, and a Display Options tab, where you can choose who should see the block and which device types it should display on. The specific styles settings available are different for each block type, but the same display options are available for all blocks. 

Learn about display options or read on to learn about block types and how to use them. 

Text 

Use a text block to add text to your emails. Choose a text style (Normal or Heading 1 - 4) to apply the style settings from your main template’s styles, or customize the text content with the text editor’s settings. 

You can add dynamic content to your text block to personalize the message for each recipient. Learn more about personalization with template tags and variable syntax. 

Add custom code to your template or customize the block’s HTML using the source code button, indicated by this symbol: </>. If you have trouble with custom code in your email, learn how to troubleshoot custom code in templates.

Collapse the Content section or scroll past it to adjust the block’s styles. Choose a background color for the block or text content area and add padding. 

Image 

Use an image block to insert an image into your email. You can add images from the following sources: 

• Image Library
  Add an image that you’ve uploaded in the past by searching your Image Library
• Upload Image
  Upload a JPEG, PNG, or GIF from your device 
• Import Image
  Import an image using its image URL
• Dynamic Image
  Display a custom image for each recipient using a dynamic image variable (e.g., by referencing an image URL stored in a recipient’s event data or as a profile property)

Once you select your image, adjust your image settings, including alt text (a description of the image), a link address so the image is clickable, image width, alignment, and other styles. 

Split

Use a split block to display content in two columns of any width. The content on either side of a split block must either be an image or text content. By default, your split block will use a 50/50 split; navigate to the Split Settings tab to adjust this ratio. Alternatively, you can use the Columns layout to split your content into two or more columns. 

Button 

Button blocks create large links that are more obvious than regular text links and great for emphasizing important calls-to-action (CTAs). Because they're used for CTAs, you'll likely want to use only a few in each email.

At a minimum, fill out the Text and URL fields. Text is what the recipient will see in the button, and the URL is where the visitor will be taken when they click the button. Adjust the button’s appearance, shape, and size using the color, corner radius, and padding options. You can also adjust the block’s font and other styles below. 

Header/link bar 

Use the header/link bar block to add a logo and navigation links that redirect to different content on your site.

When you drag in the block, you’ll be presented with some common header/link bar layouts to pick from. You can select different layouts for desktop and mobile, to better accommodate each device’s size. 

Add any links to the link bar that you’d like. You can set device display settings for each link, and we recommend showing only key links in mobile, since the device size is smaller. 

Once you’ve added your links and logo, apply the finishing touches using the style options below. You can change the font, colors, and spacing for the block. Once it’s ready, preview in both desktop and mobile to see the final product. 

Drop shadow

Use a drop shadow to add depth to your message or emphasize a certain area. Color options for the shadow include light, dark, and darker, and you can set a background color and padding for the block. 

Horizontal rule

Add a simple line between other content blocks. Choose between solid, dashed, or dotted lines. The color, size, and padding are fully customizable. 

Social link 

The social link block is an easy way to add social icons for your Instagram, Pinterest, Facebook, Twitter, and more. Klaviyo offers the standard full-color icons for a variety of sites, as well as simplified black, white, or grey options. 

If you would prefer to use fully custom social icons, use the custom option and upload your own image files. If you go this route, we recommend using images that are 96px square. To maintain spacing and alignment between Klaviyo's social icons and your custom images, use icons that are 50px wide, and both vertically and horizontally centered in the image file.

Drag the icon labels in the sidebar to reorder the icons. You can use the Add Spacer button for more granular control over the space between each icon. 

Spacer

The spacer block adds a customizable amount of space between vertically stacked blocks. To customize the space between blocks that are side-by-side (e.g., in a column), use left/right padding. 

Product 

Use a product block to add recommended items from your store’s catalog. When you add a product block, you will have two options: Dynamic or Static. 

A dynamic feed updates automatically, and is configured via a product feed. To learn more about setting up a product feed, read our article How to use product feeds and recommendations. 

A static product block shows only the catalog items you hand-select in the template editor, and won’t be updated automatically or targeted towards individual recipients. 

With either option, once you’ve selected either the feed or items, you can customize the block’s appearance. Product blocks can show images only, or include each item’s name and price. Scroll through all the options in the product block’s styles tab to fully customize the block. 

Table

Table blocks can help you structure images and text within an email template. The table block gives you the flexibility to add as many columns or rows as you'd like (which will autospace themselves, or you can set a width in the Width setting of the Columns tab). 

When a table block is first dragged into your template, it has one row with two columns. Use the Table Settings tab to add additional rows and columns, then navigate back to the Content tab to configure the table’s content. 

Use the Cell selector section to open a specific cell’s contents. Use the Cell content section to choose between Text or Image content, then add your content. Note that if you switch back and forth between the text and image content types, you may lose content that was previously in that cell; use the undo button to revert your changes. 

To edit the colors, fonts, borders, and layout of the table, open the Table Settings tab. 

Table blocks are also used to display dynamic content, like the details for a list of items in the recipient’s cart. Learn more about dynamic table blocks. 

Columns

There are two different blocks you can use to drag columns into your email templates: the Split block and the Columns layout. With a split block, you’re limited to text and image content in two columns, but can adjust each column’s width precisely. 

With a column layout, you can add any type of content to each column, but are limited to a handful of pre-selected column width options. However, the column layout permits between one and four columns. 

Once you add columns to your template, drop content blocks into each column to populate it. You aren’t limited to just one content block per column: add as many content blocks as you’d like, stacked on top of each other. 

Universal content

You can save blocks or sections in new editor templates for use across any new editor template using the star icon. If you save a block or section, it will appear in the Universal tab of your email template blocks. When you make edits to a universal block or section, you can choose to apply those edits across all instances of the saved content.

Learn more about using universal saved content.

Undo and redo

If you make a mistake while editing your template, use the undo button to revert it. You can also use the Redo button to reverse that change. Your template will autosave throughout your editing session, and the Undo/Redo buttons will log your changes as long as you are editing the template. However, past changes will only be stored during your editing session. If you exit out of the template and come back to it later, the Undo button will be disabled until you make future changes. 

Previewing your email 

Use the Preview and test button to preview how your email will appear in a recipient’s inbox. If you’re building an email in the Email Templates tab, make sure to preview your email based on how the email will be sent. Use the table below to identify the best way to preview. 

Message type	Preview best practices
Campaign List-triggered flow Segment-triggered flow  Price drop flow Date-triggered flow	Click Search for a profile and search for someone who is either part of the list/segment you plan to send to, or could qualify to receive the email (for flows). Select a profile.
Metric-triggered flow	Switch to Event under Preview data source, then select the event that will trigger the flow. If you select a different event or preview by profile, dynamic data may not render correctly.

Additional resources

• Guide to template tags and variable syntax
• Course: Getting started with email design