Insights
What are pardot-region and how to use them correctly
Pardot is an excellent tool for carrying out the marketing tasks of any company. You can manage your landing pages and edit your email campaigns fully autonomously, modifying texts, updating links or changing images in an easy, quick and intuitive way on the same page. And all without having knowledge about HTML or CSS.
That’s why, when we design templates in Pardot for our clients’ landing pages or emails, the main step is to make them easily editable. And we achieve this with the so-called ‘pardot-region’, the real stars of this article. Next, we are going to tell you everything you need to know about them: what they are, how to use them and the best practices for implementing them.
How to include a ‘pardot-region’.
Once a new template is created in Pardot (either for an email or for a landing page) the next step is to define what content can be edited and what cannot. Because surely not all texts and images are going to change from one replica to another: there are fixed contents that will always remain the same and that will help to give your communications a certain consistency. To make editable content, we just have to add two attributes into the HTML tag that contains the editable content: the ‘pardot-region’ attribute and the ‘pardot-region-type’ attribute.
You should keep in mind that your pardot-region cannot be nested
However, you should keep in mind that your pardot-region cannot be nested, that is, you cannot use a ‘pardot-region’ within an HTML element that in turn is within another HTML element marked as ‘pardot-region’, for example:
<div pardot-region="recipe" pardot-region-type="pardot">
<img src="icon-food.svg" alt="" height="42" width="42" pardot-region="icon" pardot-region-type="image">
<p>Enter your recipe text here</p>
</div>
The above example would not be valid and would give an error when saving your template in Pardot, since the pardot-region with the name ‘icon’ is within the pardot-region ‘recipe’.
The first attribute (pardot-region) is used to identify each of the editable elements. This name will appear in the text editor, so although technically they can be called in any way, we always try to use descriptive texts when naming them: headline, subtitle…
The second attribute (pardot-region-type) is used to define how these contents will be edited. Let’s see a little more about this point…
What ‘pardot-region-type’ to use
This is perhaps the most delicate point. As you will see below, there are many types of ‘pardot-region’ and each one offers our clients different possibilities but also limitations when modifying the contents.
Depending on the ‘pardot-region-type’ we use, Pardot will display one or another more or less complete editing tool. At first it might seem logical to always grant the highest editing privilege. In fact, some of our clients usually request it. But from our point of view it is more practical to always adjust the editing privileges using the ‘pardot-region-type’ that best responds to the needs of each case, giving the necessary freedom but ensuring that the design of the page or its operation are not compromised by a misuse of these privileges. Because the more privileges we grant, the more control is lost over the final result. It is important to remember that the function of Pardot is to update contents quickly and autonomously, but it is not intended to redesign templates, for which there are undoubtedly better alternatives than this.
Always adjust the editing privileges using the 'pardot-region-type'
Next we will take a look at what types of pardot-region exist and what are the best practices when implementing them. There are six types: simple, basic, wysiwyg, link, image and code. Let’s take a look at each of them in detail.
Simple:
<h1 pardot-region="title" pardot-region-type="simple">
Insert the page title here
</h1>
This is the most basic of all the ‘pardot-regions’ that exist, but that does not make it less useful. We like it a lot because it offers, the simplicity that our customers are looking for but also the option to take care of the design control. With this ‘pardot-region’, you can only modify the text without affecting its style: font, color, size, line spacing, tracking… When do we use it? Mainly in short texts with a lot of weight and a strong personality within the landing page or the newsletter, such as headlines.
Basic:
<p pardot-region="text" pardot-region-type="basic">
Insert your text here
</p>
Sometimes our customers, in addition to modifying a text, need to have some control over its appearance, such as adding links or using bold or italics. For these cases, we have the basic ‘pardot-region’, which allows you to open the content of the tag in a basic text editor.
WYSIWYG (Pardot):
<p pardot-region="text" pardot-region-type="pardot">
Insert your text here
</p>
This is the most complete of all content regions offered by Pardot. It’s like the basic ‘pardot-region’ but extended: it allows you to insert text, images, source code, links, tables, or lists through a WYSIWYG (What You See Is What You Get) type editor. You can also modify the size and color of the fonts. This option gives our customers a lot of freedom and provides a plus of versatility that the rest of the ‘pardot-regions’ don’t have. But as we have already seen, it also means more problems, mainly because it requires an effort to anticipate all the possible uses the customer is going to make and apply a design solution that maintains the coherence and consistency of the page. Our opinion: do not use it!
Link:
<a pardot-region="cta" pardot-region-type="link" href="http://okbinteractive.studio/">
Enjoy your discount
</a>
This type of ‘pardot-region’ allows to update call-to-actions in an optimal way, since it offers the possibility to change the url and also the label, without privileges to modify its style. The client is responsible for making catchy texts for the call-to-actions but without altering their appearance, as we are talking about very important elements when defining the effectiveness of landing pages and emails.
Image:
<img pardot-region="hero" pardot-region-type="image" src="img/IMG-011.jpg"/>
With this ‘pardot-region’, users can easily swap different images on the landing page. An aspect to consider when using this ‘pardot-region’ is that, when we develop the HTML of a template, we always optimize the images so that their weight does not affect the page load (images usually account for approximately around 60% of the total page loading time). Using this ‘pardot-region’ makes it easy to update images but it is important to load images with a resolution adjusted to the size they will finally be displayed.
Code (HTML):
<div pardot-region="tag" pardot-region-type="html"></div>
This allows direct access to all the code contained in the tag in which we have introduced the ‘pardot-region’ attribute. We use it for example when there is a need to introduce custom scripts in each of the landing pages or to embed an iframe. Apart from these uses, this type of ‘pardot-region’ is not our cup of tea and probably not to most customers either, as the goal of Pardot is precisely to facilitate the work of those not usually familiar with code. This option is undoubtedly much less ‘friendly’ and also opens more possibilities for error than the rest of the ‘pardot-regions’.
As you have seen, Pardot is a great ally in your day-to-day marketing tasks, but it needs some control so that all your communications maintain visual consistency. Using the appropriate ‘pardot-region’ in the right place will save time, avoid errors and facilitate the daily work of the people in charge of managing the content, people more focused on marketing but perhaps with no HTML knowledge.
If you wish, at OKB Interactive Studio we have a lot of experience managing landing-pages and email campaigns in Pardot, so we can help you develop the best templates for your company’s marketing actions. Get in touch with us.
Did you find this post interesting? Share it!
Your contacts will like to read it, for sure!
