How does the template builder work?

In this article, we describe the different areas of our template builder, and how to use it.

How Loyall template builder works

By clicking on any email or template in your account, you will enter the edit mode. The entire editor in editing mode is divided into 3 parts.

The Settings Panel

You can place it on the left or right side of the screen.

It contains almost all the functionality of the embedded settings for editing emails.

The Settings Panel is divided into 2 parts: Appearance and Content.


In the Appearance menu, you can get access to the following settings:

General Settings

general settings

In General Settings, you can set up an Email width, 

which is 600px by default. You can set any size between 320 and 900px. 

Set up Default padding, which will be used by default for all new structures added to email from the Content tab or while adding new Stripes (rows).

You can pick the basic Font which will be used all over the email by default unless you change it manually.

In addition, you can set Link color in the email (turn the Underline links on or off),  and default Line spacing for all text elements of the email. Important: keep in mind that this is the only way to set line spacing that will be displayed on mobile devices.

Adapt for Gmail App. As the Gmail application contains built-in functionality for optimizing the email's appearance on mobile devices, the inclusion of this function can help improve the mobile view. 

However, please note that the results may vary on different devices.

Here, you also can set up Background image for a whole email. 



In stripes, you can set up the size of the basic text, the background color of the content, font 

color and link colors in "Header", "Content", "Footer" and "Info Area" separately from one another so that you can have a different type of text in the Footer than in Content for example.




In this manu tab, you can set the default Font, its size, color, boldness and italics for the headers H1, H2 and H3. To set some text as “Heading”, you need to highlight this text a pick the Heading type. 


Header, Footer

To define Stripe (row) as a Header or Footer, you should click on it and set its value in the Settings Panel. 

In these menu tabs, you can set up any setting that will be applied to each Stripe (row) respectively.

Here you can set Text sizeStripe background color and Content background colorFont colorLink color, pick the Stripe (row) Background image.


In this menu, you have the ability to turn on the Highlight hovered buttons, which is disabled by default when creating new emails.

The Button menu allows you to set some parameters that will be used for all buttons in the email by default.

Here you can set Button color, Highlighted button color, Font color, Text style and size, the thickness and italics parameters, and also set Border radius (the default setting is 30px).

Moreover, in this section of the menu, you can set Borders and their colors. You can set them individually for each side...

...or all sides at once.

You also have the ability to change the color of the button’s Border and turn on Highlighted border color.

In addition, in this menu, you can set the Internal padding for buttons, independently for each side.

Info area

It allows you to set up some parameters that will be used all Info stripes (rows) in the email.

Here you can set Text sizeFont color, and Link color.

Mobile view

Here you can control how your email will look like on mobile devices.

You can set Size of Header text, Size of the Content textSize of Footer textSize of Info area text, the Text size of the items for the «Menu» blockText size for headers H1, H2, H3 and set Horizontal alignment for them.

You can also set the text size for the buttons to be the full width of the mobile device.

Content menu

In the Content menu, you can get add into your email StructuresBlocks and Modules - the main elements of the email or template

To create such a "sceleton" of the template, you need to drag a Structure which needed numbers of Containers and then just fill them with content Blocks or Modules. 


You can pick a Structue, that contains 1, 2, 3 or 4 Containers from the sub-menu Structures.

Please note, that you can add more Containers into your Structure after you placed it into your email. Each Structure can contain up to 8 Containers.


Currently, there are 10 basic Blocks, including HTML block that allows you to embed custom code and custom email elements.

For example, Image basic block:

This block can be used for adding images in PNG, JPG ar GIF formats with maximum size of 2Mb.

You can add a picture from your desktop by dragging it or paste a link to an external source. 

More information about Blocks can be found here.


The Modules menu contains previously saved Modules, that you can reuse and add into your email. You can also add your favorite StripesStructures, and Containers into menu Modules to be reused later. In addition to this, you can use our pre-made Modules by dragging them into your emai.

More information about Modules you can find here.

The drop-down menu with all available settings for the selected element of the email will appear in The Settings Panel when using the editing area (see the description below) and switching to a specific element of the email.

Stripes Settings

For Stripes, settings are available in two tabs – Appearance and Data.

The Data tab allows setting your Stripe (row) as a Smart Container. More about Smart containers read here.

In the Appearance tab, you can set Stripe background colorBackground color of contentBackground image.

Also, you can set a common Border of content, or customize each side of each Stripe separately.

