Now, that Mautic gives us the option to create super-responsive email templates, you might want to flex your design muscles and create your own. All you need is a bit of MJML language knowledge and a bit of affinity to design. MJML is super-easy, it is based on HTML and will allow you to create beautiful responsive email templates.

Do you just want to download this template, you can skip the mind-tingling article and jump to the good stuff.

In this tutorial I’ll show you how to create a template from scratch, with a little html knowledge. We will use a free online editor to do so.
Head over to https://mjml.io and click on the try it live link to enter the editor:

The files

The newly created Mautic templates have to be uploaded in a zip file, just like before. The files should be placed like this:

config.json
thumbnail.png

ASSETS
- img1.png
- img2.png
- img3.png

HTML
- email.mjml
- base.html
- message.html

We will work on the email.mjml only. The rest you can just take from a previous html file.

Your config file should have the following lines:
Note, that the bold line is new. It allows you to load your templates into the Grapesjs builder.

{
  "name": "Template name",
  "author": "Your name",
  "authorUrl": "https://yourdomain.ltd",
  "builder": "grapesjsbuilder",
  "features": [
    "email"
  ]
}

My recommended thumbnail size is 440×640, but you are free to experiment around. Images and other assets should be added to the assets folder.

The structure

In order to create responsive newsletters, we’ll need to organise the template into simple blocks that change shape, size and rearrange themselves based on the reader’s screen options. If we use mjml wisely, it will translate our template into beautiful html code.

Our end result should be like this – desktop view and responsive view:

MJML is similar to HTML, so we start our code in a similar way:

<mjml>
<mj-head>
</mj-head>
  <mj-body>

Instead of <style> you need to use <mj-attributes> to define your style components.
Webfonts can be used with the <mj-font> tag. You can learn more about Google webfonts here.

<mj-head>
  <mj-font name="Audiowide" href="https://fonts.googleapis.com/css?family=Audiowide:400,500,600,700" />
  <mj-attributes>
    <mj-all font-family="Audiowide" />
YOUR STYLE GOES HERE
  </mj-attributes>

The body of your template will consist of content blocks. If we would try to make an x-ray of our template it would look like this:

Each row of content is a section devided by the mjml section tag:

Within the sections you can add the content blocks. By adjusting the size you can shape the design.
You can use the mjml column tag as follows:

The content

Inside the columns you can add text, buttons using the following tags:

<mj-column>
  <mj-text>
     Hello World!
  </mj-text>
  <mj-button href="#">
     Promotion
  </mj-button>

</mj-column>

Images should refer to the assets folder in the following manner:

<mj-image src="{{ getAssetUrl('themes/'~template~'/assets/mountains.jpeg', null, null, true) }}" alt="Mountains" align="center" border="none" width="400px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>

When I edit live, I usually upload my images to the web to a temporary folder, allowing me to use the editor in a WYSIWYG mode. At the end, just replace the right path.

There are many different other blocks you can use, I suggest you head to the mjml documentation, and read it through a little bit.

Once you are done, you need to save your files in a zip, and upload to Mautic in the regular template upload section.
Good luck to you!

Download this template for free!