Onboarding: Landing Pages

Landing Pages are a powerful feature that enable you to do more than just publish content quickly and easily. Using landing pages can give you insight to what kind of content your contacts are interested. Using tracking, forms, and other communications mechanisms like dynamic content and focus items on your landing pages can help you get more information about your contacts. 

Landing Page Basics

Themes

Landing Pages - Themes

Mautic includes several themes out of the box. These themes are all editable, so you can choose your own colors, images, styles, and more. Some of these themes are available for a combination of emails, landing pages, and/or form styling. The “Fresh” themes are all created specifically for landing pages, with specific areas designed to contain forms.

We recommend that each customer create a custom theme, making branding more consistent with less effort on each new landing page. To get started with creating your own custom theme(s), please use our Introduction to Theming course.

Users may also select the Code Mode theme to create landing pages entirely in HTML.

Note: Once you’ve built a landing page, changing the theme will wipe out the content. We recommend creating a new landing page with the theme you want to switch to, then re-produce your content.

Sidebar Options

Landing Pages - Sidebar

Title: The name displayed in your lists of landing pages, either on the item page or in the tokens menu in case you’d like to add a link to a particular page in an email. We recommend having some sort of naming convention for your landing pages. A naming convention will help keep your list organized and help team members find pages easily.

Alias: A machine name, the Alias will be the slug in the URL for the page. For example, you may title a landing page something like “WR: Acquia + Mautic” where the WR stands for Webinar Registration. However, the alias could be something like “webinar-acquia-mautic“. That’s what would publicly show after https://subdomain.yourcompany.com/ when a person goes to that page.

Category: You can organize your landing pages based on their goals, campaigns, etc. Learn more about categories in our Global Categories help center topic.

LanguageIs a translation of: If contacts in multiple countries will be visiting your landing pages, Mautic can identify those countries and display content in the appropriate languages. However, you’ll need to create the content for each of those languages. Select the language you’re building the page in and the main page that you’re translating.

For example, if you mostly use English, you can create a French version that appears when someone visits the page from France. Create the English version and label it as English, then create the French version. Add the French label, and select the English version in the Is a translation of box.

Publish options: The Yes/No toggle is the fastest way to publish or unpublish a page. If it’s unpublished, any contacts who visit the URL will see either an error page or will be redirected to a different address (see below). Set the beginning and/or end dates & times for the period you’d like the page to be active in these boxes. This helps control relevance, and prevents users from needing to manually publish or unpublish pages at exactly the right times.

Is preference center: Users have the ability to create custom Preference Center pages that are more in line with their branding than the default preferences. We have a full help center article on Preference Centers. If you’d like to turn a page into a Preference Center page, set this option to Yes.

Redirect type: If the content on your landing page is out of date, you can unpublish your landing page and still have contacts who find it go to a relevant page of your choice. This is generally a good idea, in case a contact finds some old post or email that has a link to a landing page. Instead of seeing an “Oops!” page, you can send him or her somewhere like your homepage. Typically, you’ll want to use a 301 Permanent redirect in these cases.

Disable search indexing: If you don’t want your landing page to appear in search results (Google, Bing, Yahoo, etc.), switch this option to Yes. If you’d like to keep your page available for search engines to find, leave it at the default of No.

Meta Description: Adding a meta description is a best practice for SEO. Search engines will also display this snippet with the results, as a description of what content the page contains.

Landing Page Builder

Landing Pages - Builder

Slot Types

Text

This is the most versatile slot type in the landing page builder. If you wanted to, you could do just about anything you want in a text box. Once you have a text slot in your landing page, select it to see WYSIWYG editor on the right side.

Landing Pages - Text Slot

Inside this box, there are plenty of formatting options. In order that the icons appear (left to right, top row then bottom row): Undo, redo, bold, italics, underline, paragraph format (based on what’s in the theme you’re using), font family, font size, color (text and background options available once you click the droplet icon), alignment, numbered list, bulleted list, quote format (indentation), clear formatting, token menu, insert link, insert image, insert video, insert table, code mode, and view full screen.

To add a focus item or form to the landing page, use the tokens {focus=id#} or {form=id#}. Of course, replace “id#” with the actual ID number for the item you’re trying to insert.

Assets and Dynamic Web Content are a little bit different in text slots. To add a link to an asset, use { and start typing the name of the asset. Complete the token with }. For dynamic web content, use {dwc=slot_name}. Find the slot name in the Dynamic Web Content item type under Components.

Text slots actually offer more flexibility for images than the image slot. We often see customers add images into text slots, either with or without text. Once you click the Image button, you’ll see a few options appear:

Email image options

The first icon is to upload an image. If you’d like to use a URL for an image, select the second icon. Finally, if you’re looking for an image you’ve previously uploaded, the third icon opens the file manager.

Using the video option enables you to include gated video within a text slot on the landing page. If you don’t want to gate the video, just paste in the URL for the video you want to use. If you do want it gated, enter the time to wait before a form appears and the form to use. Be sure to test this, as limited space causes forms to display differently in a video than they normally would on landing pages.

To make more advanced changes, you can use code mode within a text slot. Adjusting colors to a specific HEX code, paragraph styles and formatting, and even creating buttons are the most common uses for code mode in a text slot. When finished making changes in code mode, click the </> icon again to return to normal view before saving. Otherwise, your changes won’t be applied.

Image

After dragging in an image slot, click the placeholder box to find options for the image.

Images

The first icon is the Replace icon. Use this to add your image initially, or to change it later on.

Next is the alignment. You also have alignment options to the right of the preview window, in the Customize Slot section.

In the middle, you’ll find an “i” icon. That’s to add alternate text to an image. Typically, using whatever you’d name the image will do.

The fourth icon is to adjust the size. With this, you can change the width and height in pixels.

Finally, if you’d like to have the image act as a hyperlink, use the link icon and add your URL. Like you would when adding a text link, you have the option to open the link in a new tab.

Image Card

Image cards are very similar to the Image slot type. However, you’ll notice more options in the Customize Slot section in the editor panel (on the right). There, you can change the text for the caption, change alignment for the image and caption, and change colors for the image background, caption background, and caption text.

Click the “blank” placeholder box to find the options to add or replace the image, like in the Image slot.

Image+Caption

Image+Caption

A third image slot type, the only difference between this and the Image Card is background colors. The Image+Caption slot type does not include backgrounds.

Button

Button

In many cases, marketers want to have some sort of call to action on their landing page and drive recipients to a certain page. The Button slot type is the most straightforward way to do that.

The Customize Slot area in the editor on the right gives options to change the border radius (curved edges instead of straight), adding custom text and a link, size, position, and colors for the button and text.

Remember, if you have a form on your page you won’t need a separate button. You can style the submit button for the form in Mautic’s form builder.

Social Share

This slot type adds options to share your content on Facebook, LinkedIn, and Twitter. It’s a very basic token for {sharebuttons} that automatically adds share buttons for those three social media platforms. You may also add this token into a text slot.

Social Follow

With this slot type, you can add links to follow your organization’s Google+, Facebook, and Twitter pages. All you need to do do is add the links for the social profiles you’d like to link to.

Code Mode

Code Mode

To create a slot entirely in HTML, drag in a code mode slot and write your code in the editor. You’ll be able to see the changes immediately in the main preview panel.

Separator

Separator

A very basic design element, this is a line that separates parts of your landing page.

Gated Video

Gated Video

Using gated video on a landing page is a great way to gather more information about your contacts. If you’d like to require a contact to identify him or herself, or provide additional information, in order to view the video, you can add a form at a specified time in the video. Once the form appears, the contact won’t be able to continue watching the video until he or she has submitted the form.

Video URL: You can paste in a URL for a video from YouTube, Wistia, or some other URL for a video file.

Gate Time: The amount of time (in seconds) after the video start that you’d like the form to appear.

Form: The Mautic form you’d like to use in your gated video.

Width and Height: The amount of space you’d like the video to consume on your page.

Padding Top and Bottom: The amount of extra space you’d like you leave above and below the video, between the video and any other surrounding content.

Dynamic Content

Landing Page Dynamic Web Content Slot

Dynamic Web Content is a great way to personalize the experience for your contacts. We have a full article about adding DWC to your website or blog. To add a dynamic content slot to your landing page, simply create the slot(s) in the Dynamic Content item (under Components) and add the Requested Slot Name here.

Sections

Sections

Sections are the areas containing one or more slots. You can add sections with up to three columns, and have multiple slots within each section and/or column.

In the Customize Section editor, you’ll see a handful of options.

Section Editor

The Content Background Color is for the background within the area where you have content.

The Wrapper Background Color is for the rest of the background – extending all the way to the edges of the page.

To add a background wrapper image, enter the URL for that image in the third box.

The wrapper background size enables you to determine how large the wrapper really is. If you want to have some space above, below, or around the edges of the content, set those dimensions here.

A/B Testing

Landing Page AB Test

To create an A/B test for a landing page, navigate to the main page for the page you want to test (before clicking Edit) and click “Create an A/B test”. Alternatively, you can click the drop-down next to “Edit” and “Clone” in the top right of the page and click “Add A/B test.” We have a full article and video about A/B testing. It is also possible to create A/B tests for language variations.