LP1: A free Mautic landing page theme

LP1: Free Mautic landing pageLP1 is a free Mautic landing page template, built using Bootstrap 4 (fully responsive). Along with the landing page template, the Mautic theme file also includes form styles! So your Mautic form will blend right in with the rest of the landing page design – no CSS modifications required.

The original landing page was created by Start Bootstrap – I took the code (MIT licensed) and adapted it for Mautic. Now you use Mautic’s built-in landing page builder to easily change text and images, move and delete sections, and add your own opt-in forms.

Please note: this landing page was not originally designed for use with Mautic. This means there are a couple things that can’t be edited using Mautic’s drag and drop builder (such as background images). But don’t worry – I show you how to add your own background images later in this post.

Installing your free Mautic landing page theme

(Not ready to install? Scroll down to try the demo!)

First, download the LP1 Mautic theme file. Then install just like any other theme. If you need help, follow these instructions or watch the getting started video below:

  1. From you Mautic dashboard, click the cog/settings icon in the top right and choose “Themes”.
  2. In the top right corner you have the ability to upload a new theme. Click the “Browse…” button, and choose the lp1.zip file that you just downloaded, and press “Install”.
  3. That’s it. Once installed, you should receive a little notice saying “Theme lp1 has been installed!”

Now when you go to create a new landing page, you should see LP1 as a new template option. Select it, and open up the builder.

Try the demo

The theme is completely free, but if you’d like to give it a try before you install, you can use the demo here:

>> Innotiom Demo Login
Username and password: demouser

The demo allows you to create and edit landing pages and forms – but keep in mind this is for testing purposes only. Nothing in the demo account is permanent!

Getting started video

In this video, I’ll walk you the process of installing this free Mautic landing page, and show you a few of your options for customization. You’ll also see how easy it is to add a great looking form to your landing page.

 

This theme is built on Bootstrap, with two columns built in. If you’re familiar with the framework, feel free to bring in Bootstrap classes when editing existing theme slots using code view, or adding new “codemode” slots.

Each section can be moved up or down or deleted. For the non-image section backgrounds, you can also change the background color. Every section has a few slots included by default. You can modify or delete these sections, and also drag in as many new slots as you’d like.

If you’d like to include a form in your landing page, I recommend using the LP1 form style, included in the theme. Note that it’s designed to be used on a darker background, such as the demo background image or a dark color.

How to change the background images

Option 1: Edit the landing-page.css theme file on your server

If you’ve already installed the theme and can access the files of your Mautic install on your server, you can just edit the landing-page.css file with your background image URLs. Refer to step #2 in Option 2 below.

When you’re done updating the css file, make sure your clear your Mautic cache to see your changes (see step 1 of this doc for help).

Option 2: Create your own, customized copy of the theme

This option is recommended if you plan on making additional theme customizations (such as css style changes or modifying the landing page layout). It’s also the easiest option if you do not have access to the theme files once you’ve installed the theme – such as when using a free Mautic Cloud account. Follow these steps, or watch the video below.

First, add your background image URLs.

  1. Unzip the theme file, lp1.zip – navigate to the css folder, and open up landing-page.css in your text editor.
  2. Look for the “intro-heading” and “banner” classes – you’ll see the background images there.
  3. Replace the URLs with URLs for your own background images, and save the file. It should look something like this (for the intro-heading class, for example):
    Changing the landing page intro background image

At this point, feel free to make any other changes to the theme file – css, page layout, etc. When you’re finished, the next step is to create and upload your copy of the theme.

  1. Open the config.json file, and change the name from “LP1” to something that makes sense for you. In the video below I use “LP1 – New BG”, but you can name your theme whatever you like. You can also change the theme author and URL if you’d like. Save and close.
  2. Re-zip all of the theme files. Do not include the containing folder (lp1).
  3. Upload your theme just like you would any other theme, and you’re done!

[Video coming very soon!]

Download LP1 – free Mautic landing page theme

I hope you enjoy using this free Mautic landing page theme! As you can see, you don’t need to give me your email address in order to download it. But if you’re interested in getting The Unofficial Mautic Newsletter – and being notified of new free and premium themes that I release – feel free to sign up below!

Feedback is welcome and appreciated – you’ll find me on Twitter @chris_calabro or in the Mautic Slack channels, @chriscalabro.

No Email Address Required to Download

Download the theme

Get Notified About New Themes

You’ll get new theme notifications, plus my newsletter.