Editable Email Templates in Pardot
How To
Editable Templates
Email templates can be turned into editable templates using html code.
Types of Editable Regions
Simple: This element can be added to HTML components to make specific things such as a header editable, without making any changes to the styling such as font, size or color. When editing this brings up a simple editor for you to type the required text.
Image: This can be added to images, and 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.
HTML: This region type gives you full HTML capabilities, including the ability to edit a whole area within the WYSIWYG editor. You can add images, format the text, change colors, and even edit the HTML for that area.
With this option it's important to keep in mind that with great power comes great responsibility. It can be tempting to use the HTML tag for everything, but this will make it a lot harder to control how elements of the email are rendered on different devices, and clients will often try to change too much and break their templates using this.
Repeatable: 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.
Set Up
Navigate to your email template in Pardot, and click "Edit Email Template."
Step 1 - Plan
Review your email design and think about which modules should be repeatable (meaning these sections can be duplicated, reordered, or deleted from the design). Any elements you want to be easy to remove or duplicate will need to be built in their own separate module in postcards. (Fig 1-A)
Once you're happy with how your modules are divided, navigate to the html tab. (Fig 1-B)
Fig 1-A
Fig 1-B
Fig 2-A
Fig 2-B
Fig 2-C
Step 2 - Create Repeatable Sections
In the html tab, scroll down in the code past the CSS and preheader text, until you see the green text enclosed in arrows that identifies the names of the modules that are starting/ending. This is how you will identify section breaks in the code. Skip to the section break where the header module ends and the first content module begins. (Fig 2-A)
Immediately after every section break, identify the first element (usually a table) and paste pardot-repeatable into the tag right after the element name and before any styling language. (Fig 2-B)
Switch back to the builder view and double check that you've made the correct section repeatable. You should see a black menu with options to Duplicate, Remove, or Move Up/Down. (Fig 2-C)
Repeat this process for every module in the email code except the header and footer.
Step 3 - Editable Text Regions
In the builder view, identify the text field you'd like to make editable, select it and copy it by highlighting and pressing command/control + c. (Fig 3-A)
Then, go back to the html tab and click inside the code area before pressing command/control + f to bring up the search within code tool. Paste your text into the search bar by pressing command/control + v. (Fig 3-B)
Identify the element containing the text (usually a <td>). Copy either the simple region code pardot-region="Header" pardot-region-type="simple" or the html region code pardot-region="pardot" into the tag immediately after the element name and before any styling just as before. (Fig 3-C)
For these elements, we use the "simple" content region by default, so the client will be able to change the text but not the styling. We recommend this because inexperienced users can easily break the template using html regions.
If the client would like be able to change styling such as color or font size, (your task instructions might say "full html editable") you can use the html region option here instead.
Be sure to click over to the builder view and verify that your text region is now editable. (Fig 3-D)
Repeat this for every text region you anticipate the client will want to edit.
Special Tip for Buttons: For button text, be sure to place the editable region code inside the < a> element, not the containing < td >. (Fig 3-E) You'll need to use an html region (pardot-region="pardot") so the user can change the link url as well as the CTA text (Fig 3-F)
Fig 3-A
Fig 3-B
Fig 3-C
Fig 3-D
Fig 3-E
Fig 3-F
Fig 4-A