When you click on the Edit Content window for any email template supported by our drag-and-drop editor or create a new template selecting the drag-and-drop editor option, you will see a right-hand navigation bar with the following tabs: Blocks, Styles, and Preview.
To get started building a new template, the Blocks tab will open a window with all available block options.
Edit, Clone, Delete, Save, and Move
If you click on a block in the left-hand sidebar, you will be able to drag it into your template. Once you drag and drop a block, you will have the option to edit, clone, delete, save, or move your block around.
Alter the text, font, image, styling, etc. of a block.
Duplicate a block.
Delete a block from your template. This cannot be undone.
Save a particular block for later use. Learn more about saved blocks.
Move your block around within an email template by clicking the below icon and dragging the block.
The Styles tab on the main navigation bar will reveal several styling options that will apply to your entire template.
Here, you can edit the following:
- Email Settings
Template width (though we highly recommend keeping this at 600px to ensure your emails are optimized for mobile), background color, border, padding, and margins
- Text Settings
Font type, font color, font size, and line height
- Link Settings
Text color, font weight, and text decoration
- Heading Styles
Set template-wide styles for Heading 1 through Heading 4
- Mobile Settings
Enable and adjust mobile optimizations
- Background Settings
Set and configure a background image
When you click on a specific block, a new navigation menu will appear on the right-hand side. Here, you will see a Block Styles option.
After navigating to the Block Styles tab for a specific block, you will have the opportunity to edit a range of styling options pertaining to that particular block including borders, colors, padding, margins, etc.
A text block can be used to insert any text into an email. The text block allows you to customize the text that you use in your email.
If you need to edit the source or HTML code of this block, click on the Source button in the editor.
In addition to the common block styles each block has, text blocks have the following extra options:
Specify font color, text alignment, font family, and font size if you'd like to override the overall template styles established in your template's Styles tab
- Font Weight
Choose whether your text is bold or not
- Line Height
Choose how tall you'd like the spaces between your lines of text to be
Select a background color for the text itself
An image block is used to insert an image into your email. Images can be static or dynamic and will be optimized automatically for all device sizes.
There are several different ways to add an image to the image block:
- Drag an image or images from your computer into the template editor
If you drag one or more images from a folder on your computer into Klaviyo's template editor, you will automatically create an image block for each image
- Image URL
Click Import from URL and then paste the image's URL
- Use an image from your library
Click on the Library tab inside of the image block and choose an image that's already been loaded into your library
- Use an image from your catalog
If you have synced your Klaviyo account with an ecommerce platform, you can browse your product catalog for a product image to use in your template
If you have an image saved as a file on your computer that you'd like to use, choose Browse to find the image on your computer and load it
If you would like to dynamically populate an image within a flow email, choose this option
Once you select your image, you will be prompted to select:
- Alt Text
This is the text that will be displayed in the unlikely event that the image doesn't render (for example, if a recipient has their inbox set to block images by default).
If you would like to bring recipients to a certain page when they click an image, include the URL in the link area.
- Image Width
Specify the maximum width of your image. In most cases, this should match the width of the template you're using.
Choose if you would like your image to be left aligned, right aligned, or centered.
- Stretch Image
If your image is narrower than the width of the template, stretching it will ensure that it covers the full width of the template.
In addition to the common block styles each block has, image blocks have the following extra options:
Choose the background color of the Image block
Choose the width, style, and color of the border around the image (if you'd like to include a border)
Choose the amount of padding in pixels you'd like around the image
Learn moreRead more about inserting images into templates.
Button blocks create larger links that are more obvious and great for emphasizing important calls to action. Because they're used for CTAs (calls to action), you'll likely want to use only a few in each email, at the most.
To insert a button:
- Drag the block to the section of your email where you'd like to place the button
- The default button text will read "Make Your Purchase"; you can edit this text under the Content section within Block Styles
- To add a link to your button, simply add the URL to the Link URL field within Block Styles
- Under Format, you can choose the alignment of your button; you can also fit the button to the text you added (vs. stretch the button's width to the full width of the template), if you'd like
Styling options for the Button block:
- Border Radius
You can decide how square you'd like the border to be -- the higher the number, the more rounded the button will be
Choose which color you'd like for the inside of your button
- Drop Shadow
This option will add a shadow to the bottom of the button, giving it a 3D effect
- Text Color
Choose which color you'd like to make the button's text
- Font Family
Choose the font for your button's text
- Font Size
Choose how big or small would you like the button's text to be
- Font Weight
Choose if you want the button's text to be bold, italic, etc.
- Padding Top/Bottom
Choose the amount of padding in pixels you'd like on the top and bottom of the button
- Padding Left/Right
Choose the amount of padding in pixels you'd like on the left and right of the button
Table blocks can be very useful as you look to 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 also auto-space themselves). When a table block is first dragged into your template, it will auto-populate three columns and three rows:
Here, you can see that we kept the default three columns, but removed the first column header completely and renamed the second two columns as "Item" and "Price."
Now our table will look like this:
To populate your table, go to the Rows tab and start filling in each column with information. In the first column, let's say you'd like to add a picture of a product. To do this, go to the Rows tab, click on Column 1, and then toggled the cell to Image. Here, you can set the alt text, link URL, max image width, and alignment of the image. You can then choose which image you would like to populate in the first column of this row.
Here, we've added an image to Column 1, and filled in text for Columns 2 and 3:
To edit the colors, fonts, borders and layout of the table, click on the Block Styles tab. There are a lot of options so you can control precisely how your table looks.
Header/Link Bar Blocks
You can use the template editor’s header/link bar block to add a logo and/or navigation links that redirect to different content on your site.
When you drag in the block, you’ll be presented with 4 common header/link bar layouts to pick from. Choose your layout, insert your content, and then refine the look and feel using the Block and Block Styles menus.
First, drag in the header/link bar block and select your layout. If you haven't inputted your default header links when going through the Setup Wizard, you will see placeholder values populate.
Next, in the Block menu, upload your logo image and edit the link text.
- If you need additional links or would like to use images as links, you can add them using the +Add Link or +Add Image buttons in the menu. If you add an image, you'll have the option to set the max width.
- If you want any of your links to be buttons, add a background color in the Block menu
- In the event you want different desktop and mobile logos, set your logo to “Show on Desktop" only. This will cause the menu to expand and offer an additional import section for mobile logos
Finally, in the Block Styles menu, add the finishing touches. You can use this area to change the background color, link padding, and layout. You can also create distinct mobile layouts using the Mobile submenu.
Social Link Blocks
The social link block is an easy way to add in social icons for a number of different sites including Pinterest, Facebook, Twitter, and more. First, drag the social links block to the footer of your email.
Dragging the block in will populate one black social icon as a default. To add additional social icons, click Add Button. If you would like to add spacers between each icon, click Add Space.
If you have a set of social icons you use on your website, you can use the Custom option and upload your own icons. If you go this route, we recommend using icons that are between 24px and 64px tall. You will also be able to set a max width within the template editor. To center your social icons, click the Block Styles tab on the left sidebar and choose to align center.
There are two different blocks you can use to drag columns into your email templates: the Split block and the Add Columns to Email block.
Add Columns to Email Block:
A split block will only divide your email into two columns, whereas adding columns to your email will allow you to choose from a variety of different options.
The Populate from Feed option is great if you would like to display trending, bestselling, or recommended products -- these feeds can pull from either your entire product catalog or a specific category. To display personalized product recommendations, make sure the Use Personalized Recommendation option is toggled to Yes.
If you toggle to Select from Catalog, you will be able to hand-pick specific products from your ecommerce catalog, which is synced with Klaviyo. You can then rearrange the order of these items and customize the text that is displayed.
You can customize the layout of product blocks in the Block tab, including the number of items displayed per row, the max item height, and what information about the product is displayed. You can also choose to add a custom description.
In the Block Styles tab, you can change the font, padding, button color, and various other style options.