Lesson 2: Base Theme Design & Landing Page Design

This second tutorial will cover the creation of a base theme design, basically a common layout that we will use in other design layouts. This common file holds the header information, css, and scripts that we’ll use across all layouts. Here’s the code for the base file.

The next file we create in this tutorial is the landing page template. This is where you can see firsthand how easy it is to create a layout for your beautiful custom landing pages. In this tutorial we’ll be creating a very basic looking design and honestly, at this point, it’s pretty ugly. But we’re not trying to win any design awards in this tutorial! That’s up to you! Here’s what our landing page design looks like.

Now you are starting to see how powerful Mautic is. Your organization can have landing pages, email templates and more that look exactly like your site design, and with the ability to host your free marketing automation software on your own website you will be perfectly consistent across every page. Custom landing page designs, finally designers everywhere can rejoice! I look forward to seeing what you create.

Lesson 1: Basic Overview & Configuration

This first tutorial in the Theme Creation 101 tutorial series we look at the overall structure of your themes folder, files, and the necessary core files you will need to create. Later tutorials in this series will be focused on specific aspects such as email marketing templates, landing page design and other details. Here we also briefly explore the config.php file that will be used by Mautic to identify and use your new theme.

Hopefully these short videos will give you the information you need to create powerful themes. You can then use in your marketing automation to give your users flexibility to create dynamic content while adhering to a fundamental base design that maintains a strong brand presence.

Files & GitHub Repository

As we develop this theme together the files we create will be made available via a github repository and you will be able to use this theme as an example when you build your own themes later. You can clone this repo to keep up-to-date as we work through this tutorial series.