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

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.

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>

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.

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>.

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.