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

Report Inappropriate Content

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>