Marketo Guided Landing Page Template How-To’s

Marketo Guided Landing Page Template How-To’s

On May 15, 2015 Marketo answered the call to accommodate the trend toward Responsive Design by launching a new type of landing page called a “Guided” Page. Previously, in the “Free-Form” Page Builder, you could drag-and-drop elements into place to create the layout for your Landing Page at the cost of those elements being able to responsively adapt to their viewport. Using the Guided Page builder comes at the cost of the “Drag-and-Drop” layout functionality, in trade for a more mobile-friendly (and modern, user friendly) layout which can more easily interface with today’s sea of browsers and devices. Beyond the display flexibility advantages, Guided Pages boast a number of new features which set them apart and make them worthy of consideration in your next build project.

Here we’ll have a look via step-by-step tutorial at how to: Create a New Marketo Guided Landing Page Template; Add some pre-written Marketo-ready HTML to create a layout; Add Marketo Elements and Variables to enhance the Landing Pages’ Fuctionality.

Getting Started:

 

1. Setup a new Landing Page Template:

Log into your Marketo instance and navigate to the Design Studio. Create a new Landing Page Template from the dropdown menu below the Design Studio tab – this will launch a pop-up window. In that pop-up window, “New Landing Page Template”, you’ll be able to select the Editing Mode: of your template, Free-Form or Guided in a drop-down selector. Select Guided, name your Template and provide a description if you’d like. Marketo will generate a new Landing Page Template and you will be redirected to the code-view of your new Template page. There should be some default HTML on the page already which Marketo provides to get you started. This is where you’ll apply the Starter Template Source Code below (just copy and paste it into your new Template page and voila!)

If you’d like some more information on this process, there is a helpful video on Marketo Docs as well as documentation of the Variables which we’ll be applying to our template.

2. Add the provided HTML Framework to your Template:

To dive right in, we’ve provided some code to create a basic, responsive layout with a few standard elements. We’ll use this code to replace the default code Marketo generates on our new Landing Page Template.  You can grab a Quick-Start version of the markup here and follow along:

[toggle_content title=”View Starter Template Source Code”][code language=”html”]

*Usage: In your Marketo Template Page, first erase all existing code. Copy and paste the code below into your page and click the Preview Draft button to view your template.*

========== [ Copy Code Below This Line until the End Break ] ==========

<!DOCTYPE html>

<html>
<head>
<meta charset=”utf-8″>
<meta class=”mktoString” mktoName=”Variable 1″ id=”var1″ default=”This is a variable”>
<title></title>
<!– Bootstrap Quick-Start Stylesheet // Attribution: Hosted Bootstrap @ https://www.bootstrapcdn.com/ –>
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”>

<style>
body {background:#fff;}

#HeaderRow {
background-color:#ededed;
}

#Banner {
/* Set ‘Cut-Off’ Height of Banner Image */
max-height:400px;
/* Hide everything over ^ set height ^ */
overflow:hidden;
}
#BannerImg {
max-width:100%;
height:auto;
margin-top:15px;
}

#ContentBox {
background-color:#ededed;
margin-bottom:10px;
}

#FormContainer {
background-color:#dedede;
padding:10px;
}
#FooterRow {
background-color:#ededed;
padding-top:10px;
margin-top:15px;
}

</style>
</head>

<body>
<div class=”container-fluid”>
<!– Header –>
<div class=”row” id=”HeaderRow”>
<div class=”container”>
<div class=”col-xs-12″>
<div class=”mktoText” id=”Logo” mktoName=”Logo”>
<img src=”http://services.digital-pi.net/images/digital-pi-logo-no-margin.png” alt=”Digital-Pi Logo” />
</div>
</div>
</div>
</div>

<!– Banner –>
<div class=”row” id=”BannerRow”>
<div class=”container”>
<div class=”col-xs-12″ id=”Banner”>
<a href=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template”><img class=”mktoImg” id=”BannerImg” mktoName=”Banner Image” src=”http://info.digitalpi.com/rs/496-ECU-350/images/hero-image.png” alt=”Banner Image” /></a>
</div>
</div>
</div>

