Whoa there, partner! This is an advanced topic that assumes an intermediate knowledge of HTML email design.
Pardot’s email editor supports a great feature – content regions. For most basic emails, you can open up any email template and edit any table cell or paragraph; every chunk of content will be editable. But what if you’re an administrator or designer and don’t want to give full editing powers to the people who make small content changes to your emails? With email regions, you can easily lock down the email template so that only sections that you specify are editable.
The Pardot email editor supports three attributes you can add to HTML elements to toggle a template into a region based mode: pardot-region, pardot-repeatable, and pardot-removable. Let’s take a look at what these attributes do and how to use them.
This is the most important attribute to add. If you don’t have one of these in your region-based template, you won’t be able to actually edit anything without going into the HTML. Here’s a great example of how to use pardot-region:
You can also specify a value to help keep track of your sections for personal use, but it will have no effect on the editor:
You can put these on any element, but a best practice is to only put them on <div> and <td> tags. Whatever is inside the containing element where the attribute is specified is what will show up in the editor when you edit that region. So for things like <img> tags, nothing will show up in the editor because it has no content inside of it. Instead put pardot-region on the element surrounding the <img> element.
With the editor, we removed the ability to add and remove tables, table rows, and table cells. This limits your formatting ability inherently and intentionally. Email layouts are a messy business, so only people who are very familiar with HTML code should really be tweaking the layout of a template.
Instead, we offer a multitude of Pre-Formatted Layouts which offer a great foundation for building your own email. These layouts incorporate all our recommended best practices and already have region attributes included. Additionally, you can add pardot-repeatable content if you want certain sections repeatable when using region based templates.
Let’s say you had a section of your email that had a title, a paragraph of text, and a “read more” link at the end. In one month’s newsletter you want one of these sections; in next month’s newsletter you want three sections. To do this you can easily wrap that content with a pardot-repeatable attribute:
<div pardot-repeatable> <div pardot-region> <h1>Title</h1> <p>A paragraph of text</p> <a href="#">Read More</a> </div> </div>
In addition to <div> tags, you can also add the attribute to <tr> tags. This will copy and paste everything in the row right beneath your copied section. You can add the attribute to any element, but remember it will be copying and pasting whatever that element and all of its contents directly below the copied section. If this attribute is applied to <td> tags, it may cause some unexpected results with your layout because it will continue to add <td> and stretch the table horizontally instead of vertically.
The other thing to keep in mind with pardot-repeatable is that content inside of it has to be specified as pardot-region to be editable. This is again so that structural editing can’t be changed in the visual editor. Here’s a good example:
<div pardot-repeatable> <table> <tbody> <tr> <td pardot-region> <h1>Title</h1> </td> <td pardot-region> <p>A paragraph of text</p> </td> <td pardot-region> <a href="#">Read More</a> </td> </tr> </tbody> </table> </div>
Regions specified with pardot-repeatable can be copied and deleted in the editor toolbar. Repeatable regions have a light blue background when you’re hovering over them in the editor to indicate you can copy them.
Removable regions are very similar to repeatable regions except they can only be removed. This can be helpful in a template if you create one master template with all of the available sidebar setups and then users can simply remove the various sections they don’t need when actually creating the email.
Here’s a simple example:
<td width="200"> <div pardot-removable="sidebar-1"> <div pardot-region> <h1>Title</h1> <p>A paragraph of text</p> <a href="#">Read More</a> </div> </div> <div pardot-removable="sidebar-2"> <div pardot-region> <a href="#"><img src="example.png" alt="Example"/></a> </div> </div> </td>
As with repeatable regions, we recommend that you don’t use this on <td> tags, and any content inside of removable regions also needs to be specified as editable for users to make changes to it.
That’s it! It’s simple to enable greater control for those comfortable with HTML with the pardot region attributes. Two important things to keep in mind:
- If you add any Pardot region attribute to your template, it will instantly toggle the editor into region mode and only allow you to edit content specified with pardot-region.
- For content to be editable, it has to have a pardot-region attribute in the parent element definition. pardot-repeatable and pardot-removable do not equate to content being editable.
- Only one region type can be specified on an element, so things like: <td pardot-region pardot-repeatable> won’t work. Instead it should be something like: <tr pardot-repeatable><td pardot-region>.
For more detailed examples of how regions work and are coded, create a new template from one of our Email Blueprints and view the source. All of our blueprints are built with regions so we can continue to build great features to allow greater control over emails from both a designer and editor’s perspective.