Pardot Knowledge Base

Using Content Regions

Last Updated: Jun 30, 2016 | Print this Article
 

When you design layout templates for your landing pages, you might want to lock the template's styling down and only allow your team to edit certain areas of the landing page like the title, images, or links. Content regions let you block off parts of a template for other users to edit when they use the Landing Page Builder.

Adding Content Regions to Templates

To add  content regions to a template:
  1. Locate the HTML of your layout template.
  2. Add a pardot-region attribute to HTML tags you'd like to make editable. Example: pardot-region="text_2". Fully valid HTML is allowed, for example, data-pardot-region can be used as a tag.
  3. Add a pardot-region-type = "<type>" attribute to override the default editor for certain regions. Available region types are: link, image, html, simple, basic.
This table shows supported HTML tags for content regions, elements, and the editors that are allowed to edit them. Bolded text denotes the default editor for a tag:
Allowed Editors HTML Tags
Link  a
Image  img
HTML  code, pre
Simple, Basic (cke-simple)  address, b, big, blockquote, caption, cite, del, dfn, em, h1, h2, h3, h4, h5, h6, i, ins, kbd, p, q, s, samp, span, small, strike, strong, sub, sup, u, var
WYSIWYG Editor, Simple, HTML, Basic  article, aside, div, dt, dd, figure, figcaption, li, footer, header, main, section, td
None   all other HTML tags
Here's an example of what your layout template's HTML might look like with content regions:

And here is an example of what this layout template looks like in the Landing Page Builder:
Content Regions in the LPB

This video demonstrates how the pardot-region-type attributes from the examples above set the editor for different content regions in the Landing Page Builder. Click here to expand.

Displaying Content Regions in Landing Page Builder

When creating and editing content regions in the landing page builder, in the "Landing Page Content" step, your page may appear broken or not display the correct CSS styling. This is due to the way servers display http:// or secure https:// content, also know as "Mixed Content". If the page is displaying without correct CSS, you will need to have your specific browser allow the script to load. Please click the button below in your specific browser.
Notes:

  • Safari will load page script automatically.
  • As of December 2015, Google Chrome no longer loads the script to show mixed content. We suggest using a different browser when working with Content Regions.

Firefox

Firefox Load Script  

Correct View

Correct Regions

 

Notes

  • If you’d like to add regions to an existing landing page, you will need to copy all existing content in Opening General Content to a temporary location, delete those contents and then save the page. Reopen the page for editing and paste the copied content in the appropriate place after the regions are created in the associated template.
  • Repeatable and removable content regions are not supported by Landing Page layout templates.
  • Content regions must be defined. When defining a region, you may use letters, dashes, and underscores. No other special characters are allowed. For example <div pardot-region="intro_text"> is acceptable, but <div pardot-region="intro text!"> is not.
  • You cannot place the %%content%% tag in a pardot-region. Add the %%content%% tag outside of your pardot-regions or within its own div that does not include a pardot-region.
  • You cannot nest pardot-region tags. Once a pardot-region is added to a <p> or a <div>, that tag must be closed for another region to be added after it.
  • Once you name a pardot-region and the layout template is used on a landing page, do not rename the pardot-region. If you rename the pardot-region, the landing pages built on that layout template may not be able to find and display the correct content.
  • Styling is controlled by the outermost containing element:
    • If you have a form by itself, it will use the layout template for that form.
    • If you have a form on a landing page, the landing page template will take precedent over the form's.
    • If you place a form on a landing page using the landing page builder, it won't use a layout template.
Not what you're looking for? Check out these other articles:
Creating Layout Templates
Variable Tags
Default Form Styling Classes
Landing Pages Overview

Need more? Start a conversation with other Pardot users in our Success Community