<!– Body –>
<div class=”row” id=”BodyRow”>
<div class=”container”>

<!– Left Column –>
<div class=”col-md-8″ id=”LeftCol”>
<div class=”mktoText” id=”LeftColumnTop” mktoName=”Left Column Top”>
<h3>Headline Row: Left Column</h3>
<p>Praesent porttitor malesuada ornare. Etiam pellentesque vitae risus in elementum. Vivamus ex sem, maximus in ligula vitae, dictum luctus felis. Etiam et rutrum mauris, congue hendrerit nisi. Aenean lorem sem, consequat sit amet diam ut, pellentesque aliquet ante. Ut egestas massa mi, nec condimentum ipsum suscipit non. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>

<!– Featured Content Box –>
<div class=”col-xs-12 mktoText” id=”ContentBox” mktoName=”Left Column Feature Box”>
<h4>Helpful Links – Marketo Docs</h4>
<p>Editing Mode – under Landing Pages in Design Studio (Guided vs Free-form) sample templates: <a href=”https://docs.marketo.com/display/DOCS/Guided+Landing+Page+Templates” target=”_blank”>https://docs.marketo.com/display/DOCS/Guided+Landing+Page+Templates</a> </p>
<p>For variables and code samples: <a href=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template” target=”_blank”>https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template</a> </p>
</div>
<div class=”mktoText” id=”LeftColumnBottom” mktoName=”Left Column Bottom”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse turpis justo, venenatis non diam ut, lobortis bibendum dui. Donec a eleifend justo. Suspendisse egestas elit urna, quis cursus sapien molestie id. Quisque molestie quam vel ex porta, eget pulvinar turpis cursus. Sed faucibus odio at euismod tempor. Nunc lacinia at risus at hendrerit. Quisque hendrerit vel nisi eget auctor. Nam eu dolor porttitor, vulputate neque non, pretium ipsum. Phasellus sed odio suscipit, semper nulla vel, luctus tellus.</p>
<p>Nunc vehicula diam nulla, sit amet viverra orci aliquet sodales. Nunc condimentum ligula pellentesque nunc tempus, eget finibus lectus tempus. Vivamus vel odio at ligula porta lacinia eget dapibus nunc. Quisque nec feugiat nibh, at euismod turpis. Praesent finibus risus mi, ut consequat ligula lacinia quis. Aenean pulvinar purus et justo eleifend, at convallis nulla iaculis. Pellentesque dapibus justo nisi, non fermentum erat condimentum in.</p>
</div>
</div>

<!– Right Column –>
<div class=”col-md-4″ id=”RightCol”>
<div class=”mktoText” id=”FormHeader” mktoName=”Form Header”>
<h3>Form Headline / Title:</h3>
</div>
<div class=”col-xs-12″ id=”FormContainer”>
<div class=”mktoForm” id=”Form” mktoName=”Form”>
<!– Insert Marketo Form into this div thru Page Editor –>
</div>
</div>
</div>

</div>
</div>

 

<!– Footer –>
<div class=”row” id=”FooterRow”>
<div class=”container”>
<div class=”col-xs-12 mktoText” id=”FooterContent” mktoName=”Footer Content”>
<p>&copy; Copyright 2016. Company Name.</p>
</div>
</div>
</div>
</div>

 

<!– Bootstrap Quick-Start js // Attribution: Hosted Bootstrap @ https://www.bootstrapcdn.com/ –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

 

</body>
</html>

========== [ Copy Code Above This Line until the Top Break ] ==========

[/code]

[/toggle_content]

After you’ve pasted in the new code to the Template editor page in Marketo, you can click the “Preview Draft” button in the top right to view your change. Here’s the first look at your new template:

If this is what you see, Congrats! you’re right on track.

