How to Turn any Landing Page into a Pardot Layout Template

In:

In this tutorial, you will learn how to turn any landing page into a Pardot Layout Template that can be used across all your Pardot marketing campaigns. You can use an existing landing page, a free template, a paid template from a marketplace like ThemeForest, or an existing page on your website.

Step 1: Create a new layout template in Pardot

Create a new layout template in Pardot (Marketing > Landing Pages > Layout Template > Add Layout Template). Give your layout template a descriptive name and add your desired tags.

create-pardot-landing-page-template

Step 2: Import Your Own Landing Page

For this tutorial I will be using this landing page as an example, but you can follow along with whatever landing page you want.

There are 2 ways you can import your landing page into Pardot

  1. Copy & pasting the HTML source code directly into the editor
  2. Using the Import layout from URL option that Pardot offers

Both ways are pretty similar. Let’s break down the 2 ways.

1. Copy & pasting the HTML source code directly into the editor

You can view the source code of the landing page in Chrome by navigating your landing page > right click > view page source. Copy all the code that is there and paste it into your layout template editor.

pardot-landing-page-template-view-source

2. Using the Import layout from URL option that Pardot offers

Copy your landing page URL, then navigate to your Pardot layout template. Click on import layout from URL and paste in the landing page URL.

pardot-landing-page-template-import-url

Both ways will give you the same result.

Step 3: Upload Your Images and Files

Now that all the landing page HTML is loaded into Pardot, the images and files linked on the page are not imported yet.

There are a couple different types of files that will need to be imported into Pardot

  • All images (.jpg, .gif, .png, etc)
  • All CSS files (.css)
  • All Javascript files (.js)

In my landing page template there are 3 files that I need to download.

  1. Styles.css
  2. logo-placeholder.png
  3. feature-image.jpg

Download these files, if you haven’t already, and save them on your computer. Upload them into Pardot under Marketing > Content > Files

pardot-upload-files

Replace the URL to the old files in your page template by copy and pasting the URL that Pardot generates when you upload the files

pardot-content-upload

pardot-landing-page-template-replace-content

Repeat this process until all your images and files are in Pardot.

Step 4: Create editable Text

The next step is where you choose what content should be editable within the Pardot landing page editor. You can create as many editable sections as you want, but I recommend limiting it so your layout and branding is consistent across all Pardot landing pages. For this example, I’m going to make the main content area editable and the call-to-action title editable as shown below in yellow.

pardot_landing_page_example_screenshot_editable

To create an editable section, wrap a DIV around the content like this

For my example, I’m left with this HTML for my main content section

And my call-to-action title looks like this

Repeat this process for all the sections you want to make editable.

Step 5: Add the Form

If you want to have the ability to add a Pardot form on the page, you will need to add this tag to your page where you want the form to go.

pardot-landing-page-template-replace-form-1

pardot-landing-page-template-replace-form

Step 6: Edit the Title

Lastly, replace the title in the HTML of your template to this to dynamically display the name of the landing page in the browser.

pardot-landing-page-template-replace-title

pardot-landing-page-template-replace-title-2

Testing

Create a landing page to test your new Pardot layout template by going to Marketing > Landing Page > New Landing Page and select the new page template.

pardot-landing-page-creation

If you have setup the Pardot editable regions correctly, you should see a dotted box around everything that is editable.

pardot-landing-page-edit-content-1

If you double-click into the editable section to make sure the WYSIWYG editor pops up.

pardot-landing-page-edit-content-2

My Final Code

Here’s a peak at my final code after turning my sample landing page into a Pardot layout template.

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 19/05/2016
    How to Use a Pardot Form to Gate Content on a Page

    In this tutorial you will learn how to use a Pardot form to gate content on a page. Gated content allows you to capture a lead’s information, by asking them to provide contact details before accessing a piece of content that is valuable. Instead of creating more than one page for the gated content and form, this tutorial will focus on creating a popup on the page that contains the asset.






  • 17/05/2016
    Advanced Marketo Form Techniques Part 2

    Customize your Marketo forms even more by using these 3 advanced Marketo form techniques. Learn how to show a thank you message after a form submission, how to limit word count on text fields and how to block free email addresses from form submissions.






  • 28/04/2016
    Pardot Inspiration: Using Pardot for Event Registration

    This month I was challenged with creating a landing page for event registration using Pardot. The event had 15+ roundtable sessions in the morning (within 2-time slots) and an option to register for the afternoon session (keynote, happy hour etc). Here’s a sneak peak into how I built it along with some code if you want to try building something similar for your next event.






