66fa2a95be8f9844a3fe30b9e53aad9dd36291a7

Choices when using the Marketo Guided Landing Page Templates.

Blog Post created by 66fa2a95be8f9844a3fe30b9e53aad9dd36291a7 on Jun 6, 2016

Guided Landing Pages Templates: Too many choices?

 

I think it has to be said that my impression when in started using Marketo landing Page templates was that. There are just: TOO MANY CHOICES?

 

But the basic problem with the Marketo Guided Landing Page templates is that there is too much choice. 19 different templates with 4-5 variants of each - this makes over 100 choices

 

 

In fact, you have more than 100 choices, because for each of these landing pages the colour scheme is 100% editable, so a page that is displayed in blue, black or green can be edited to become a pixel perfect replication of your own brand's colours.

 

The real restrictions: choosing between a picture or a video, anyone?

 

The real restriction lies elsewhere in the 5 specific categories of landing pages:

Template 1-20A: Landing Page with an image at the top

Template 1-20B: Landing Page with a form

Template 1-20C: Landing Page with a video

Template 1-20D Landing Page with a Poll

For my first Guided Template, I wanted to create a Landing Page with both a Video and a Form.

 

Merging two Guided Landing Page templates together

 

I downloaded and installed two landing pages :

 

Template 1-C including the code for Video

 

   <div id="is">

    <div class="container">

    <div class="row">

              <div class="mktoVideo col-lg-6 col-md-6 centered" id="primaryVideo" mktoName="Primary Video" style="min-height:100%;"></div>

    <div class="col-lg-6 col-md-6 centered">

    <div class="mktoText" id="primaryBodyHeader" mktoName="Primary Header">

                    <h1>Alice's Adventures in Wonderland</h1>

                    </div>

    <p>

    <div class="mktoText" id="primaryBodyText" mktoName="Primary Body Text">

  Alice was beginning to get very tired of sitting by her sister on the bank,

                          and having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it.

  </div>

  </p>

              <a href="${buttonLink}"><button class="btn btn-lg btn-green mtb">${buttonLabel}</button></a>

    </div>

    </div>

    </div>

    </div>

And Template 1-C including the code for a form

<div id="is">

    <div class="container">

    <div class="row">

              <div class="mktoImg col-lg-6 col-md-6 centered" id="primaryImage" mktoName="Primary Image" style="min-height:100%;" mktoImgClass="expandToFit"></div>

    <div class="col-lg-6 col-md-6 centered">

    <div class="mktoText" id="primaryBodyHeader" mktoName="Primary Header">

                    <h1>Alice's Adventures in Wonderland</h1>

                    </div>

                  <div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px;min-height:80px;"></div>

    </div>

    </div>

    </div>

    </div>

 

Important note, I did not try to edit the code, and I was careful to count and match the <div></div> codes.

 

The next step was to add both sets of code to one new Landing page. The easiest way to do this, is to Clone template 1_C, and then cut and paste in the code from 1- B. You immediate get this error message, because you have one ID code identifying two different elements:

 

 

The easiest solution, is to change the unique ID by adding a new ID, in this case : <div class="mktoText" id="primaryBodyHeader-form" mktoName="Primary Header-form">

 

The final step is to merge the form and the video into the same row:

 

<div id="is">

    <div class="container">

    <div class="row">

              <div class="mktoVideo col-lg-6 col-md-6 centered" id="primaryVideo" mktoName="Primary Video" style="min-height:100%;"></div>

    <div class="col-lg-6 col-md-6 centered">

    <div class="mktoText" id="primaryBodyHeader" mktoName="Primary Header">

                    <h1>Alice's Adventures in Wonderland</h1>

                    </div>

    <p>

    <div class="mktoText" id="primaryBodyText" mktoName="Primary Body Text">

  Alice was beginning to get very tired of sitting by her sister on the bank, and having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it.

  </div>

  </p>

              <a href="${buttonLink}"><button class="btn btn-lg btn-green mtb">${buttonLabel}</button></a>

    </div>

         

          <div class="col-lg-6 col-md-6 centered">

        <div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px;min-height:80px;"></div>

    </div>

    </div><!--/row -->

    </div><!--/container -->

    </div><!-- /.IS Wrap -->

 

So then if you use this template to create a landing page, you get a guided landing page with both a form and a video in the header:

 

alice.png

 

 

 

Postscript.

 

Further reading and recommended guides for Guided Landing Page templates:

 

Create a Guided Landing Page Template - Marketo Docs - Product Docs

Getting Started With Guided Landing Pages:

Editing Marketo Guided Landing Page Templates, Pt. 1 - Elements:

Editing Marketo Guided Landing Page Templates, Pt. 2 - Variables:

Outcomes