BY: MARCOS DURAN
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.
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
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.
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!
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.
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.
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.
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.
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).
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.
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.