19 comment(s)
  • Janet

    03/08/2016 at 3:48 am
    Reply

    I know how to create a landing page professionally but don't know convert to a pardot layout template. Your direction helps us to create this template successfully as my background is developing.

  • Miomir

    19/07/2016 at 8:37 am
    Reply

    Hello Jenna, Thanks to your article I've successfully finished demanding job for my client. Thank you for generously gifted knowledge.

    • Jenna Molby
      to Miomir

      19/07/2016 at 11:03 am
      Reply

      So happy you found it helpful!

  • Kelsey

    24/06/2016 at 11:12 am
    Reply

    Thank you so much! This has been SO helpful. Is there a way to make the featured image editable as well? Thanks you for your help!

    • Jenna Molby
      to Kelsey

      24/06/2016 at 1:20 pm
      Reply

      Hi Kelsey, Glad you found it helpful! To make the featured image editable as well, you can wrap the image in a DIV tag like this .

    • Laura Lee
      to Jenna Molby

      29/06/2016 at 12:04 pm
      Reply

      Hi Jenna, Can you show the example of how to make the image editable? I know you said to wrap the div code around the image, but I would like to see what it looks like. Thanks!!

    • Jenna Molby
      to Laura Lee

      29/06/2016 at 3:05 pm
      Reply

      Hi Laura, Here's an example of an editable image. <div pardot-region="featured-image" > <img src="http://go.pardot.com/my/path/feature_image.jpg" / > </div> Let me know if you have any questions. Thanks!

    • Laura
      to Jenna Molby

      30/06/2016 at 8:42 am
      Reply

      Great! Thanks! This site is very helpful!

  • Natalie

    09/06/2016 at 11:23 am
    Reply

    Hi Jenna, This has helped so much! Thank you! I am using an HTML template from Themeforest for my Pardot landing page - it is working perfectly using your method, except the font awesome icons are not displaying correctly. Do you have any idea how to fix this?

    • Jenna Molby
      to Natalie

      09/06/2016 at 2:18 pm
      Reply

      Hi Natalie, So happy you found it helpful! Do the font awesome icons show up when you view the live page? You might need to open the CSS file (font-awesome.css) and update the links to the Pardot version of the font files ex. src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');. This should be the first couple of lines in the file.

    • Natalie
      to Jenna Molby

      10/06/2016 at 12:36 am
      Reply

      Hi Jenna, Thank you so much for your response. It still doesn't seem to be working - I have included the correct path to the font files in the font-awesome.css file, but the icons are still not showing up. Not sure if I am doing something wrong. Path is http://www.domain.co.za/cqs-cloud-sec/vendor/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 Is that right?

    • Jenna Molby
      to Natalie

      10/06/2016 at 9:14 am
      Reply

      Hi Natalie, Feel free to email me your landing page URL to jennamolby@gmail.com and I can help you troubleshoot :)

  • Jaap

    31/05/2016 at 2:43 am
    Reply

    This works perfect, thanks a lot! My only problem now is that I'd like my custom Pardot form to have the responsive look as well, but the I cant get the css styles to work here. Would you have any ideas on how to fix that? Thanks, Jaap

    • Jenna Molby
      to Jaap

      01/06/2016 at 1:41 pm
      Reply

      Hello! Glad you found my post helpful! If you are having trouble styling your forms, check out my Pardot Form Style Generator (http://jennamolby.com/pardot-form-style-generator/) which will take the Pardot's default styles and allow you to customize them.

    • Jaap
      to Jenna Molby

      08/06/2016 at 12:18 am
      Reply

      Thanks Jenna! Worked again :-).

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

I’m a Marketo & Pardot expert with a strong background in design and development. I specialize in email marketing, lead nurturing and CRM integrations for marketing and sales alignment. LEARN MORE

Categories
Most Commented
Popular Posts