Dempsey Pardot Template Documentation

Purchase the template

Purchase the premium Pardot template here.

How to import the template into Pardot

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 Pardot, create a new Layout Template (Marketing > Landing Pages > 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 Pardot, navigate to Marketing > 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 -->

Column 1 text

</div>

Column 2 text

</div>

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 -->

Column 1 text

</div>

Column 2 text

</div>

Column 3 text

</div>

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 -->

Column 1 text

</div>

Column 2 text

</div>

Column 3 text

</div>

Column 4 text

</div>

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 -->

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

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 -->

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

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 -->

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

<h3>John Smith</h3>

<p>Marketing Manager <br />Company Name</p>

</div>

Support

Have a question? Need help with the template? Email [email protected] with your questions and a link to your landing page (if you have one).