Create beautiful, responsive landing pages in Pardot by using one of these 2 free Pardot layout templates. These landing page templates are designed specifically for events such as webinars or trade shows, but they will work well with any landing page that contains a form.
Terms
These templates are free for both commercial and personal projects. No attribution is required, however, if you use them I would love to see how you customize them. Share your templates with me through Twitter, email, or in the comments below.
Preview the Templates
Template 1
Template 2
How to Use the Templates
1. 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.
2. Copy the link to the template by clicking on one of the ‘copy link’ buttons below. This will copy the URL to your clipboard.
| Template #1 | View Demo |
| Template #2 | View Demo |
3. Navigate to the import layout drop down and select from URL. Paste the URL to the template into the text field and click import now.
Customizing Basics
All templates use the Bootstrap Framework and use Font Awesome for the social media icons. The CSS is directly in the template (no external CSS files are referenced other than the Bootstrap and FontAwesome library). You can easily modify the template to meet your branding requirements by modifying the hex codes directly in the template which are commented clearly within the template file.
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment
Looking for more Pardot Landing Page Templates?
Check out my free asset templates and my premium landing page template.
Can’t find what you’re looking for? I also create custom Pardot Landing Page Templates.
Hi Jenna, I am using your template #1 while also using it as inspiration to begin building my own! I have one question regarding the javascript code at the very bottom at the very bottom of the code. The first function is for placing the form either before or after the highlight which I understand. And below that, the function is being called on a document. What document is this referring to? You are also adding an EventListener to the window as a whole, is this what tracks the size of the browser window?
I see there is a Download link right above (labeled “open-form desktop-hide”). Does this mean this download link is only visible on mobile devices?
Thanks! Great Template!!
Hi Jenna,
Love these templates, Thank you!
If I use your workaround for the image banner, will this affect the landing page only or will it change it at the template level as well. Thanks!
Hi Jenn, So happy you like them! It will affect the landing page. If you use that method you can choose a different banner image for each landing page. Cheers, Jenna
These templates are wonderful, Jenna. Thank you so much for providing them!
These templates are fantastic – but I’m having some challenges with getting my form to show up instead of the placeholder.
Hi Lou, Thank you! You might be importing the preview links instead of the template links. Make sure you use one of these two links: template 1 (https://jennamolby.com/Pardot-Templates/Event-Template-1/pardot-template.html) template 2 (https://jennamolby.com/Pardot-Templates/Event-Template-2/pardot-template.html). Cheers, Jenna
Hi, this is fantastic! Is it possible to make the banner image itself an editable region so I can swap the image without having to modify the template? Thank you!
Hi Lou, thank you! The background image has to be edited using CSS, but there’s a workaround to have a different background image per landing page. Add this HTML right after the opening BODY tag <div pardot-region="background-image-css"></div> This will create an editable section available within the top left corner of the landing page editor. You can then use that section within the editor to modify the landing page’s CSS. Here’s the CSS for the background image section: <style type="text/css">
</style>
Pardot adds CDATA around any CSS outside of the BODY tags.
You need to edit this region and escape the CDATA tags –
Hi Jenna, Thanks for these great templates. I am quite a bit out of my scope, but your blog has been a tremendous resource. I’ve duplicated the 1st landing page into my system, and I’m trying to implement the work around for editing the background image. Unfortunately, I’ve got ZERO background with coding and I have no idea what you mean by “right after the BODY tag” or “edit the landing page’s CSS” (from one of the comments). Do you have any introductory coding resources that you could recommend to a beginner like me?