About the Drag-and-Drop Editor

When you click on the Edit Content window for any email template supported by our 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.

  • Edit
    Alter the text, font, image, styling, etc. of a block. 
    2017-05-01_15-04-29.png
  • Clone
    Duplicate a block.
    2017-05-01_15-05-32.png
  • Delete
    Delete a block from your template. This cannot be undone.
    2017-05-01_15-06-40.png
  • Save
    Save a particular block for later use. Learn more about saved blocks.
    2017-05-01_15-07-52.png
  • Move
    Move your block around within an email template by clicking the below icon and dragging the block.
    2017-05-01_15-09-12.png

Template Styles

The Styles tab on the main navigation bar will reveal several styling options that will apply to your entire template.

2017-05-01_15-16-21.png


Here, you can edit the following:

  • Email Settings
    Template width, 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

Block Styles

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.

2017-05-01_15-30-29.png

Text Blocks

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.

2017-05-01_15-33-44.png


In addition to the common block styles each block has, text blocks have the following extra options:

  • Font
    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
  • Background
    Select a background color for the text itself

Image Blocks

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 four different ways to add an image to the image block:

  1. Image URL
    Click Import from URL and then paste the image's URL
  2. 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
  3. Browse
    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
  4. Placeholder
    If you would like to dynamically populate an image within a flow email, choose this option

In addition to the common block styles each block has, image blocks have the following extra options:

  • Background
    Choose the background color of the Image block
  • Border
    Choose the width, style, and color of the border around the image (if you'd like to include a border)
  • Padding
    Choose the amount of padding in pixels you'd like around the image

Learn more

Read more about inserting images into templates.

Button Blocks

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:

  1. Drag the block to the section of your email where you'd like to place the button
  2. The default button text will read "Make Your Purchase"; you can edit this text under the Content section within Block Styles
  3. To add a link to your button, simply add the URL to the Link URL field within Block Styles
  4. 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
  • Background
    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

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:

2017-05-01_15-49-31.png


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."

635877


Now our table will look like this:

635892


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. You can then choose which image you would like to populate in the first column of this row.

2017-05-01_16-07-27.png


Here, we've added an image to Column 1, and filled in text for Columns 2 and 3:

635890


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.

Button and Link Bar Blocks

To create an email template with a row of buttons in the header, or footer, that link back to the categories on your site, you can use the button/link bar block in Klaviyo.  

For example, say you want a header like the one below that features: "Home," "Mens," "Womens," "Kids," and "Account."

635894


First, drag over the button/link bar. To make it look like a row of links, you'll make three changes:

  • Set the button to be the same color as the background of the block
  • Set the color of the button text (in Block Styles on the left) to be the color of the links you want
  • Add a button for each link you want using the block section on the left

You should now have something that looks like this: 

635896


Finally, change the text and links to be the format you want and to point to the right place. You can explore the options in Block Styles to change the font and padding, as well as center your text, etc.

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.

2017-05-01_16-21-05.png


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. To center your social icons, click the Block Styles tab on the left sidebar and choose to align center.

Columns

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. 

Split Block:

2017-05-01_16-37-03.png


Add Columns to Email Block:

2017-05-23_11-35-28.png



2017-05-01_16-39-47.png


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.

Product Blocks

When you drag a product block into a template, you will have two options: Populate from Feed or Select from Catalog.

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.

2017-05-23_13-06-07.png


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.

2017-05-23_13-33-37.png

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.

Was this article helpful?
0 out of 2 found this helpful