Building landing pages in Pardot can be an interesting challenge because, depending on your needs and the skillset of your team, there are multiple ways to go about it.
On one hand, you have the Pardot landing page content builder that leverages Stock Templates. By using this editor, you are allowed to drag and drop sections into a blank canvas. This is where you build out the content and apply a form for each specific landing page.
The landing page builder is a good way to create landing pages fast with zero coding experience. One detail to point out here is that Stock Templates aren’t as adaptive on tablets and mobile devices, so be sure to test them out prior to making them public.
Your other option is to create custom layout templates which give you a lot more flexibility when it comes to how your product will look, but requires coding knowledge (think HTML, CSS, Javascript) to get the look you want.
To get you started, Pardot gives you access to five out-of-the-box layout templates. However, they’re pretty neutral, so if you want landing pages customized to your branding and design standards, you’ll need to invest some resources and build new ones.
You may have a front-end developer on your team to create the perfect layout templates for all of your landing page needs. If so, that’s great! This post is probably not for you. Go ahead and leverage them.
If you’re here because your team is nimble and mighty but wears many hats, this post is meant for you!
Landing page design challenges Pardot admins face
As a team that’s trying to do a lot with limited resources, here are some challenges you may be facing:
- Creating thank you pages
- Maintaining consistent branding
- Personalizing landing pages for each event/webinar
- Adapting and checking for mobile responsiveness
- Testing your content
These challenges can definitely seem overwhelming for ANY Pardot admin who may not have prior experience creating landing pages. Luckily, this guide can help you make your own landing page (or website) edits with a few simple clicks to Pardot layout templates.
NOTICE: Some of these resources do require that you have basic HTML/CSS understanding to be able to use them properly and some of the options have paid versions for more access (you don’t need them to get started), but trust me, I’m here to bring you these blessings for free!
15 resources to bring your Pardot landing pages to life
Basics
1. Favicons
Add branding to your browser tabs by using this tool to generate favicons. Once you generate your favicon code, it can be added to your landing page and form layout templates to keep consistent branding across your website. Follow the instructions on the Pardot Knowledge Base to self implement.
2. Google Fonts
This resource outlines web-safe and free fonts you can use on your landing pages. The most popular fonts include: Fire Sans, Montserrat, Lato, Open Sans, Oswald, Raleway, and Roboto. To use these custom fonts you can find a guide on how to implement this on the Pardot Knowledge Base. Note: Custom fonts on landing pages act differently than emails (including how you set them up).
3. Meta Tags
Generate code to create social media meta tags for Twitter, LinkedIn, Facebook, Pinterest, and Google. Just plug in your site’s information to get started. Note: This method would likely require a new layout template per landing page in order to update it.
4. Pardot-Content Regions – Landing Pages
Pardot Content Regions give you flexibility to lock down content controls to users creating landing pages. Need content restricted? There’s a tag for that. Need content to be flexible with the full WYSIWYG editor? There’s a tag for that as well!
5. Responsive CSS Grid Fundamentals
This resource outlines the usage of the grid capability to make rows responsive. This is a fairly advanced topic (probably the most from this guide), but with a little bit of testing and “googling” you will become a master in no time!
Personalize
6. Pexels
Spice up your landing pages with compelling images. This resource provides you with free commercial and personal use images. Simply search terms for your specific landing pages needs and select the best image.
7. Font Awesome
Search and find over 1000 custom icons with Font Awesome. These icons can be used to add context to your landing page offering. To use these, just grab the stylesheet provided and add it to your landing page layout template. Then you can reference the icons following the guide included on the Font Awesome website.
8. Color Schemes
Looking to add a little more color to your landing pages? Color Schemes is a great tool to create dynamic color palettes. To use this tool simply add your HEX or RGB codes from your branding guide and out goes the color series. Don’t know the color codes? Try their image to color generator.
Delight
9. Countdown Timers
Add a little flair and excitement to your emails, landing pages, and website with Countdown Timers. To use this tool, simply create a free account, add your timing, and then add the code to your landing page. Note: this can also be used in emails but be careful as there are limitations across email clients.
10. Eventable (Calendar Invite Sharing)
Building landing pages for events or webinars held on specific dates? Use this tool to create Add-To calendar buttons, which can be added to your thank you pages, form thank you content or emails.
11. Social Cards
This resource helps you generate code for a social card, no code involved. When you get to their website, there’s a short tutorial on how to set everything up. Basically, all you have to do is run through their generator and login to the right social media account to post. Currently, Twitter, LinkedIn and Facebook are available. Note: the description does not show up on LinkedIn.
Testing
12. HotJar
Gain insight into how traffic on your site moves around and where they click. With this information from HotJar, you’ll be able to test different layouts/content positioning to see which aspects of the page resonate with viewers. This is a great addition to Google Analytics (separate platforms / different metrics). Note: To use this tool you do need to set up an account, but you can use it for free while you test it.
13. JSFiddle Editor
Use this resource to try out code, edit, and preview in real time. This is an opensource tool that can save you from a tight bind if you don’t have access to a classic editor like Adobe Dreamweaver. A desktop alternative is Atom (which plug can plug into GitHub if you need it).
14. Multivariate Testing Landing Pages
Multivariate testing is a Pardot feature for landing pages that lets you test two versions of a landing page and choose a winner. This FAQs blog from Pardot breaks down the difference between A/B testing and multivariate testing, what to test, and what reporting looks like. Use this documentation to set up multivariate testing in Pardot.
15. Responsive Design Checker
Test your landing pages’ responsiveness with this Responsive Design Checker, which allows you to review any online asset (landing page, forms, and websites) by screen size and different devices. To use this tool simply add a HTTPS link to the search bar and use the left panel to get real time previews. Note: It’s about 95% accurate, does not play well with websites heavily based on Javascript, nor will it work for your Pardot emails.
Further reading
- LinkedIn Advertising: Should You Use Pardot Landing Pages or LinkedIn Lead Gen Forms?
- Content Personalization Using Dynamic Content, Pardot HML, and Pardot Snippets
Spice Up Your Landing Pages
In the end, we all wish we could code beautiful landing pages from scratch. As marketers, we wear many hats and sometimes being able to make some quick changes here and there can enable you to support your team on the fly. If you don’t have the luxury of an in-house designer, these resources should help get you where you need to be.
What are your favorite go-to landing page resources?
Do you need support building your own customized landing page templates? Our development team is ready to invigorate your landing page designs and add the functionality you need. Reach out to us here to get started.
Great work Marcus. We will be sharing this with our clients.
We designed our landing pages based on our mother web page, imported a URL… we created a great template and forms and then based 127 landing pages off it. The pages had all been live for 3 weeks and then yesterday, all the CSS was stripped from them. They are now bare bones ugly. I cannot figure out what could have happened. Does anyone know what this could mean? Why it happened? WE did end to end testing on all the pages and forms and they were all great… any help would be super appreciated. I had to build a band aid page and place that in place of the lovely ones we built. could this be an issue with our main sites CSS changing? I wish someone knew why this happened… not even pardot knows. Thanks
Hi Deanna!
Thanks for writing in. The situation gives me the impression that a CSS file that the templates referenced was changed. This would cause all the pages to break and look bare bones like described. I always recommend creating stand alone layout templates that do no reference CSS pages that are hosted on your parent website for this reason.
A word of caution: do not change any of the editable region names on your updated layout template. You could accidentally erase content if you try to update the pages in a way that impacts the editable regions.
Best,
Allie