Follow

Create Templates

Create Email Templates

You can create great looking, personalized emails for your campaigns and experiences with the email template editor. The intuitive drag-and-drop interface is easy to use without requiring any knowledge of HTML and produces responsive design email templates that adjust automatically to a reader's screen size, so they look good on mobile and desktop environments, and everything in between. The editor's multi-feature design enables you to customize your email with personal touches and preview your design in real time. Use your created templates in campaigns and experiences to send personalized emails to your users.

Editor Overview

The editor is divided into three main areas:

  • The button bar at the top.
  • The message editing area on the left.
  • The properties panel on the right.

You drag and drop a content element from the properties panel onto the message editing area and then edit the element's properties. The button bar at the top of the editor enables you to preview how the email will appear to your users when they receive the campaign on a desktop or on a mobile device, send a test email message, and save the template. Click on the far left of the button bar whenever you want to return to the template list.

Note: Be sure to save the template before you click in the button bar to avoid losing your changes.

The properties panel contains three tabs that let you define the content, structure, and body of your email template. These tabs are described below.

Use the CONTENT tab to drag and drop new content elements, such as a button, image, text block, divider, or social media link, to the message editing area. You can change content properties and edit text.

  • Content Properties—When you click on a content element inside the message editing area, the content panel switches to content properties mode so that you can change the settings of that particular content block.

    The Content Properties area changes depending on the selected content element. For example, if you select a button, you see a number of tools to help you style the button (width, background color, text color, alignment, roundness of the corners, padding around the text, and so on) and link it to your desired action (such as open a web page, send an email, make a phone call). When the properties panel is longer than the height of the screen, a scroll bar appears on the right side.

  • Text Edit—If you click inside a text content block, the text editor toolbar appears in the editing area and provides access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, and so on.

    Special links in the text editor toolbar lets you set the unsubscribe link. If you want to expand the flexibility of your HTML email templates, you can add merge tags for MD5 hashing, user credentials, and URL-encoded strings as you create the templates. Kahuna supports handlebar merge tag syntax. See Merge Tags.

    Tip: If you set the Font Family to Global Font, the text inherits the font family selected under the BODY tab. This allows you to change the font family for multiple elements at once just by changing that property in the BODY tab.

Use the STRUCTURE tab to create different sections of the message using structural elements.

 

Structures are rows that organize content in a way that is different from the rows that are preceding it and following it. For example, you might need a single-column structure with an image to introduce your online store’s new promotion and a two-column structure below it to display some of the store’s best selling products. Whenever you need to switch to a different number of columns, that’s when you introduce a new section by using the STRUCTURE panel.

Selecting a row switches the properties panel to the row and column settings. When a row contains a multi-column structure, there are many settings, including background, padding and borders, that you can control at the individual column level.

 

 

 

Use the BODY tab to modify general settings that apply to the entire message.

Content area width is the width of the area where you drop content blocks. Set the width to 600 pixels or less (the maximum used on larger devices). When the device’s screen is smaller, the message adjusts.

Background color sets the message background color. This setting is effective only for rows (and columns) where you have not specified a color. Otherwise, the background color specified for that content structure is used.

Content area background color is the background color for the content area. This setting is used only for rows and columns where you have not specified a color.

Default font is the default font used when another font family has not been specified. This setting affects all text set to use the global font. Always use a basic font that is supported on all platforms, such as Arial or Verdana.

Link color is the link color. This setting affects all text links set to use the default color.

Create a Template

