Pardot Landing Page Templates Reference Guide
Introduction
Overview of the new Pardot landing page templates, key features, and benefits.
Getting Started
- Access Pardot: Log in to your Pardot account and navigate to the Account Engagement.
- Create a New Landing Page: Go to "Landing Pages" and select "Create New Landing Page."
- Set Basic Information: Enter the name, title, and description for your landing page. Assign a vanity URL if applicable.
- Choose a Layout Template: Be sure to select from the new templates provided.
- Form Only - The only content in this template is a centered, primary form and a background image.
- Form - The upper part of this template features variable content in the left column and a form in the right column. The secondary content is variable and can feature any of the layouts detailed in Secondary Content Snippets.
- Video No Form - The upper part of this template features variable content in the left column and a video embed in the right column. The secondary content is variable and can feature any of the layouts detailed in Secondary Content Snippets. This template will not display a form, even if selected one has been selected.
- Video Secondary Form - The upper part of this template features variable content in the left column and a video embed in the right column. The secondary content features a form.
- No Form - The upper part of this template features a single column of variable content and the secondary content is variable and can feature any of the layouts detailed in Secondary Content Snippets. This template will not display a form, even if selected one has been selected.
- No Form Secondary Form - The upper part of this template features a single column of variable content and the secondary content features a form (despite the name, this template will display the selected form as secondary content).
Template Configuration
When editing the new templates, users can change the template styling using the "Config" Button located at the top-right corner of the editor (See Figure 1.1). It is recommended to finalize content edits before applying template customizations. The theme options available are:
Theme Selection
- Choose between Default, Tint, and Dark themes.
- It is recommended to finalize content before applying these styles.
Form Style Configuration
- Default form style is selected by default.
- Users can choose the Primary style if needed.
-
After selecting, clicking "Apply" updates the
form-typeand thetemplate-styledata attributes.
Advanced Options
It is recommended to use the Configuration Button to update the template theme only after completing content edits. If template changes have already been applied but changes need to be made you can:
- Option 1. Confirm and save the changes then reload the page.
- Option 2. A region labeled "Configuration" (top left-hand corner) (Figure 1.2) is available to click where you can manually update the data attributes for theme styling. This option requires some knowledge of HTML
<!--
data-template style values:
- "default"
- "tint"
- "dark"
data-form-style values:
- "default"
- "primary"
-->
<div class="settings" id="configSettings" data-template-style="default" data-form-style="default">Template Style</div>
Workflow for Content Editors
- Navigate to Landing Pages: Access the Landing Pages section in Pardot.
- Select Template: Choose the appropriate template from the new templates provided.
- Add Content: Use the editor to add and customize content.
- Configure Forms and Themes: Set form styles and themes as required.
- Preview and Test: Ensure everything is correct.
- Save and Publish: Save your work and publish the page.
Code Snippets
If you need to add any elements copy their code and paste them in the html-editor. See Figure 2.1
Button Element
<a href="#" class="a-button --secondary">Learn more</a>
Quote Block Element
<blockquote>
<strong>“I like SEL because of their great customer service and their products are my favorite color.”</strong>
<cite>— Manny Mann, person</cite>
</blockquote>
Stats Section
<div class="m-stats">
<div class="a-stat">
<strong>89%</strong>
<p>of people love SEL</p>
</div>
<div class="a-stat">
<strong>9 out of 10</strong>
<p>customers agree that SEL is amazing</p>
</div>
<div class="a-stat">
<strong>1,684</strong>
<p>customers helped since January</p>
</div>
</div>
Secondary Content Snippets
These options can be placed in the "Secondary Content" region of the following templates: Video No Form, No Form, Form
Single column with image
<div class="container single-column-with-image">
<h2>H2 Secondary content headline</h2>
<img src="https://placehold.co/700x400" alt="placeholder image" />
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus. Quisque nulla molestie faucibus tellus nisl volutpat
scelerisque vestibulum fermentum. Adipiscing malesuada tincidunt viverra vitae malesuada
vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
Single column with video
<div class="container single-column-with-video">
<h2>H2 Secondary content headline</h2>
<div class="video-container">
<div style="padding-top: 56.552%">
<iframe
src="https://players.brightcove.net/694922486001/H1gGhIjGsZ_default/index.html?videoId=1804776752640031250"
allowfullscreen=""
allow="encrypted-media"
style="
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
"
></iframe>
</div>
</div>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus. Quisque nulla molestie faucibus tellus nisl volutpat
scelerisque vestibulum fermentum. Adipiscing malesuada tincidunt viverra vitae malesuada
vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
Single column with stats
<div class="container">
<h2>H2 Secondary content headline</h2>
<p>
Euismod tempus eget potenti tincidunt vestibulum tincidunt praesent gravida eu. Suspendisse
nulla ultrices sit neque sit mattis. Proin turpis egestas fusce lectus adipiscing. Ut suscipit
enim odio feugiat at ante duis eros. Dictumst odio vulputate congue proin ultricies nunc
eleifend mauris amet. Velit duis feugiat pretium faucibus laoreet nisl a. Id amet scelerisque
orci pulvinar nullam consequat lectus iaculis.
</p>
<div class="m-stats">
<div class="a-stat">
<strong>89%</strong>
<p>of people love SEL</p>
</div>
<div class="a-stat">
<strong>9 out of 10</strong>
<p>customers agree that SEL is amazing</p>
</div>
<div class="a-stat">
<strong>1,684</strong>
<p>customers helped since January</p>
</div>
</div>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus. Quisque nulla molestie faucibus tellus nisl volutpat
scelerisque vestibulum fermentum. Adipiscing malesuada tincidunt viverra vitae malesuada
vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
Single column with side image
<div class="container single-column-with-side-image">
<img src="https://placehold.co/500x500" alt="placeholder image" />
<div>
<h2>H2 Secondary content headline</h2>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus. Quisque nulla molestie faucibus tellus nisl volutpat
scelerisque vestibulum fermentum. Adipiscing malesuada tincidunt viverra vitae malesuada
vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
</div>
Two column with media option
<div class="container two-column">
<div>
<h2>H2 Secondary content headline</h2>
<img src="https://placehold.co/700x400" alt="placeholder image" />
<p>
Aliquet urna odio et purus eleifend dignissim. Bibendum mi arcu pellentesque quis
pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices. Tortor varius ut facilisi
nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum diam. Proin fusce in etiam
tellus. Quisque nulla molestie faucibus tellus nisl volutpat scelerisque vestibulum fermentum.
Adipiscing malesuada tincidunt viverra vitae malesuada vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
<div>
<h2>H2 Secondary content headline for a video</h2>
<div class="video-container">
<div style="padding-top: 56.552%">
<iframe
src="https://players.brightcove.net/694922486001/H1gGhIjGsZ_default/index.html?videoId=1804776752640031250"
allowfullscreen=""
allow="encrypted-media"
style="
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
"
></iframe>
</div>
</div>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus. Quisque nulla molestie faucibus tellus nisl volutpat
scelerisque vestibulum fermentum. Adipiscing malesuada tincidunt viverra vitae malesuada
vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
<div>
<h2>H2 Secondary content headline for a section that does not have a button</h2>
<img src="https://placehold.co/500x500" alt="placeholder image" />
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus.
</p>
</div>
<div>
<h2>H2 short headlinee</h2>
<img src="https://placehold.co/600x500" alt="placeholder image" />
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus.
</p>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
<div>
<h2>
H2 Secondary content headline for a section that does not have media but has a blockquote
</h2>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus.
</p>
<blockquote>
<strong
>“I like SEL because of their great customer service and their products are my favorite
color.”</strong
>
<cite>— Manny Mann, person</cite>
</blockquote>
</div>
</div>
Three column with media option
<div class="container three-column">
<div>
<h2>H2 Secondary content headline</h2>
<img src="https://placehold.co/700x400" alt="placeholder image" />
<p>
Aliquet urna odio et purus eleifend dignissim. Bibendum mi arcu pellentesque quis
pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices. Tortor varius ut facilisi
nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum diam. Proin fusce in etiam
tellus. Quisque nulla molestie faucibus tellus nisl volutpat scelerisque vestibulum fermentum.
Adipiscing malesuada tincidunt viverra vitae malesuada vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
<div>
<h2>H2 Secondary content headline for a video</h2>
<div class="video-container">
<div style="padding-top: 56.552%">
<iframe
src="https://players.brightcove.net/694922486001/H1gGhIjGsZ_default/index.html?videoId=1804776752640031250"
allowfullscreen=""
allow="encrypted-media"
style="
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
"
></iframe>
</div>
</div>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus. Quisque nulla molestie faucibus tellus nisl volutpat
scelerisque vestibulum fermentum. Adipiscing malesuada tincidunt viverra vitae malesuada
vulputate auctor dictum.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
<div>
<h2>H2 Secondary content headline for a section that does not have a button</h2>
<img src="https://placehold.co/500x500" alt="placeholder image" />
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus.
</p>
</div>
<div>
<h2>H2 short headlinee</h2>
<img src="https://placehold.co/600x500" alt="placeholder image" />
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus.
</p>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque.
</p>
<a href="#" class="a-button --secondary">Learn more</a>
</div>
<div>
<h2>
H2 Secondary content headline for a section that does not have media but has a blockquote
</h2>
<p>
Vel etiam rutrum in nisl pharetra. Aliquet urna odio et purus eleifend dignissim. Bibendum mi
arcu pellentesque quis pellentesque. Lorem tortor porta mi eu massa accumsan sed ultrices.
Tortor varius ut facilisi nisi risus eu bibendum eget. Odio elit gravida faucibus nisl dictum
diam. Proin fusce in etiam tellus.
</p>
<blockquote>
<strong
>“I like SEL because of their great customer service and their products are my favorite
color.”</strong
>
<cite>— Manny Mann, person</cite>
</blockquote>
</div>
</div>
Footer Links Snippets
These snippets can be used to replace the content in the footer-links region with localized versions
English
<ul>
<li>
<a href="https://selinc.com/company/privacy/" rel="noreferrer noopener">Privacy Policy</a>
</li>
<li>
<a href="https://selinc.com/company/privacy/cookie-policy/" rel="noreferrer noopener">Cookie Policy</a>
</li>
</ul>French
<ul>
<li>
<a href="https://selinc.com/company/privacy/" rel="noreferrer noopener">Politique de confidentialité</a>
</li>
<li>
<a href="https://selinc.com/company/privacy/cookie-policy/" rel="noreferrer noopener">Politique de cookies</a>
</li>
</ul>Spanish
<ul>
<li>
<a href="https://selinc.com/es/company/privacy/" rel="noreferrer noopener">Política de privacidad</a>
</li>
<li>
<a href="https://selinc.com/es/company/privacy/cookie-policy/" rel="noreferrer noopener">Política de cookies</a>
</li>
</ul>Portugeuse
<ul>
<li>
<a href="https://selinc.com/pt/company/privacy/" rel="noreferrer noopener">Política de Privacidade</a>
</li>
<li>
<a href="https://selinc.com/pt/company/privacy/cookie-policy/" rel="noreferrer noopener">Política de Cookies</a>
</li>
</ul>
FAQs
My Theme Changes aren't showing in published
If the theme settings were changed and they're not reflecting go to "Quick Edit" and try selecting the desired theme again and saving. You can also try updating the configuration section's html detailed in Advanced Options: Option 2
I accidentally deleted an element that I need back.
Elements like buttons, stats, blockquotes with reference to the quote author can be easily deleted from the WYSIWYG Editor. If you need to add them back to the page go to Code Snippets to find and copy the code and paste it into the html editor portion of the WYSIWYG Editor.
I can't adjust the "Form Only" template colors
At this time there are no options for adjusting the theme color for the "Form Only" template. The only adjustment you can make is the background image.
What size should the "Form Only" image be?
We recommend at least 1920 x 1080px to ensure the image looks sharp even on large monitors.
Contact Information for Support
Rob Caluza Marketing WebTeam