Creating an email layout

Horizon messages and templates are based on an “Email Layout”.  The email layout includes all the fixed elements of the email, such as a standard header and footer, plus a flexible set of custom blocks to let you create your email content.

Several email layouts are provided as standard, plus you can create your own email layouts if you have a basic understanding of HTML coding.  Horizon doesn’t limit you to any specific layouts or HTML, so the opportunities for creativity are endless.

Creating your own layout

If you’re familiar with HTML coding, you can easily create your own email layouts in Horizon.

1. Log in to Horizon and click "Content", then "Email layouts" on the left.
2. Either start from scratch, or make a copy one of the example layouts and save it.
3. Open your email layout for editing (click the pencil icon), then click the "Source" button in the editor to get the HTML source code.
4. Save the HTML to a local file, so you can work on it in your favourite HTML/text editor.
5. When you're done, edit the email layout again in Horizon, and paste in your amended HTML code..
6. Select your email layout when creating a new email message or template.

Defining the main content area in the layout

It’s important to define the main content area within your email layout.  This is the area within which your users will add their content when using the layout to create an email message.  

By defining this area, it is possible for users to switch from one email layout to another without losing all their content (Horizon will look for similarly named content areas within the old and new layouts, and will preserve that content when the layout is switched).

We recommend doing this by surrounding a block-level element (usually a table) with the following:

<div class="htk_repeatable_container" data-name="your-content-area-name">

... then include the HTML for the initial/default content for the area...

</div>

You'll see that the standard Horizon email layouts typically contain two such areas; one for the main content and one for the “pre header” content at the top-left of the layout.

Defining the editable areas in the layout

Horizon email layouts can contain “editable” sections, which the user can edit when using the layout to create an email message, and non-editable sections that are locked down.  This enables you to build all kinds of mobile-responsive, branded custom blocks that users can add to their messages without risk that they will inadvertently break the HTML code.

Editable elements need to be tagged with an "htk_editable" class, for example:

<td class="htk_editable">The content here can be edited</td>

<td>The content here is fixed</td>

Warning: NEVER nest a htk_editable within another htk_editable - the results will be unpredictable and likely to cause issues in the email editor!

Adding ‘Subscriber Action’ links

In Horizon, special links such as “View in a browser”, “Unsubscribe”, “Update preferences” and “Forward to a friend” are called ‘Subscriber Action’ links.  They are used to create links to specific ‘Subscriber Action’ landing pages that you can manage within Horizon.

To create a Subscriber Action link in your email layout, the easiest method is to:

1. Add a placeholder link to your email layout’s HTML code; for example
   <a href=”#”>View in a browser</a>
2. Create your new email layout in Horizon (see above for details).
3. Edit the email layout, and double-click on your placeholder link in order to bring up the Horizon “Insert / Edit link” window.
4. Select “Subscriber action” as the link type, then select the type of Subscriber Action link that you want to add.
   
5. Click “Save”.

To add Subscriber Action links to your email layout code manually, you first need to know your Horizon subdomain name; this is shown on the Home screen after you log in, and ends with “htkhorizon.com”.

Once you have your subdomain name, you can add Subscriber Action links as follows:

<a href="https://mySubDomain.htkhorizon.com/viewInBrowser">View in a browser</a>

<a href="https://mySubDomain.htkhorizon.com/unsubscribe">Unsubscribe</a>

<a href="https://mySubDomain.htkhorizon.com/updateSubscribe">Update preferences</a>

<a href="https://mySubDomain.htkhorizon.com/forwardToFriend">Forward to a friend</a>

Defining custom blocks

Each Horizon email layout can include custom “custom blocks” that a user can select when creating a message or template.  These custom blocks are defined within the email layout HTML, but are hidden from view until selected by the user.

To create custom custom blocks, first create a DIV container called “htk_rows” to hold them.  We recommend adding this before the closing </body> tag, using a display:none to hide it from view when the user selects the layout to create a new message:

<div class="htk_rows" style="display:none;">

... your custom custom blocks go here...

</div>

Each custom custom block needs to be tagged with an "htk_repeatable" class, and needs a name and description.  For example:

<table class="htk_repeatable" data-row-name="Banner image" data-row-description="Click OK to add a row containing a full width (600px wide) banner image.">

<!-- Custom row -->

<tbody>

<tr>

<td class="htk_editable style=" padding:0px=""><img src="https://placeholdit.imgix.net/~text?txtsize=28&amp;txt=600+x+any+height&amp;w=600&amp;h=200" /></td>

</tr>

</tbody>

<!-- End of custom row -->

</table>

The name and description will be displayed when the user adds a custom block in their message, to help them choose the custom block that they need.

Note: custom block definitions (anything within the htk_rows DIV) are stripped out of the message before it is sent.

Defining colour blocks

If the required HTML coding has been added to a block, it’s possible to style it by clicking into the block and then clicking the paint can (“Style element”) icon:

• Change the background colour of the whole block, or a specific part of it.
• Change the background colour of each call-to-action button.
• Change the height of a specific text area.
• Change the line-height of the text within a specific text area.
• Change the border width and colour.

These styling attributes can be enabled by adding one or more of the following HTML classes to a table cell (<td>) element:

Class	Purpose
htk_colorable_background	Enable the background colour to be edited.
htk_editable_height	Enable the cell height to be edited.
htk_editable_line_height	Enable the text line height (inter-row spacing) to be edited.
htk_editable_border	Enable the cell border colour to be edited.
htk_colorable_border	Enable the cell border width to be edited.

Each editable element can be given a name, using the “data-colorable-name” class.

Example:

<table border="0" cellpadding="0" cellspacing="0" class="htk_repeatable htk_mainrow" data-row-description="Click OK to add an article row with a single full-width column containing the article title, text and a 'Read More' button." data-row-name="Article | 1 column" width="100%">

<tbody>

<tr>

<td class="htk_colorable_background htk_editable_height" data-colorable-name="Background" style="padding:0px;margin:0px;vertical-align:top;" valign="top">

<table align="left" border="0" cellpadding="0" cellspacing="0" class="htk_borderedtable htk_column htk_1column htk_column1" width="100%">

<tbody>

<tr>

<td class="htk_standardtext htk_editable htk_editable_line_height" data-colorable-name="Text">

<h2>Article heading</h2>

Nam et nisi elementum, congue leo vitae, fringilla turpis. Vestibulum placerat suscipit dui, sit amet bibendum velit pretium a. Curabitur ac auctor erat, vitae imperdiet dolor.</td>

</tr>

<tr>

<td class="htk_editable">

<table border="0" cellpadding="0" cellspacing="0" class="htk_button_cta">

<tbody>

<tr>

<td class="htk_button_body htk_colorable_background htk_colorable_border htk_editable_border htk_editable_line_height"><a href="http://www.your__link.com" style="text-decoration:none;">CTA Button</a></td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

Adding a logo to a layout or custom block

As part of the Horizon setup process, a logo is uploaded and saved to the %HOME\logo folder as an image called logo.png (it is automatically converted to PNG format by the Horizon setup process).

You can add a placeholder image to the email layout that will automatically be replaced with the uploaded logo when the layout is used to create a message.  This is achieved by adding an “htk_replaceable_logo” class to the image; for example:

<table class="htk_repeatable" data-row-name="Logo" data-row-description="Click OK to add a row containing your logo." width="600">

<!-- Custom row -->

<tbody>

<tr>

<td class="htk_editable" style="margin:0px;padding:15px;">

<img alt="Logo" class="htk_replaceable_logo" src="" />

</td>

</tr>

</tbody>

<!-- End of custom row -->

</table>

Note: The image src attribute can be left blank, and will be added automatically by the Horizon editor.

Adding images that vary based on the selected Theme

Each email layout can use images that automatically change when the user selects a different styling “Theme”; for example to provide a light theme that has dark-coloured social media icons and a dark theme that uses light-coloured icons.  

This is achieved by creating an "/images" sub-folder underneath the Theme folder, then using a relative "data-src" path in the img HTML tag.  For example:

<img src="" data-src="images/banner.jpg"/>

When a theme is selected, the "banner.jpg" image will be selected from that theme's sub-folder and the src attribute will be set automatically by the Horizon editor.