Landing Page Anatomy: Maximizing Conversions with Code and Design

 

This session, led by Marcus Duran (CRM and Marketing Automation Strategist) and Russell Thomas (UI Designer and Front-End Developer), provides a deep dive into the technical anatomy of a Pardot landing page. It focuses on using simple code snippets, external tools, and proper design principles to maximize conversions, improve accessibility, and provide greater control than the default editor allows.

Key Takeaways

 

• Landing Page Purpose: A landing page must have a single call to action (CTA) and should not be bogged down by site navigation or filler content.

• Code is Your Friend: While you don’t need to be a developer, a basic understanding of HTML, CSS, and JavaScript is key to unlocking the platform’s full potential.

• Layout Templates are the Control Center: All major styling changes and code snippets (for fonts, icons, etc.) should be added to the Pardot Layout Template, as this impacts all landing pages using that template.

• Regions for Control: Proper use of Pardot Regions saves headaches by locking down design elements and controlling what content a Pardot user can edit.

1. Technical Anatomy and Design Principles

 

The landing page should be designed for simplicity, focused entirely on the conversion goal.

• Header Section (C & D): Should typically only contain the logo, not full site navigation, to minimize distractions.

• Main Content (F & G): Needs clear, concise messaging with a strong headline and supporting text that provides a reason for the user to convert.

• Form (H): The key conversion area.

• Footer (I & J): Should be minimal, containing only copyright information, privacy links, and contact links.

2. Controlling the Editor with Pardot Regions

 

Pardot Regions are used in the Layout Template to define editable areas on the landing page and control the level of access given to the Pardot user.

• Unique Name: Every region must have a unique name for Pardot to recognize it.

• Region Types: The region type dictates what a user can edit:

  • Link: Only the URL path is editable. Useful for anchor tags where the text must remain static.

  • Image: Allows a user to update the image content by providing a new source URL.

  • Simple Editor: Allows changes to the text only (no styling, bolding, or color changes). Good for locking down simple H1 tags.

  • WYSIWYG (Default): Gives the user full access to all styling, tables, code, and image insertion (the entire “kitchen sink”). Good for the main body content.

3. External Tools and Code Snippets (Layout Template Additions)

 

These free, external tools generate simple code that can be added to your Layout Template to enhance design and functionality across all pages.

• Favicons (favicongenerator.org): Easily upload your logo, and the tool generates the code needed to display your logo on the browser tab, improving brand visibility.

• Custom Fonts (Google Fonts): Use Google Fonts to select a font and grab the API stylesheet link. Adding this to the Layout Template allows you to call that font via CSS in the rest of your page, delivering a strong brand perception.

• Icons (Font Awesome): Offers a free library of scalable icons. Adding the necessary library code to the template allows you to insert high-quality icons via a short code snippet, perfect for visual lists.

• Add to Calendar: Tools (like AddToCalendar) allow you to input event details and generate code that creates a pop-up on the thank-you page, enabling users to add the event to their calendar instantly.

• Social Cards: Tools are available to generate social cards that look exactly as desired, ensuring the right image and message are displayed when the landing page link is shared on platforms like LinkedIn and Facebook.

4. Accessibility and Form Enhancements (JavaScript/CSS)

 

Simple JavaScript added to the page layout can dramatically improve form usability and control.

• Accessible Required Fields: By default, the yellow star on required fields has poor contrast. JavaScript can be used to style the asterisk via CSS (changing color, size, or placement) to increase contrast and accessibility. This is done by looking for required fields and inserting the styled asterisk using a JavaScript snippet (available on developer resources like CodePen).

• Creating Form Sections: Pardot does not natively allow grouping inputs with headlines. JavaScript can be used to look for a CSS class of “section” added to specific form inputs and automatically inject a title/headline above that group of inputs (e.g., separating “Personal Information” from “Company Information”).

5. Landing Page Advantages and Troubleshooting

 

• Advantages over iFrames: Using a native Pardot landing page makes it easier to keep data clean, avoids the cross-origin JavaScript issues associated with embedded iFrames, and prevents fixed width/height issues that can hurt mobile responsiveness.

• Visibility of Hidden Fields: If a field is filled via a URL parameter, you can make it a hidden field in the form. If you want it to be visible only if the data is missing, ensure the field is visible, and do not check the box to “always display.” Pardot will automatically hide fields if the data is already present in the prospect record.

• Styling (CSS): All styling changes (branding, design) outside of the content itself must be done within the Pardot Layout Template to ensure consistency.