So you’ve now used the previous document (Getting Started With Guided Landing Pages:) to download a template from our library and set it up in your Marketo instance, you have even used it to make a landing page or two and you’ve customized those landing pages, AND you’ve even gone the extra mile and customized your template and modified some elements! (Editing Marketo Guided Landing Page Templates, Pt. 1 - Elements:) All of which is fantastic news! Good job!
But if you recall from the article that showed you how to edit Elements on the template, I skipped right over the section on Variables.
This is the piece that this document is designed to tackle.
So what is a variable? If you edit a Guided Landing Page you will see a panel on the right hand side that displays both Elements and Variables. In this instance, the variables do everything from assigning a gradient color, to deciding if you want to display or hide different sections of the landing page.
Modifying a variable in the landing page editor is designed to be really simple, just click the variable you want to change and give it a new value. Here I changed the Primary Gradient 1 and 2 from 1DA083 and 0F3450 to A00E35 and F2F2F2 respectively and the landing page changes:
At its easiest to understand, a variable works a lot like a token in an email. It’s a placeholder for actual code to be used later. So if I create an email that starts with “Hello, {{lead.firstname:default=Friend}}!” you can tell right away what that’s going to do. Pull the first name from the lead record, if none exists use the word “Friend”.
Think of a Variable as a token that you get to define as well as use. The first step is to define it and the second step is to actually call back to the variable you defined.
While it’s easy for a non-technical user to use a variable (as it should be!), setting one up in the template does require a fair amount of HTML knowledge. As stated before, if you are not comfortable editing HTML and do not have a resource available to you, please reach out to services@marketo.com, they are able to assist with any sort of coding needs.
So as before, let’s dive into the template, this time we’re going straight for the Variable code.
<!-- Marketo Variable Definitions -->
<meta class="mktoColor" id="gradient1" mktoName="Primary Gradient 1" default="#1da083">
<meta class="mktoColor" id="gradient2" mktoName="Primary Gradient 2" default="#0f3450">
So right at the start of the template, we’re off to the races defining variables. As you can see with the Gradient 1 and Gradient 2, these are both marked with a class of “mktoColor”.
As with the Elements, the full list of Variable types can be found here:
https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template
class : "mktoString" class : "mktoColor" class : "mktoBoolean"
A string is a variable that contains a value, Color should be obvious what that does and Boolean is a yes or no choice.
In addition to the class, each variable has to have a unique ID. This is critical and used when the variable is called later on down the page. When you call a variable it’s always with the syntax of ${id name}. So in this case ${gradient1} and ${gradient2}. As you can see it looks a LOT like a token but it’s a token you can name whatever you want.
The mktoName is how it displays the variable in the Landing Page editor.
The default value is what it starts out with.
So let’s take a look and see how these Gradients are applied now that they’re defined at the top of the template.
Color is typically used in the CSS portion of the header. As defined in the previous document, CSS stands for “Cascading Style Sheets” and is a way of formatting the same thing over and over again, kind of like setting a font in a word processor.
/* Header Gradient */
#is {
top: 0;
width: 100%;
min-height: 620px;
position: relative;
z-index: 1;
color: #fff;
padding-top: 10%;
background-image: linear-gradient(${gradient1},${gradient2});
}
Now normally in CSS, the linear-gradient option would have two colors listed, the top color and the bottom color and it provides a gradual transition from one to the other.
We could just as easily change this in the template to
background-image: linear-gradient(red,white);
But the problem doing that is that an end user, who is only using the Landing Page Editor, would not be able to change it. The gradient would be defined in the template and inaccessible to the Editor.
Changing these values to the variables defined before allows the user to change the first and second colors in the Landing Page editor interface.
In Summary:
The Meta Tags define what the variables mean:
<meta class="mktoColor" id="gradient1" mktoName="Primary Gradient 1" default="#1da083">
<meta class="mktoColor" id="gradient2" mktoName="Primary Gradient 2" default="#0f3450">
The ID= is then used to call the variable and put it into action:
background-image: linear-gradient(${gradient1},${gradient2});
The other benefit to doing it this way is you can re-use the same variable over and over again. Look at this piece of CSS:
body {
background: ${gradient2};
margin: 0;
color: #696E74;
}
That’s the same ID as the gradient we used before, only applied to a different section. This ensures that the bottom color of the gradient and the background of this section will always be the same color.
Any item in the CSS that contains a text value, a color value or a yes/no choice can be converted to a Variable.
Here’s another common usage:
You’re using a form on your landing page, but you want the end user to be able to change the text on the submit button.
As before you define the variable:
<meta class="mktoString" id="section4ButtonLabel" mktoName="Sec. 4 Button Label" default="More Questions?">
Then farther down the page where the button appears you call the variable you defined before:
<div class="centered mtb">
<a href="${section4ButtonLink}"><button class="btn btn-lg btn-green mt">
${section4ButtonLabel}</button></a>
</div>
The <a href= is pulling a http link that the user can define in the editor, the button class is setting up a green button as defined in the CSS, and there is our Variable to display the label which reads “More Questions?” Here’s what it looks like in the editor:
So this is great, and it makes sense because you can see this was all set up and defined by a professional. What if you wanted to
add your own? Is that even possible?
Naturally it is!
First, figure out what you want to convert to a Variable. Is it a piece of text like a button name or a link? Is it a color? Is it a yes/no choice?
Let’s say we want to add a variable that controls the color of the buttons. We have two, both using the same color green, and we want whoever is running the landing page editor to change that without having to go to the template:
Step 1: Define your variable:
<meta class="mktoColor" id="ButtonColor" mktoName="Button Color" default="#1DA083">
We’re talking about colors so the class will be “mktoColor”. The ID can be anything we want it to be as can be the mktoName. The default is the same lovely green shade as was used before.
Now we need to call this color. Looking at the CSS, we can see the .btn-green is defined as this:
.btn-green {
border: 4px solid #1da083;
border-radius: 60px;
color: #fff;
background: #1da083;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
The background is the color we want to change to a Variable so it can be edited without having to access the template.
Change the code to this:
.btn-green {
border: 4px solid #1da083;
border-radius: 60px;
color: #fff;
background: ${ButtonColor};
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Approve the template and check out the landing page in the editor:
Well that’s fantastic, but there’s a separate color for the border, we could just as easily add a variable for it as well:
border: 4px solid #1da083;
We don’t want to HAVE to add another new variable for just the border. We could change the border at the same time as the button. By changing #1da083; to ${ButtonColor};
The trick now becomes what if you change your mind? What if you have a variable in the template that is no longer desired? How do you get rid of it?
Remember each variable is two pieces, the definition and the call. You have to remove BOTH pieces. Technically removing the call would be enough to prevent the change from being made on the page, but the definition is what makes the variable appear in the Landing Page Editor, if you only removed the call then there would be a non-functional Variable in the landing page editor.
So in the case of our button color:
Step 1 would be to strip out the meta tag containing the definition:
Step 2 would be changing the variable name where it’s being used to some fixed value:
.btn-green {
border: 4px solid #1da083;
border-radius: 60px;
color: #fff;
background: ${ButtonColor}; -> change this to some other fixed color. #00FF33; or the original #1da083;.
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Doing both pieces will prevent the Variable from being listed in the Landing Page Editor and prevent it from having any effect on the page.
View full article
.png)