If this isn’t what you see, you can repeat the process by clicking Edit Draft (top right) from the Preview Screen and deleting all the code. Re-copy the code between the breaks into your blank template page and then click Preview Draft to view your updates.

 

3. Add a link to the Banner Image using a “String” variable:

A common request we see in our builds is to have the Banner Image work as a ‘click-able’ link to some other page or content. In this step, we’ll work thru adding a variable to our template to control the URL (link) of our banner image – and in the process discover one of the awesome new features of Guided Pages.

To begin, navigate to the New Template Page where you’ve just pasted in this code (code-view). At the top of the document, you’ll see we’ve left a line of the markup Marketo created on the New Guided Landing Page Templates. Locate the Marketo String Variable meta tag:

<meta class=”mktoString” mktoName=”Variable 1″ id=”var1″ default=”This is a variable”>
view screenshot

Next, locate the Banner Image in the code below and locate the URL of that link:

<a href=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template”>
view screenshot

To begin changing the default variable code to the banner link, well need to swap out the actual URL for the link with the variable id. To do this, highlight everything between the ” ” in the line of code above (https://docs.marketo.com/…+Template) and Cut (Ctrl+X) it from the code – we’ll be pasting this link into our variable, so hang on to it for now. You should be left with: <a href=””>. Now enter your variable’s ‘id’ into the space you’ve just emptied by using the Marketo syntax for variables: ${var1}. In this case, our variable’s id (because we didn’t change it yet) is still ${var1}. Your results should read: <a href=”${var1}”>.

From here’s we’ll want to place (paste) the URL we’ve cut from the link path to let the variable know where we’d like it to point by default.  To do this, navigate back up to the top of your page and find the variable code line we looked at above. In the “default” value (“This is a variable”), delete everything between the ” ” and paste in that URL we cut from our link before. Your variable meta tag should now read: <meta class=”mktoString” mktoName=”Variable 1″ id=”var1″ default=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template”>

To put the final touches on this variable, we can change the mktoName and id attributes to more clearly describe this to the end-user. In this case, I’ve updated the mktoName to “Banner Link” (this can include spaces and is the text the user will see in the page editor, so be descriptive here) and the id to “BannerLink” (this shouldn’t include spaces or special characters, and is really only seen in the code-view). Here’s the new string of code: <meta class=”mktoString” mktoName=”Banner Link” id=”BannerLink” default=”https://docs.marketo.com/display/DOCS/Create+a+Guided+Landing+page+Template”>

4. Put it to the test:

You can save your changes and approve your new Guided Landing Page Template. In order to see your new variable in action, you’ll need to now create a new Landing Page (LP) using the template you’ve just approved. You can choose the new Guided Template you just made, as well as a name, location and description for your new LP and open it in the Page Editor. Now you’ll see all your hard work put into practice!

ScreenShots-Marketo-5-Banner

 

In the right column of the Page Editor in Guided Mode, you’ll notice the elements menu has been replaced with a list of the actual elements on the page. You can click into these to edit the various ‘elements’ of your Landing Page. You can add a form to your Landing Page by clicking into the Form element, for example. These elements are created for you in the template code already, but can be located by searching for mktoText, mktoImg and mktoForm in the template code. Below that is the Variables list which includes the new “Banner Link” variable you’ve created and it should display the URL you’ve added as a default URL. Now, updating your banner’s link is as easy as copy/pasting the new URL into the “Banner Link” box here to replace the default link and you’re done! You can test your changes by editing the URL and Approving your changes. Preview your Approved Page, click the new banner link, and away you go!

To read more information about Elements and Variable at Marketo Docs: https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template

dave@digitalpi.com

Dave specializes in design & development and has been crafting and refining systems of communication, workflow and experience for the last decade. Whenever it needs to be beautified, optimized, Marketo-tized or just broken apart and put back together, Dave plays an instrumental role in handling the technical details of form and function in development.

LEAVE A COMMENT