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, all of which is fantastic news! Good job!
But now you’re looking at the template and things need to be changed:
That’s a good start, but the Elements on the page may not seem “right” to you. We have an image on the left, a text headline on the right and a form below the text headline.
What if that’s NOT the layout you intended? What if, instead, you wanted the headline at the top, centered on the page and the image and the form side by side below the headline?
All of the elements on the template can be added, removed, re-ordered, changed up, switched out and modified. Doing so, however, absolutely requires knowledge of HTML. 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.
Editing a Template:
Let’s go back to the template we created before and edit it and see what we can do about that image, form and headline.
Every object on a Guided Template is called an “Element”, you can see a list of the elements being used on any given page in the right hand pane of the landing page editor. However, that’s not all the elements that can be used on a landing page.
The full list of template elements can be found here:
https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template
So looking at that list, and knowing we want to change the layout of a text headline, image and form, the Elements we should be looking for are marked like this:
class: "mktoText"
class: "mktoImg"
class: "mktoForm"
That seems easy enough, let’s look at the code and see what we can see.
Scrolling down through the code you will see first a bunch of variables defined. Variables are another sort of item that can be changed on a responsive landing page, please see Editing Marketo Guided Landing Page Templates, Pt. 2 - Variables: which follows this one.
Following that is a bunch of CSS code. 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. You wouldn’t want to have to re-set your font and size every time you start a new paragraph, right? CSS helps maintain a consistent look and feel across the entire document.
Following the CSS, we get to the main section of the template, the <body> section. The <body> tag typically contains what you and I would consider to be “THE” web page. Everything above the body helps define how the web page looks and feels, but the <body> contains the actual content.
Sure enough, right there inside the <body> tag on lines 290 to 295 are the Elements we’re looking for:
Each of the Elements we want to re-order are located inside <div> tags. A <div> tag is just a way of separating out one part of the page from the rest of the page. This section is marked as being “special” and the “class=” attribute is telling us in what way this section is special.
Each section starts with <div and ends with </div> closing it off. In HTML it’s important to close elements that have been started, so if we’re going to change the order of things, it’s important to select the entire section, from the <div to the </div>
More on HTML <div> tags here:
http://www.w3schools.com/tags/tag_div.asp
HTML renders everything from left to right and from top to bottom. In the code, we are first defining the mktoImage, following that with mktoText and finally with mktoForm. That’s why the objects appear on the landing page in that order:
In order to change the layout in a specific way, we will have to take each of the <div> tags containing elements and place them in a table. A table is a way in HTML to order things in terms of rows and columns. The <table> tag is one of the oldest tags in HTML and works on pretty much every HTML capable device.
More on the <table> tag here:
http://www.w3schools.com/tags/tag_table.asp
Wrapping the Elements in a table is pretty straightforward. Copy the code to a text editor:
<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>
<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px;min-height:80px;"></div>
Step 1 is to change the order, we want the text to come first:
<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>
<div class="mktoImg col-lg-6 col-md-6 centered" id="primaryImage" mktoName="Primary Image" style="min-height:100%;" mktoImgClass="expandToFit"></div>
<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px;min-height:80px;"></div>
Step 2 is to wrap the content in a table. Inside the <table> tag are special tags that define the rows and columns. <tr> sets up each row and as you saw with the </div> tag is marked with a </tr> ending the row.
<td> defines each column, I know it’s confusing having <tr> where “r” clearly means “row”. You’d think it would be <tc> for column, but trust me, it’s <td>.
More on <tr> and <td> here:
http://www.w3schools.com/tags/tag_tr.asp
http://www.w3schools.com/tags/tag_td.asp
<table>
<tr>
<td>
<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>
</td>
</tr>
<tr>
<td>
<div class="mktoImg col-lg-6 col-md-6 centered" id="primaryImage" mktoName="Primary Image" style="min-height:100%;" mktoImgClass="expandToFit"></div>
</td>
<td>
<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px;min-height:80px;"></div>
</td>
</tr>
</table>
This is the basic structure of the table. There are going to be some tweaks needed, but let’s see how this looks first. Put this in place of the code currently in the template like so:
The indented tabs here aren't JUST for readability. The Guided Template Editor has build in code validation and it will return errors if you try to have your elements on the same line as the TD's and TR's. Make sure each item is on it's own line.
Go back and re-approve the draft and then edit the landing page we made before.
It’s not pretty, but that’s OK. First we have to get the structure the way we want it, making it look pretty is the very last thing we do.
What we have here is the text headline on the top, which is great. The image and the form are below, left and right, respectively, side by side. That’s just what we wanted.
The problem is that we have a row with one column on top of a row with two columns and that has skewed things slightly. Fortunately this is an easy fix. We just need to take the single column in row 1 and make it stretch across both columns in row 2.
To do that, we add an attribute. Attributes modify the way tags behave.
In the template go back to the code we inserted and find the <table> tag where we set the whole thing up. First we’re going to control the width of the table:
<table width=”100%”>
This tells the browser to render the table at 100% the width of the screen.
Now find the <td> tag that contains the text element.
<td>
<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>
</td>
Add the following attribute like so:
<td colspan=”2” width=”100%”>
<div class="centered"><div class="mktoText" id="primaryBodyHeader" mktoName="Primary Header"><h1>Alice's <br>Adventures in <br>Wonderland</h1></div></div>
</td>
So what we’ve told it here is to span two columns and take up 100% the width of the table, and since the table is already 100% the width of the screen, this should fit the page as well.
We’ve also changed the class on the <div> so that it simply reads “centered”. This should center the title based on the CSS code defined above.
Now find the <td> tags that contain the image and the form and adjust them to 50% each like so:
<td width="50%">
<div class="mktoImg col-lg-6 col-md-6 centered" id="primaryImage" mktoName="Primary Image" style="min-height:100%;" mktoImgClass="expandToFit"></div>
</td>
<td width="50%">
<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px;min-height:80px;"></div>
</td>
Go back and approve the template change and edit a draft of your landing page.
There you go! Now if we were preview this and change the size of the window, we get this (image and form are blank as they have not yet been added.)
View full article
.png)