In addition, here you can hide some Stripes of the email for the desktop or mobile version if you don’t want them to be displayed.

Below you can specify the type for the Stripe – HTML, AMPHTML, or both.

Structures Settings

For Structures, settings are available in two tabs – Appearance and Data.

The Data tab allows setting your Structure as a Smart Container. More about Smart containers read here.

In the Appearance tab, you can set Background color of structure or Background image.

Also, you can set common Borders, or customize each Border separately.

In addition, here you can hide some Structures of the email for the desktop or mobile version if you don’t want them to be displayed.

Below you can specify the type for the Structure – HTML, AMPHTML, or both.

Containers Settings

For Containers, settings are available in two tabs – Appearance and Data.

The Data tab allows setting your Container as a Smart Container. More about Smart containers read here.

In the Appearance tab, you can set Background color of container or Background image.

Below you can set Rounding using + or - .

Also, you can set common Borders, or customize each Border separately.

In addition, here you can hide some Containers of the email for the desktop or mobile version if you don’t want them to be displayed.

Below you can specify the type for the Stripe – HTML, AMPHTML, or both.

Block Settings

The block settings depend on the Block type. There are different setings for each basic block. You can lear more about basic blocks here.

Editing area

Editing area takes the major part of the screen in edit mode.

It’s the area for editing emails and templates.

You can drag blocks / structures / modules into it from The Settings Panel.

Here you can set the required number of Stripes and their type.

Using the the drop-down menus, you can delete, move, copy, or save any email elements as modules.

You can select any element by clicking on it. After selecting, you will see settings for this particular in The Settings Panel (see the list of available settings for various elements above).

Each Stripe can contain an unlimited number of other elements.

Each Structure can contain from 1 to 8 containers.

Containers can contain an unlimited number of other elements when you place it one under another, but if you want to place an element on the right or left, you would need to use different containers.  

In addition, whenever you are logged-in to the Loyall-dashboard, there is a chat icon so you can contact our support team in case of difficulties. .

Skjermbilde 2020-02-13 kl. 13.57.18

In order to contact us via chat, please click on the orange chat icon in the bottom right corner.

Skjermbilde 2020-02-13 kl. 13.53.39

The top toolbar

The following functionality is placed on the top toolbar (from left to right). logo – allows you to go to the root menu of the emails and templates selection.

Back button – allows you to exit the editing mode and return to the menu for selecting letters in the current folder.

Settings Panel button – allows you to hide or show the side Settings Panel

Settings Panel location switch – allows you to change the location of the Settings Panel to the right or left.

Form with the name of the email – allows you to change the name of the email, save it manually. The drop-down menu on the right part of Form with the name allows you to save the email and exit, save as a new email, save as a new template or leave email editor.


Undo, Redo and Change History buttons – allow you to cancel or redo the change.
Also, you can view the Change History. If you select the previous email version you can see the previous versions of the email before the changes and restore them.


You can restore the previous version of the email by clicking on the green "restore" button or use one of the 3 options in the drop-down menu to the right of the "restore" button: Restore as newpreview in new tab, or export as.

Code Editor Button opens the built-in Loyall code editor, which allows you to make changes directly to the HTML and CSS code of the email.

The Settings button – allows you...

  • to set the subject line of the email (no longer than 65 characters), which will be displayed in the recipient's device before the email is opened and as a heading after opening;
  • to set a hidden pre-header (no longer than 100 characters), which will be displayed in the subject line of the recipient’s device before the email is opened and as a heading after opening;
  • to add empty space after hidden pre-header, which will help to avoid the effect of "capturing" the text from the email and placing it in the pre-header;
  • to add and configure UTM tags in the email. You can learn more about UTM tags here;
  • to highlight your email using Google Promotional Annotations. Please note that this functionality works only in Gmail. You can learn more about this here.

The Preview button – allows you to switch to preview mode in which you can see how the email will look on desktop (on the left side of the screen) and mobile (on the right side of the screen) devices.

In addition, in the preview mode, you can copy the link from the top of the screen...  

... and share it with your clients or colleagues to show what the email looks like at the moment. The "open in new tab" button will open this link in a new tab. 

Also, being in the preview mode, you can proceed to testing the letter (see below).

Test Button – allows you to use 2 types of tests:

  • sending to the mailbox or mailboxes specified by the user

(please note, that for users of the "free" tariff plan it is possible to send test emails only to the mailbox that set in the profile);

  • testing based on Email On Acid technologies.