A layout template controls the style of various web elements managed by Pardot. Layout Templates are used for landing pages, forms, and site search results.
- Navigate to Marketing > Landing Pages > Layout Templates.
- Click the + Add Layout Template button.
- Enter a Name that will be used internally to organize your templates. Use something descriptive (e.g., “Site Search Results Layout”) if you plan to use multiple layout templates. This will help you keep track of which template controls the styling for each of your marketing elements.
- The Layout tab controls the look and feel of your marketing elements using HTML and CSS. Simply enter %%content%% wherever you would like for the form, site search results, or landing page opening general content to appear within your design. You may also use %%title%% to pull in the title of the landing page and %%description%% to pull in a description from you landing page. See Variable Tags below for more details.
- You can also import your styling by clicking Import layout from URL. Simply enter the URL and click Import now. You will need to edit the output by qualifying any URLs as they will all need to be absolute instead of relative (e.g., change “/images/image.gif” to something like “http://www.site.com/images/image.gif“).
- The Form and Site Search tabs consist of Pardot substitution logic statement, illustrating how the various form fields, content, and other elements will be displayed. Advanced users can customize this logic based on their business needs.
There are three Pardot variable tags you may add to your layout template.
- %%title%% — The %%title%% variable tag will pull in the title for the page. For landing pages, the title entered in step 1 when creating a landing page will replace the %%title%%. Pardot will fill in the title for your unsubscribe and email preference center pages.
- %%content%% — Enter the %%content%% variable tag where you would like the form, site search results, or landing page opening general content to appear within your design.
Please do not place the %%content%% tag inside of a <p></p> tag — doing so affects the styling of the form in different Internet browsers.
- %%description%% — The %%description%% variable tag can be added to the head section of your layout template. This will pull in the description that is added in step 1 of the creating a landing page. See the Increasing Your SEO through Tags article for more details.
When you are designing a landing page, you may want to allow your team to only edit specific regions (i.e. Title, Content, Form) to make small changes, while keeping the remaining styling un-editable. With landing page regions, you can easily lock down the layout template so that only sections that you specify are editable. Now designers can create one template and allow others to make changes without having to create multiple templates for only a few small changes.
To do so, you can add an attribute to many of the tags in the HTML of your Layout Template called “pardot-region” (without the quotes) to make those sections in the Template editable on the Landing Page. You can give it any unique name to help identify which region you’re creating. Fully valid HTML is allowed, for example, data-pardot-region can be used as a tag.
You can also override the default editor type for certain regions with region overrides. Overrides can be utilized by adding attributes like pardot-region-type=”basic” or data-pardot-region-type=”basic” to the element containing pardot-region or data-pardot-region. Both attributes are needed for a region to be editable and to select an editor type. To see which elements can access which editors, please see the table below.
This table denotes the accepted and 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|
|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|
|Editor, Simple, HTML, Basic||article, aside, div, dt, dd, figure, figcaption, li, footer, header, main, section, td|
|None||all other HTML tags|
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.
* Safari will load page script automatically
- If you’d like to add regions to an existing landing page, you will want to copy all existing landing page “content” within the editor and paste it back accordingly after the regions are created.
- Content regions must be defined. The only limitations on how you define the pardot-region are in regards to the characters used. When defining a region, you may use letters, dashes, and underscores. No other symbols or spaces will be accepted. 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 relying on that layout template may break as they will not be able to find the regions by name and will not know where to place the existing content.
- Remember, the landing page is still styled by CSS set in the layout template, but content regions allow you to modify certain areas of text and images via the landing page wizard.
- 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 have a form on a landing page using the landing page builder, it will use no layout template at all.