Navigate to Marketing > Emails > Templates and click ‘+ New’ to create a new email template.

You have four options here to select from:

In this example, I’m going to show you how to create a new email template from scratch.

Once you select this option, you can choose your editing experience as either the design editor or code editor. Here I am going to select ‘design editor’.

Now you will have a blank template that you can begin editing from scratch. The first step is to name your template so when you are ready to use this template, you know you are selecting the correct one.

You will see you have an example layout titled ‘start from scratch’, you can delete this by hovering over the row and selecting the trash can icon.

On the left hand side menu, you have a few actions:

Add Elements

This action will allow you to add a new element within your template. You can select from various different elements including text, images, buttons and more outlined in the below image.

Below this, you also have the option to add layouts. This will allow you to add your layout that you can then add element/s to. If you select 2 or more, you can add multiple elements to the one section.

To add a layout, choose the option you would like to add to your template and click and drag that layout to a section within your template. You can see in this example, the top section I am only able to add 1 element to it however the section underneath, I am able to add 2 elements.

You can then drag and drop your chosen element into those sections. Here I have added a text element to my single layout section and an image element to each of my double layout sections:

The below will outline each element and how you can use them:

Text

To add text in your text element, you can do this by simply clicking on the element and removing/adding in text of your choice

You can utilise the settings at the top to change the text style, font, font size, colour, highlight your text, bold, italic, underline or strike through your text, add a hyperlink to your text, change the alignment, change the line spacing, add bullet points, add in custom values or trigger links as well as utilising the content AI bot.

You can then also remove or add padding to your text element on the left of the screen by changing the amount of padding at the top, bottom, left or right of the element. This will add different levels of spacing between this element and your other elements in this template.

Image

To add an image to an image element, you can do this by clicking on the image element you added and clicking on the pencil icon on the left hand side menu. You can then opt to create an image using AI or uploading from your media library.

This media library contains any media uploaded directly into your account. By selecting this option, you can add new media here from your device by clicking on the ‘Upload File’ button to the right of the screen or select media already uploaded in your platform.

Once you have selected your media, you will see the images displayed within the element.

You also have the option to add in your image using a URL. You can do this by finding your image/gif online, right clicking on the image and selecting ‘copy image address’ you can then paste this into the ‘Link to’ box in the left hand side menu.

You then have options to add alt text in for that image.

You can also add in a link if you wish where if somebody clicks on this image within your email, they will be directed to the link you add here.

You can also change the width and height of the image as well as adding a background colour behind that image if you wish for a frame of colour to be shown around the image. 

You can also change the alignment of the image as well as add/remove padding.

Button

You may also wish to add a button element to your template. This is really helpful to direct people to an external page to sign up, purchase, or even to watch a video.

Once you have added a button element in, by clicking on the button, you will then be able to edit it.

‘Button Text’ is where you can edit the text that shows on your button.

You can then opt to change the font and size of this text. You also have the option to bold, italic or underline the text as well as change the colour of the text.

You can then change the action that occurs when the button is clicked by clicking on the dropdown and selecting the option of your choice:

URL:

This will direct people to a URL of your choosing when the button is clicked.

Mail:

This will initiate a new email to the email address you input from the person who clicks this button.

File:

You can upload a file that will be downloaded when the button is clicked.

Telephone:

This will initiate a phone call to the number you input from the phone of the people who clicks this button.

Other:

This is a feature that is currently in development that will be covered in another video.

Once you have selected your button action, you can then change the alignment of the button to either left, centre or right. You also have the option to extend the button to be the entire width of the template by toggling on the ‘Full Width’ bar.

You can then change the background colour of the button to a colour of your choice. You also have the option to toggle on a border for the button if you wish, where you can change the colour of the border as well as the width.

You then have the option to change the radius of the button edges. The higher the radius, the more curved the button will be and the lower the radius, the more square it will be. You can change this by either increasing the number or dragging the scale up or down.

You can then change the padding of this element as well if you wish.

Once you have changed any of these settings to your liking, you will see the button displayed in your template.

Logo

You may want to add a logo element to your template. You can add this to the top of your template to distinguish your brand. This element’s settings work just like the ‘image’ element. Once you upload your logo and amend the settings to your liking, you will see it displayed in your template.

Divider

Dividers can be utilised between sections to divide the content. You have the option between choosing from a solid, dotted or dashed line for your divider. You can also adjust the height (thickness) and width (length) of your line. You can also change the alignment and colour of your divider to your liking as well as adjusting the padding if required.

Once you are happy with the settings selected, you will see your divider within your template.

Social

This element allows you to input your social media icons to your email. You have the option to rearrange the order the icons are shown in the template by clicking on the dots to the left of the bar you wish to move and dragging it to the position of your choosing. You can also add an additional icon by clicking the ‘+ Add’ button, or you can remove an existing by hovering over it and clicking the trash can icon.

