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 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.
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.
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). Generally, you will leave the header and footer as non-editable regions. (Fig 1-A)
Once you have an overview of the sections you’re working with, 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 copy “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)
Immediately after every section break, identify the first element (usually a table) and copy “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
Next, we’ll identify individual text elements that should be editable. For these elements, we’ll use the “simple” content region, so the client will be able to change the text but not the styling. If the client would like to change styling such as color or font size, you can use the html region option here, but do so very sparingly because inexperienced users can easily break the template using this feature.
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. Copy the simple element text (pardot-region=”Header” pardot-region-type=”simple”) into the tag after the element name and before any styling just as before. (Fig 3-C)
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 pardot region code inside the < a> element, not the < td >. The < td > controls the whole button, while the < a > controls the text only. (Fig 3-E) Also, you’ll need to use an html region so the user can change the link url as well as the CTA text (pardot-region=”pardot”) (Fig 3-F)
Fig 3-A
Fig 3-B
Fig 3-C
Fig 3-D
Fig 3-E
Fig 3-F
ig 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!
