Pardot Landing Page Template Documentation
Purchase the template
Don't have the template yet? Purchase the premium Account Engagement template here.
How to import the template into Account Engagement
Once you purchase the template you will receive an email with a link to download the files. The link will take you to a page where you can download each of the 4 HTML template files.
Once you download one of the HTML templates, open them up in your browser. Right-click on the page and select view page source and copy the entire HTML. Note: You can also open the HTML file in a text editor, such as notepad or any other editor to view and copy the HTML.
In Account Engagement, create a new Layout Template (Content > Layout Templates > Add Layout Template), give your template a name and paste the copied HTML into the Layout tab.
Customize the template to match your brand
Add your logo
In Account Engagement, navigate to Content > Files, upload your logo and copy the URL of your image.
Navigate to your Layout Template and replace the image URL with your copied URL. Also, update the link to the URL of your website.
Update the colours, fonts, font sizes, etc
To update the colors, fonts, font sizes, etc, navigate to your layout template and edit the lines of CSS where it says "EDIT THE VALUES BELOW TO UPDATE THE TEMPLATE TO MEET YOUR BRAND GUIDELINES".
Update the hero background image
If you have downloaded the template that supports a hero background image, you can easily update the background image. Navigate to the landing page within the editor and click on the hero background image editable section. Choose from one of the options to change the background image. Note: When you upload a background image it won't appear within the editor until you save and refresh the page.
The recommended hero image size is 1350px x 650px.
Update the footer text
The footer text can be updated within the HTML in the Layout Template. The footer text is also an editable region, so you can update it directly within the WYSIWIG editor.
Update the social links and icons
Update the social icons and links within the HTML in the Layout Template. They are also an editable region, so you can easily update them using the WYSIWIG editor. The icons are by Font Awesome. To add an icon search for it in the Font Awesome library, click on the icon you want to use and click copy icon to copy the HTML.
You can also use your own images or icons instead of the Font Awesome social icons. Just upload your images into Pardot and replace the icons with your own images.
Code Snippets
You might want to add sections to some of your landing pages. Here are some code snippets that you can copy and paste directly into a landing page.
Two column section
<!-- Start Two-Column Section -->
<div class="row">
<div class="col-md-6">
Column 1 text
</div>
<div class="col-md-6">
Column 2 text
</div>
</div>
<!-- End Two-Column Section -->
Three column section
<!-- Start Three-Column Section -->
<div class="row">
<div class="col-md-4">
Column 1 text
</div>
<div class="col-md-4">
Column 2 text
</div>
<div class="col-md-4">
Column 3 text
</div>
</div>
<!-- End Three-Column Section -->
Four column section
<!-- Start Four-Column Section -->
<div class="row">
<div class="col-md-3">
Column 1 text
</div>
<div class="col-md-3">
Column 2 text
</div>
<div class="col-md-3">
Column 3 text
</div>
<div class="col-md-3">
Column 4 text
</div>
</div>
<!-- End Four-Column Section -->
Two-column speaker section
<!-- Start Speaker Section -->
<div class="row speakers">
<div class="col-md-4 offset-md-2">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
</div>
<!-- End Speaker Section -->
Three-column speaker section
<!-- Start Speaker Section -->
<div class="row speakers">
<div class="col-md-4">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
</div>
<!-- End Speaker Section -->
Four-column speaker section
<!-- Start Speaker Section -->
<div class="row speakers">
<div class="col-md-3">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/180x180?text=Speaker" />
<div class="speaker-title">
<h3>John Smith</h3>
<p>Marketing Manager <br />Company Name</p>
</div>
</div>
</div>
<!-- End Speaker Section -->
Support
Have a question? Need help with the template? Contact us with your questions and a link to your landing page (if you have one).
Get the template
Get instant access to the template and start building your beautiful landing pages now.
Template Details
Support
- Free bug fixes
- Assistance with edits
- Adding custom CSS or HTML to the landing page
- Making CSS edits beyond matching the existing template to your brand guidelines