Pardot Knowledge Base

Creating Layout Templates for Landing Pages

Last Updated: Jul 06, 2016 | Print this Article
 
This article covers creating a layout template for landing pages.  
If you're brand-new to layout templates, or just want to brush up on your skills, check out our Layout Templates training materials.

Create a Layout Template

  1. Navigate to Marketing > Landing Pages > Layout Templates.
  2. Click + Add Layout Template.
  3. Enter a Name. This is used internally to organize your templates. Use something descriptive (e.g., “Whitepaper Download Landing Page Layout Template”) 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.
  4. The Layout tab controls the look and feel of your landing page using HTML and CSS. This is where you will want to paste in your preexisting HTML and CSS code. In addition to your own HTML and CSS, you may want to include some Pardot variable tags to dynamically pull in a form, title, etc. See Variable Tags below for more information.
  5. Optionally, you can 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 (for example, change “/images/image.gif” to something like “http://www.site.com/images/image.gif“). You may also need to strip out existing content to make room for a Pardot form or any regions you'd like to make editable. You can find more on content regions here.
  6. The Form tab and the Site Search tab 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.
  7. Once you've brought in all the desired HTML and CSS, click Save Layout Template.
  8. Before jumping to Creating a Landing Page, review the two methods below to determine your next step:
  • If you’re ready to create a landing page using this layout template, see this article to get started. Following this method means the content and styling in your layout template will be brought into your new landing page. The styling of the new landing page will not be editable within the Landing Page Builder; you must make any desired styling edits to the corresponding layout template
  • If you'd like to make certain regions of this layout template editable within the Landing Page Builder, check out our article on Content Regions.

Variable Tags

There are three Pardot variable tags you may add to your layout template:
  1. %%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.
  2. %%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.
  3. %%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 Meta Tags article for more details.

Content Regions

Content regions expand the flexibility of layout templates, making it easier to create multiple landing pages from a single layout template. Read more about setting up content regions here.

Not what you're looking for? Check out these other articles:
Landing Pages Overview
Creating Landing Pages with Layout Templates
Creating Landing Pages Using Stock Templates
Landing Page Scenarios and FAQ

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