Tutorial: create a Newsletter template from scratch with WebHat

Hello everyone, today we’ll show you how, in a few easy steps, build a template for your Newsletter campaigns.

First we start with a blank template, then from step 3 of the ‘Step-by-step’ choose the desired list and click on ‘Compose’. In the composition window click on the ‘+’ at the bottom to choose Predefined Models and select the first at the top left.



We start to build the ‘table background’ which will contain all the contents, so click on the ‘table’ ison to create one.


In the properties we insert: Rows: 1, columns: 1, width: 100%, alignment: center, padding: 30.

Schermata 10-2456589 alle 10.08.11


Added the table now begin to give the background color then we click on it with the right button and we move into the ‘Cell -> Cell Properties’

Schermata 10-2456589 alle 10.10.47

In the window ‘Cell Properties’, where it says ‘Background color’ click on Choose to display a color palette.

Schermata 10-2456589 alle 10.12.04

Chosen the color, we will have our ‘table background’. Now we begin to build the actual body of the newsletter. We create another table with these properties: rows: 3 columns: 1, width: 600, align: center.

Schermata 10-2456589 alle 10.13.48

If you want to immediately create the background color for the table move in ‘Advanced’ (always ‘table properties’) and in style, add this string “background: #333333;”. Since it is dark enough after we risk not see much what we write.  so make it more visible by adding text color inside always in style “color: #eee;”.

Schermata 10-2456589 alle 10.14.47

Now we start from the first row, as you know is always indicates a link to the browser version of the newsletter so lets insert our text.


Now select the part you want to be clickable and choose ‘Link’ icon. In the URL  just enter this variable <#? VIEW-ONLINE-LINK ?#> and as Protocol choose <other>

tutASchermata 10-2456589 alle 10.15.44

Now moving on the second line of our table we focus on the content, so we’re going to put an image header and below some ‘news’. Insert another table with the following properties.

Schermata 10-2456589 alle 10.18.09
Now lets insert a picture in the first row, click on the Image icon and then on ‘Browse Server’ to choose those already present on the server.

Schermata 10-2456589 alle 10.19.01

If the server is not present your image just click ‘Upload’ to choose one from your computer.

Schermata 10-2456589 alle 10.19.14

 This should be done at this point.


The next step is to move to the line below and create the table that will contain the textual content.

Schermata 10-2456589 alle 10.20.53
For the design of this newsletter we thought the first line containing only the text and the second two news boxes, so for this reason we will merge two cells in the first row. Click with the right mouse button on the left cell and then ‘Cell -> Merge Right ‘

Schermata 10-2456589 alle 10.21.39
Simply write the text, and the result should be the following

The same thing we do for the two cells below, insert text, images and links.


In the last part we also decided to include the footer with social share, as was done previously with the merge function we can add/remove rows as you like, so we have inserted one below.


For the unsubscribe link is the same procedure as that for the newsletter browser version, the only thing that changes is the variable, which this time is <#? UNSUBSCRIBE-LINK ?#>

Schermata 10-2456589 alle 10.22.33
So the result should be the following


As you can see the procedures are very simple and are repeated often so anyone can create their own email marketing campaign. If you haven’t yet had the pleasure of using our software try the immediately 30-day trial completely free.

Stay tuned!