Introduction to Theming Course

Mautic comes with some great email and landing page templates right out of the box. Of course, they are fairly generic and if you want your content to really stand out, you may want to create your own templates.

In this short (30 minute) course, we’ll show you how to build your own templates from any html layout. We’ll start with a simple overview and move through to a complex, fully responsive layout that works on every platform and device (including Outlook 2003, 2007 and 2013). You can download the templates used in this course below the video. To get the most out of this course, you should download the templates and follow along in an html editor (notepad++ for Windows and Text Wrangler for the Mac are two free options).

Outline:

  1. Introduction to the Course
  2. Downloading Templates from Mautic
  3. Building a Landing Page Template Part 1
  4. Building a Landing Page Template Part 2
  5. Introduction to Email Templates
  6. A Simple Responsive Email Template
  7. A Complex Responsive Email Template

I strongly recommend you read and bookmark the developer documentation for theming as you take this course.

Best Practice Note: Thoroughly test every aspect of ONE landing page or email built with your custom theme BEFORE you build more. Replacing a theme with a new version does NOT update the landing page or email.

Video

Tip: Hover of the bar on the right side to see the playlist.

Downloads

Really Simple Template

Complex Email Template 1.3

(A previous version of this template was missing the base.twig.html and message.twig.html files. These files are necessary for displaying the unsubscribe page and is required for every template.)

Please note: this series was recorded using Mautic 2.5. Layout and functionality may change in future versions.

March 2017 Update

With the release of Mautic 2.7 a user can now drag and drop multi-column sections. You must add the following CSS to the template file.

<style type="text/css" media="only screen and (max-width: 480px)">
 /* Mobile styles */
 @media only screen and (max-width: 480px) {
 [class="w320"] {
 width: 320px !important;
 }
 [class="mobile-block"] {
 width: 100% !important;
 display: block !important
 }
 }
 </style>

Watch an Update Video

Adding A Favicon To Your Custom Theme

 

Big thanks to community member @chriscalabro for the tip on litmus.com templates.