So you have written a load of HTML, you have an email you are proud of, you stick the code into the HTML tab in Pardot, go into the editor, and something does not seem quite right. When you are building email templates for Pardot, you need to make sure they are ‘Pardot Friendly’, you do this by breaking the email into chunks called Pardot Content Regions. If you do not do this, you may have issues editing or have to start from scratch each time.
What are Content Regions?
Content Regions are small bits of code that tell the WYSIWYG (‘What you see is what you get’) editor what is editable and the types of edits that are possible. It is essential to get your content regions added and correct otherwise users may not be able to edit parts of the template without changing the HTML. This gives you the power to grant your marketing team the ability to quickly set up and send emails, without writing a single line of code.
What types of content regions are there?
This element can be added to HTML components to make specific things such as a header editable, without making any changes to the way it looks and feels such as font, size or colour. When editing this brings up a simple editor for you to type the required text.
<h1 pardot-region="Header" pardot-region-type="simple">Text Goes here</h1>
This can be added to (As the name suggests) images; this gives the ability for users to swap the image while all other formatting remains. From this editor, you can select the image you would like, add Alternative text, set up a link if it is clicked and set the size of the image. There is also a handy button to reset the image to the original size; this is useful when swapping one image for another that are different sizes or proportions.
To add an image, select one that you have already loaded into your content file from the drop-down or select Custom URL and add the URL of the image, this is useful if you are adding a placeholder or an image already hosted elsewhere and want to keep things inline.
<img pardot-region="editable-image" pardot-region-type="image" src="http://placehold.it/200" alt="alt_text" />
The link editor, just like the image editor above is designed for swapping out links. This tag is great to use for buttons where the design stays the same, but the link destination or link text changes. This brings up the URL editor when used.
<a href="http://chendysworld.com" pardot-region="editable-link" pardot-region-type="link">Button ►</a>
The editor that most are familiar with is the HTML or the ‘Pardot’ region this gives you full HTML capabilities, it gives you the ability to edit a whole area within the WYSIWYG editor, you can add images format the text change colours and even edit the HTML for that area.
As you can expect this is one of the more widely used tags due to the freedom that’s given when editing due to its power. Although like most things with great power comes great responsibility. It is easy to use the HTML tag for everything, but this can make it a lot hard to control how elements of the email are rendered on different devices. Sometimes it is best from both a user experience point of view to edit links and button without having to worry about breaking the HTML and from a design point of view where you can control how elements move or resize when viewed on a smaller device.
<div pardot-region="pardot"> I can add <strong>HTML</strong>here and <u>format it that way I would like</u>, <span style="color:#FF0000;"> even including <span style="background-color:#000000;">images</span> </span> <br /> <img alt="Logo" border="0" height="62" src="https://chendysworld.com/logo.png" style="width: 153px; height: 62px; border-width: 0px; border-style: solid;" width="153" /> </div>
The repeatable tag is used to clone regions within the template, it also gives you the ability to move content around the page (As long as the content around it is the same width) this makes your templates easy to customise to make them individual each time.
<div pardot-repeatable> <table> <tbody> <tr> <td pardot-region> <h2>Section Header</h2> </td> </tr> <tr> <td pardot-region> <p>Section body text goes here!</p> </td> </tr> </tbody> </table> </div>
Removeable content lets you remove parts of the email template. This can be useful if you have a master template that has multiple components such as an attention-grabbing banner that will not always be in use, and you don’t want to create 100’s of variations of the template.
<tr pardot-removable="subheader"> <td pardot-region> <h1>Subheader</h1> </td> </tr>
Putting Content Regions into practice
When deciding which region you should use, think about how it will be used in the future. For example, the legal text that is required at the bottom of the email and the opt-out link should always stay the same, and if it does change it would need to be updated for everything. So it makes sense that you are not able to edit this. Headers & Subheaders are likely to be in the same format and location within the email so it makes sense that they are simple so they can be quickly updated.
Play around, test and get user feedback. You will then be on track to have an email template that is simple you use, quick to create emails and keeps everything on brand.
Also published on Medium.