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


Last Updated:
February 2nd, 2024

Number of Downloads:
200+ Downloads

Documentation
Click here to view the documentation

Support


Free, basic support is included. The basic support package includes:
  • Free bug fixes
  • Assistance with edits 
The basic support package does not include:
  • Adding custom CSS or HTML to the landing page
  • Making CSS edits beyond matching the existing template to your brand guidelines 
If you need additional support with your template, contact us and we can provide you with a quote.