66fa2a95be8f9844a3fe30b9e53aad9dd36291a7

Guided Landing Pages: Personalisation

Blog Post created by 66fa2a95be8f9844a3fe30b9e53aad9dd36291a7 on Aug 9, 2016

I really love the Marketo Guided Landing Pages and wanted to share how I used Template 1-A to create my own stylish microsites.

 

You can find the Marketo Guided landing Page templates here: Template 1-A - Marketo Docs - Product Docs , and I downloaded template 1-A to create an event sign-up landing page.

 

This template has 5 sections:

                                                          

Header

 

 

 

 

 

Section 2

 

 

 

 

Section 3

 

 

 

 

 

Section 4

 

 

 

Footer

 

 

I downloaded the template, cloned it and started creating my own personalised template.

 

Step 1. I went in and changed the colour scheme.

 

In Design Studio, to change the colour, you have to work your way through the <head> code, and looking for any colour codes for instance #ffffff.

 

You also have to check <style> for custom colours:

 

 

2) I next had to decide what content I wanted. I decided I needed two rows like section 2, and I did not need section4 at all.

 

I went ahead and copied the section 2 content, renaming all of the elements 2a, and I also deleted the section 4 content. This is made easier by the fact that the code is carefully annotated with comment tags:

pastedImage_8.png

 

When you first copy section2, there will be numerous errors like this:

 

Do not panic!

Just remember to go through and change all the '2' to '2a' in the following places:

  • change section 2 to section 2a
  • change id="introtext2" simply change it to id="introtext2a"
  • Change id="introimage2" change to id="introimage2a"
  • Chane all the mktoName entries to match

 

You also need to edit the <head> css tags, for instance, you might add, an optional background colour:

 

<meta class="mktoColor" id="section2BgColor" mktoName="Sec. 2 Background" default="#ffffff">

  <meta class="mktoColor" id="section2aBgColor" mktoName="Sec. 2a Background" default="#ffffff">

 

Or the option to remove the extra section:

<meta class="mktoBoolean" id="showSection2" mktoName="Show Section 2?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection2a" mktoName="Show Section 2a with video?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

 

The html/css may seem daunting, but once you get started it's fairly straightforward

 

Step 2. I wanted 2 rows of 2 products

 

It was fairly easy to spot the code for the three product listing the more complex part was resetting the column span. Each of the products in section 2 had its own code:

 

pastedImage_142.png

Where there are 3 columns the span is set to 4, this because in the default settings a page is considered to use 12 columns, like this:

 

So for 3 equal columns, the section need to span 4, for two equal columns set span to 6, and do not forget to remove the extra Main Point 3

 

Step 3 I wanted to replace a product image with a video.

 

This was also quite tricky, I downloaded template 1-c, and cut and pasted the code from the header which included a video, and then pasted that in the template.

In effect I replaced:

 

<div class="mktoImg" id="section2Image3" mktoName="Section 2 Image 3" mktoImgClass="expandToFit" >

<img class="lpimg expandToFit" src="http:// ... /rs/025-CXE-092/images/selected-services-lp-thumb.jpg"></div>

 

With:


<div style="text-align: center;">

<iframe width="350" height="200" src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen=""></iframe>

<br /><br />You Tube: https://youtu.be/nnmnnm </div>

 

 

Step 4. Do it all again.

 

Once you have started working with the guided templates, it becomes very straightforward to manipulate them however you want. Even to create multiple pages and websites.

Outcomes