You can then select which icon style you would like out of the options provided.

You can also select if you would like the display as icon only (this will only show the icons), icon and text (this will show the icons as well as the written text of the name of the social site) or text only (this will only show the written text).

You can then select the ‘Edit Styles’ dropdown which will allow you to change the alignment, font type, size and colour (if applicable) as well as the size and spacing of the icons themselves.

Finally, you can adjust the padding or toggle it off if you wish.

Footer

This is similar to the text element however if you add a footer element, it will contain important information you can include at the bottom of your emails including copyright information, your address as well as an unsubscribe link. You can amend the text in here as you would a text element.

Code

This element allows you to add HTML code to your email template. It is only recommended you use this option if you have HTML code available or you know how to write it. You can add the code by clicking on the element and inserting it into the code editor on the left hand side menu. Once this is entered, you can click save.

Video

This element allows you to add a video to your email template where when someone clicks on this video in the email, they will be directed to the webpage containing that video.

You can select the video type as either YouTube, Vimeo, Wistia or HTML 5.

Once you have selected your video type, you can enter in the URL for the video as well as the thumbnail you wish to show in the email template. You can add this thumbnail as you would an image.

You can then adjust the width and height of the video element within your template to the size of your choosing as well as the play button size and the opacity of that button.

Finally, you can adjust the padding or toggle it off if you wish.

RSS Header & RSS Items

If you are currently using a third party RSS generator, you have the option to enter the code in here. This is really useful if you want to show a live reel of your Instagram feed or a website of your choosing that may regularly change or be updated with new information.

FAQ

Here you can enter in FAQs of your choosing. If you add this element, you can edit the FAQs and answers to be anything of your choosing, just like you would edit a text element. To edit the answer, simply click on the dropdown arrow which will show the answer.

You also have the option to change the alignment of the dropdown arrow to be either left or right, as well as changing the order of each FAQ, adding or removing one and updating the arrow icon on open and on close.

Finally, you can adjust the padding or toggle it off if you wish.

Manage Element:

This tab is an overview of all of your sections, the columns within them and each element within each column.

You can manage your elements here including selecting whether you want an element to show on mobile view or not, if you want it to show on desktop view or not, editing an element or deleting an element. You can also delete or edit entire sections here as well.

Appearance:

This tab allows you to edit the overall appearance of your email template including the background colour, body colour and even mobile appearance settings.

Saved Items:

This is where you can view any saved elements you have in your account. For example, you can save an email footer element or a logo element that you may use in all of your emails. This will allow you to easily add the element to any future templates you create by coming in here and dragging and dropping that element to the place in the template of your choosing.

Additional Settings

You can also very easily reposition the order of each element by hovering over the element and clicking the blue bar to the left of the element and dragging it to where you would like to move it to in the template.

Within each element, also have the option to action a few settings regarding that element.

The first option is the edit icon. This will bring up the edit tool to the left of the screen for this particular element.

The second option is the clone icon. By clicking this, you will clone this element. This is very helpful if you want to duplicate an image or certain text within the same template.

The third option is the mobile icon. By clicking this, you can determine whether that element is visible in an email on a mobile device or not. If you have this on, the element will show when the email is viewed on mobile, if you have this off, it will not be seen when the email is viewed on mobile.

The fourth option is the desktop icon. By clicking this, you can determine whether that element is visible in an email on a desktop or not. If you have this on, the element will show when the email is viewed on a desktop, if you have this off, it will not be seen when the email is viewed on a desktop.

The fifth option is the save icon. If you click this, this will save that element in your account so it can be readily available to be used in any template. This is helpful for elements like logos or footers that you may want to use across all of your email templates.

The sixth option is the trash can icon. By clicking this, you will delete that element from your template.

Once you have created the template to your liking, you have a few additional actions you can take from here. In the top right corner of the page, if you click the three dots, you will be able to see these actions:

The first option is ‘Test Email’. This gives you the option to send a test email using this template so you can see how it will look on your device. Simply enter in the from email address, the to email address and the subject line of the email and send.

The second option is ‘Preview Template’. This will open up the preview view for you to see how your email will look in both mobile, tablet and desktop mode.

The third option is ‘See Version History’. This allows you to see previous versions of this template so if you have made changes to a template you no longer want, you can restore the template back to a previous version.

The final option is ‘Settings’. This allows you to add in details to the template like the ‘From Name’ (which is the name this email will come from), the ‘From Email’ (which is the email address the email will come from), the ‘Preview Text’ which is the line of text you see as a preview underneath the subject line before you open up an email and ‘Email Subject’ which is the subject line of the email that will be seen when it is sent out.

Once you are happy with all of these settings, you can click ‘Save Template’ and your template will be saved and in your account.