Editable Email Templates in Pardot

How To

Editable Templates

Email templates can be turned into editable templates using html code.

Editable Image Success

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

Fig 4-B

Step 4 - Editable Images

Locate each image in the html by searching part of the file name, or searching ".jpg" or ".png"

Paste the editable image code (pardot-region="editable-image" pardot-region-type="image") between the img tag and the src part of the code. (Fig 4-A)

When you go back to the builder view, you'll see the options to change out the image, update the link, alt text, and adjust the size. (Fig 4-B)

Congrats, you are done!

Do a final scroll through of your template and pretend you are the user that will be using the template in the future. Is every image or text element that could need to be changed editable? Are all your sections repeatable? Once you're satisfied, your editable email template is ready to be saved!