How to Code a Responsive Landing Page in Marketo

In May 2015 Marketo released fully responsive landing pages, also called guided landing pages. Unlike the free-form (drag & drop) landing page editor the new guided landing page editor provides structured editing for fully responsive landing pages. Marketo offers some guided landing pages that you can download, but this tutorial will show you how to code a brand new template and how to convert existing landing pages.

What’s new?

• A new option has been added to the popup window when creating a landing page.
• The type of editable content (ex. images or forms) will need to be defined in the landing page template code.
• Variables can be added to the landing page template to add different customization options within the landing page editor.

Creating a Landing Page

A new option has been added to the popup window when a new landing page template is created. You can now choose the editing mode. To utilize the new fully responsive landing page templates, select guided from the menu.

Like the free-free form template editor, the guided template editor provides you with some sample code. Go ahead and replace that code with your landing page code.

Define Editable Regions

Once you have your landing page template code in the Marketo editor, you can start to add some HTML to define which content sections should be editable. To do this, a DIV will need to be added in each of the sections. Each DIV will have to have the following properties:

1. Class: This will specify the content type (ex. rich text, image, form).
2. ID: A unique ID for the DIV (ex. left-column-text)
3. mktoName: This will be the display name for the editable region within Marketo’s landing page editor.

Rich Text Area

To create an editable rich text section the DIV needs to have a class of “mktoText”

Form

To create an editable form section the DIV needs to have a class of “mktoForm”

Image

To create an editable form section the DIV needs to have a class of “mktoImg”

If you setup the editable regions correctly, it should have sections that look similar to this in the landing page editor.

Variables

Another great feature of guided landing page templates is the ability to define variables within the template. There are many possible ways to use variables within templates. Here is a few examples:

• Background colours
• Font colours
• Fonts
• Plain text (button text, titles, etc)
• Links for buttons
• Toggle show/hide content

Marketo allows 3 different variable types:

1. mktoString: A mix of letters and/or numbers
2. mktoColor: A hex colour
3. mktoBoolean: A toggle show/hide on an element

Each one of these types will need to be added as a class to define the variable.

1. mtkoString example code

In the HEAD section of your landing page template include the following code:

In this example

• Class = the type of template variable, in this case, mktoString
• ID = An unqique ID for this element. This will be used as the varaible name within your HTML.
• mtkoName = The user-friendly name that will appear under “Variables” in the landing page editor
• default = The defualt value for the variable.

Now that variable is added in the HEAD section of the landing page template, you will also need to modify the HTML of the button in the template.

In the landing page editor you should now see the variable on the left-hand side.

2. mtkoColor example code

In the HEAD section of your landing page include the following code:

In this example

• Class = the type of template variable, in this case, mktoColor
• ID = An unqique ID for this element. This will be used as the varaible name within your HTML.
• mtkoName = The user-friendly name that will appear under “Variables” in the landing page editor
• default = The defualt value for the variable.

Now the variable can used throughout the template like this:

Or like this in CSS

In the landing page editor you should now see the variable on the left-hand side.

3. mktoBoolean example code

In the HEAD section of your landing page include the following code:

In this example

• Class = the type of template variable, in this case, mktoBoolean
• ID = An unqique ID for this element. This will be used as the varaible name within your HTML.
• mtkoName = The user-friendly name that will appear under “Variables” in the landing page editor
• default = The default value for the variable (TRUE or FALSE).
• false_value = The value when the toggle is OFF. This value should always be NONE if the toggle is for showing/hiding content.
• true_value = The value when the toggle is ON. This value should always be BLOCK or INLINE-BLOCK if the toggle is for showing/hiding content.
• false_value_name = The user-friendly value to display in the landing page editor when the toggle is OFF.
• true_value_name = The user-friendly value to display in the landing page editor when the toggle is ON.

Now the variable can used throughout the template like this:

In the landing page editor you should now see the variable on the left-hand side.

[pb_space height=”40″][/pb_space]

Questions?

Email me, or send me a tweet @jennamolby.