Creative template – Create a Header

In this part of the tutorial, we create the header of this example email. Download the free header image package that comes with this tutorial and you are ready to go!

Download the needed header images

Step 3: Adding a lay-out

Creating the header we start with adding a lay-out. A lay-out consists of one or multiple columns that fill the width of the email (in HTML you may know this as a row). For this header we use a one column lay-out, so please select this lay-out type from the lay-out selector.

Add lay-out

Step 4: Header images

This particular header only uses images. You can also use text and buttons in your headers.

Drag & drop an image block to the just created lay-out and add the image “header_foreground”. In this case the image should be in the left and right bottom corners, therefore we only add 30px padding to the top of the image. Never forget to include an alternative text because of loads of email clients do not automatically download images.

Add foreground image

Now you can add another image block and insert the Webpower logo. The logo is way too large at 100%, so we set the width to auto. Webpower then uses the images’ actual size. Usually a logo is linked to a web page, therefore we fill-out the link URL and click name. And finally we give the logo 20px padding on all sides.

Add logo

Step 5: Background

We now add the background image to the header. To do so, click the gear-wheel in the right corner of the lay-out, here you can change all lay-out settings. For this header we only add the background image and set it to mail-width. Don’t forget to add the alternative text.

Add background image

Step 6: Title

And finally we add the title to the email. You notice that we add a text block to the lay-out which contains the background image, to make sure the background image is not behind the text, we add a background colour to the block. You notice here how the pre-set fonts come in handy, with only one click, your text has the correct styling, off course you still need to select the placing. In this case we want the text in the middle.

Add title

Your header is ready

Now your header is ready, lets go on to the body of the email!