The following procedure shows you how to create a template for an email campaign.

  1. From the left navigation pane, click Manage > Email Templates.
  2. Click the Create button at the top of the page to open the editor.
  3. Click the BODY tab and set the global fonts, background, content area, and link color you want to use in your template.

    Note: You can customize the fonts and colors for specific elements when creating your message.

  4. Click the STRUCTURE tab, select the row configuration you want to use, then drag and drop the structure into the message editing area.
  5. Click the CONTENT tab to add text, images, buttons, dividers, and social media icons.
    1. To add text, drag and drop the TEXT element into the message editing area. Use the text editor toolbar to configure your text, and add merge tags and special links. For details about merge tags, see Merge Tags, below.

    2. To add an image, drag and drop the IMAGE element into the message editing area.

      Click Browse to open the File Manager, then either select an image from the list or click Upload to upload an image from your file system. You can also drag an image from your desktop and drop it into the box at the top of the File Manager.

      The recommended image size depends on how large the space is where the image will appear and the orientation of the image. An image should be no more than 800 pixels wide.

      You can calculate the appropriate image width from your BODY width. The allocation of that width is determined by the columns in the assigned STRUCTURE. For example, if the BODY width is set to 600 and you apply a STRUCTURE of four columns, the images in that STRUCTURE need to be at least 150 pixels wide. Kahuna recommends that you keep individual images under 1MB.

      Note: If you have uploaded templates to Kahuna from a third-party application, such as MailChimp, all images from that template are uploaded automatically to the image list in the File Manager.

      Tip: You can edit an image that you dropped in the message editing are by clicking the Edit image button in the Content Properties area.

      Dynamic images

      You can add dynamic images to your templates; images that are dynamically loaded based on merge tags included in the link to the file, such as a product SKU, a user name, a customer ID, a date and time, and so on. The merge tag in the URL is replaced with actual value at the time the email is sent.

      To add a dynamic image:

      1. Add the image in the desired location, then click the Edit image button in the Content Properties area.
      2. Turn on the toggle to embed a dynamic image.
      3. In the Dynamic Url field, add the merge tag and any additional characters to generate a complete image file location. For example:

        https://mylocation/images/?imageBanner={{firstname}}

        where https://mylocation/images/?imageBanner is the base URL and {{firstname}} is the merge tag that contains the image file name.

      Note: The Dynamic URL can be passed entirely within a merge tag, like {{add_to_cart_product_image_url}} instead of https://mylocation/images/{{add_to_cart_product_SKU}}. You can omit the protocol or other URL related items.

      When you create your email campaign in the Campaign Creator or in an Experience, you map the merge tags to Kahuna user attributes or event properties.

    3. To add buttons, drag and drop the BUTTON element into the message editing area. Click in the button content block, then in the Content Properties area on the right, configure your button. You can add the link action, URL, button width, button color, text color, and so on.

    4. To add a divider between the rows (sections) in your message, drag and drop the DIVIDER element to the message editing area. Click in the divider content block, then in the Content Properties area on the right, configure the divider. You can change the width, color, alignment and spacing of the divider.

    5. To add social media links, such as Twitter, Facebook, and so on, drag and drop the SOCIAL element into the message editing area. Click in the social content block, then in the Content Properties area on the right, configure the social media links. You can add additional social media icons, if needed.

    6. To add custom HTML code, drag and drop the HTML element into the message editing area. See Custom HTML below.

  6. To see how your email campaign will appear on a mobile device and on a desktop, click the Preview button at the top of the editor.

  7. To send a test email message to one or more recipients, click the Send Test button at the top of the editor.

  8. To save your email template, click the Save button at the top of the editor.

Merge Tags

Merge tags are codes that allow you to personalize your email messages. For example, if you want to greet each of your email recipients by first name, you can add the merge tag for first name to your message. You can select a merge tag from the Text Editor toolbar or add a merge tag directly in your text body using handlebar merge tag syntax. When you create your email campaign in the Campaign Creator or in an Experience, you map the merge tags to Kahuna user attributes. See Email for details about merge tags and how to map them.

Select a merge tag:

  1. Click inside the text content block where you want to add the merge tag. The text editor toolbar appears in the message editing area.

  2. Click Merge tags to open the Insert merge tags dialog box. You see a list of all the merge tags available for your namespace.

    Note: The available merge tags are based on the attributes you have set in the Kahuna system. The merge tag syntax does not support spaces. Therefore, if an attribute name contains a space, Kahuna converts the space to an underscore (_) in the merge tag name. For example, if your system contains the attribute user name, the merge tag name is user_name. If an attribute name contains any other unsupported character, such as a dash (-), the merge tag is not shown in the list of available merge tags.

  3. Click the merge tag you want to use. The Insert merge tag dialog closes and the merge tag is inserted into the text content block.

Add a merge tag using handlebar merge tag syntax:

  1. Click inside the text content block where you want to add the merge tag.

  2. Type the merge tag directly in the text block using correct handlebar syntax. For example, to add the merge tag that will be replaced by a user’s email address in the email campaign, type the following:

    {{k_cred email}}

When you create your email campaign in the Campaign Creator or in an Experience, you must map these merge tags to Kahuna user attributes. See Map Kahuna Attributes.

Custom HTML
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments