How to Code a Responsive Landing Page in Marketo

In:

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.

marketo-landing-page-template-creation

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.

marketo-landing-page-template-code-editor

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.

marketo-landing-page-editor-elements

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.

marketo-landing-page-editor-variables-string

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.

marketo-landing-page-editor-background-value

marketo-landing-page-editor-background copy

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.

marketo-landing-page-editor-toggle copy

Questions?

Email me, or send me a tweet @jennamolby.

Related Posts

  • 17/06/2019
    How to Integrate Gravity Forms With Pardot

    Gravity Forms is one of the easiest tools to create advanced forms for your Wordpress website and with some customization they can be integrated with Pardot. In this post, I will show you how to integrate Gravity Forms using Pardot Form Handlers.

  • 28/02/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 1

    Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

10 comment(s)
  • Luna

    11/10/2017 at 5:11 am
    Reply

    More than 2 years later... this article was a great help! I love your content!

  • Trish

    13/03/2017 at 9:11 am
    Reply

    Hi! this is a great article, your tutorials helped me a lot :) I just cannot make the mktoText work... can't it be used inside another div? I am building just another template with the base of an original one that worked and in this one... it doesn't work at all... I am so confused!

    • Jenna Molby
      to Trish

      13/03/2017 at 1:36 pm
      Reply

      Hi Trish, so happy you found it helpful! Do you get an error message when trying to save your template? Usually, there would be a message if you add mktoText where it's not allowed. It is allowed inside another DIV, but not nested within another Marketo editable element.

  • Sean Kennedy

    20/12/2016 at 2:41 pm
    Reply

    This is great Jenna! Knew how to create the variables but Marketo's docs are limiting in clearly showing how to add them to the template. Awesome post, as always! :)

  • Diego Villamizar

    08/08/2016 at 9:18 am
    Reply

    Bravo Jenna, very well explain and very clear. Thanks for this material very helpful.

  • NJRangersFan

    22/04/2016 at 10:51 am
    Reply

    how does this have no comments?!? great article, thanks for putting it together, exactly what I was hoping to find!

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts