Decoding the Marketo Template (Abridged)

When it comes to designing landing pages using the Marketo template, the common complaint is that it's difficult to customize the template. The typical scenario is that the template should match the website standards and so marketing folks will send the template to a designer, webmaster, or design agency that hasn't seen this before. The template comes back with some of the raw html used for the website or uploaded directly into Marketo.  When the template is previewed, it looks fine. However, when it comes time to edit or add content to it, it breaks or the editor keeps spinning and nothing comes up. Then the whole notion that the editor or the template sucks.

What happened?

The trick to all of this is to pay attention to the way the template is structured. There are some specific div tags in the template which starts off with "div#mkt..." which the Marketo editor looks for. This tells the editor which area on the template it is modifying. There are also some places in the code where it says "DO NOT EDIT". Heed the warning unless you know what you are doing. For the most part, there are three "divs" to worry about. I tried to highlight them in the image. Get those right and the template is pretty easy to manipulate.

A buddy of mine asked if I could reverse engineer the template that Marketo uses for the referral program. My template is on the right and I'm pretty proud of it. It does the trick.

 

 While it's not exact it took me an hour or so to recreate this template. To save you some time, I've included the bones for it here. You'll have to replace all the places where the images point to our image library and it should look just like yours and take half the time. If you have a good web person, they can add all the snazzy navigation to match your site in no time.

Enjoy,
Ryan