Categories

Getting Started

Learn through 101 guides and easy solutions.

15 Resources To Make The Most Of Your Landing Pages: The Ultimate List for Pardot Admins

15 Resources To Make The Most Of Your Landing Pages: The Ultimate List for Pardot Admins

min. reading

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


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.

Subscribe to The Spot

Hidden
Hidden
Hidden
Hidden
This field is for validation purposes and should be left unchanged.

Categories

Top 3 Recent Post

  • Marcos Duran earned a BBA in Marketing from the McCombs School of Business at the University of Texas at Austin in 2016. Currently, Marcos holds four Salesforce certifications and several industry certifications from Drift, Google, Hubspot, and Microsoft. He loves supporting forward-thinking customers who are looking to benefit from their marketing tech stack and that have a clear idea of where they want to go, or at the very least, are open to hearing other ways of doing things in order to improve their processes. In his free time, Marcos loves to share his knowledge with his community, online, and IRL. Marcos co-manages the Austin Pardot User Group where the team hosts informative monthly sessions for Pardot enthusiasts about all things Pardot. Marcos is an active community speaker on topics around Salesforce, Pardot, and professional development. Additionally, Marcos has a passion for service and makes time to volunteer with different organizations to mentor and career coach college students in the greater Austin and Houston areas.

  • Comment (3)
  • 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

Leave Your Comment

Related Articles

Bot Single Post