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 (Content > Layout Template > Add Layout Template). Give your layout template a descriptive name and add your desired tags.
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
- Copy & pasting the HTML source code directly into the editor
- 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.
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.
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.
Download these files, if you haven’t already, and save them on your computer. Upload them into Pardot under Content > Files > Add File
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
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.
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
INSERT YOUR HEADLINE HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis elit ex, at condimentum leo varius porttitor. Ut sed malesuada enim. Cras eget tristique diam. Nam eget accumsan sem, eu pulvinar nisl. Donec quis aliquet dolor, quis finibus leo. Fusce commodo enim est, quis porttitor enim molestie vel. Sed quis sapien egestas nulla rutrum accumsan.
-
This is an important point
Nullam eget sapien fringilla, cursus lectus ac, ullamcorper sapien. Cras dolor nisi, blandit venenatis sapien at, elementum luctus arcu. Pellentesque.
-
This is another important point
Donec a diam at quam pellentesque commodo et sed felis. Nulla efficitur erat eu tortor aliquet semper. Vestibulum aliquet sollicitudin dui id cursus metus.
-
This is an important point
Etiam cursus consectetur lacinia. Donec vehicula dui quam, sit amet facilisis felis tincidunt in. Sed ac eleifend velit, sit amet rutrum nullam.
And my call-to-action title looks like this
CALL TO ACTION TITLE
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.
%%content%%
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.
Testing
Create a landing page to test your new Pardot layout template by going to Content > Landing Pages > New Landing Page and select the new page template.
If you have setup the Pardot editable regions correctly, you should see a dotted box around everything that is editable.
If you double-click into the editable section to make sure the WYSIWYG editor pops up.
My Final Code
Here’s a peak at my final code after turning my sample landing page into a Pardot layout template.
INSERT YOUR HEADLINE HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis elit ex, at condimentum leo varius porttitor. Ut sed malesuada enim. Cras eget tristique diam. Nam eget accumsan sem, eu pulvinar nisl. Donec quis aliquet dolor, quis finibus leo. Fusce commodo enim est, quis porttitor enim molestie vel. Sed quis sapien egestas nulla rutrum accumsan.
-
This is an important point
Nullam eget sapien fringilla, cursus lectus ac, ullamcorper sapien. Cras dolor nisi, blandit venenatis sapien at, elementum luctus arcu. Pellentesque.
-
This is another important point
Donec a diam at quam pellentesque commodo et sed felis. Nulla efficitur erat eu tortor aliquet semper. Vestibulum aliquet sollicitudin dui id cursus metus.
-
This is an important point
Etiam cursus consectetur lacinia. Donec vehicula dui quam, sit amet facilisis felis tincidunt in. Sed ac eleifend velit, sit amet rutrum nullam.
CALL TO ACTION TITLE
41 Comments
Hi Jenna,
I just wanted to say THANK YOU for such a great article.
I was having trouble creating the editable content areas and I was reaching a surrender point but your instructions came and help like a life saver. Now I have a great landing page that the client can reuse and be proud of.
Many thanks!
Carola
Jenna, you are amazing and your content is such a great resource. Have you ever done this before using a page built with WordPress?
WordPress isn’t as cut and dried re: downloading CSS files and zipping images as some other resources like Leadpages. Thanks!
Hi Billy, Thank you! Yes, I’ve done this with WordPress pages. However, I don’t recommend it. A lot of the code associated with Worpdress pages is not needed when it comes to a landing page. If you do decide to use a WordPress page, strip out the javascript and CSS that you won’t need and upload the files into Pardot. Cheers, Jenna
Hi Jenna,
This blog helped me a lot as I am a begineer.
I tried to follow the same steps for creating landing pages. Everything is working fine.
I need some more help.I am not able to edit the content of the landing page. I have included pardot-region tag in the html code. However content is not editable.Not even a simple editor or WYSIWYG editor gets activated when I double click on the editable section on landing page.
Am I missing something?
Thnaks
Deepa
Hi Deepa, I would recommend running the HTML through a validator like https://validator.w3.org/, to ensure that you aren’t missing any HTML closing tags within your landing page. If that doesn’t work send me an email at [email protected] with a link to your page and I can take a look. Cheers, Jenna
HI Jenna!
I find your blog and tutorials super helpful and very detailed. I do have a question however, can you tell me when I create a new landing page template and use a website. How do I get the form to show up on the left or the right hand side instead of at the bottom of my page?
Hi Dawn, You would need to place the %%content%% in the HTML where you would want your form to display. Cheers, Jenna
WOW! It’s really too simple. I am a Ui Developer but till today i was thinking it will too difficult and I was avoiding this kind of work. Thank you sooooo much.