Hi everybody, so my name is Marcos Duran. I work for Sercante. I am a CRM and marketing automation strategist. And this year I was asked to join an awesome cohort of people to become a Salesforce marketing champion. And I also co-lead the Austin part at User Group. I’m gonna hand it over to my colleague here, Russell.
Thanks, Marcos, though as Marcos said, my name is Russell Thomas. I am a UI designer and frontend developer with Sercante. 15 years of experience and a desire to make the digital world a more inclusive place, one day at a time.
So today we have a really good treat for you. We’re gonna take it briefly back to the fundamentals. What is the landing page? We’re gonna outline the technical anatomy of a landing page, and then between Russell and I, we’re gonna show some cool tricks and tools that you can use to maximize what you’re doing with your landing pages.
While you don’t need to be a super savvy developer in order to implement our tips and tricks, a general understanding of HTML CSS and Javascript will certainly help you to deploy these suggestions in your organization.
Pardot Landing Page Basics
So what is a landing page? Well, Unbounce uses the term landing pages to describe a campaign specific page with a single call to action. And that’s the important part. It’s not a page on your company website and should not be bogged down with items like site navigation, filler content. It should be designed for simplicity with a singular focus.
Here you’ll notice we have a very typical two column landing page design. Notice that we’ve broken down the main content areas into sub categories:
- Section A – the Favi-Icon
- Section B – the browser’s URL
- Section C & D – header section, where you will find your logo, subtext and your site navigation
- Section E – header image to attract attention
- Section F & G – the main content, where you can provide clear and concise messaging
- Section H – the almighty Pardot form
- Section I & J – footer section, where you put copyright information, contact us links, and social media sections
Content Regions
So the first step in making a Pardot landing page work for us, is to take advantage of Pardot regions. There are five region types in total, and depending on how we use them, they can greatly increase or decrease the controls we give to a Pardot user.
- Link Region Type
Only the URL path is an editable area for you. So if you put a region type of link on an anchor tag, you don’t have access to the inner HTML or the text.
- Image Region Type
These allow you to update the image content directly from providing a source URL to an image that’s housed on the server, or also within your Pardot content area.
- Simple Text Region Type
This is a simple editor, where you’ll notice you can only change the text in this area. You don’t have access to any text styling, so you can’t increase the font size, change the color or anything.
- WYSIWYG Region Type
This is the default that Pardot gives you. So if you don’t define the region type, you will get the WYSIWYG which gives the Pardot user, full access to everything that’s available to them. All of the stylings, insert images, tables, code you name it, the whole kitchen sink is available to you.
So the important part to remember when we’re working with content regions is two things.
- Every Pardot region in the landing page must have a unique name. This is how Pardot is going to know which section of the landing page you’re trying to edit.
- The proper use of content region types can save you a lot of headaches down the roads, when perhaps one of your colleagues comes in and decides to experiment with a well-designed landing page. So knowing when you want to lock things down can be very important.
External Landing Page Tools
We’re going to focus on a couple of external tools that you can use to very easily put together short snippets of code that you could add yourself to your layout templates of your landing pages.
Favicons
Favi-Icons is one of those things that it’s almost like an afterthought a lot of the time. If you go to the ParDreamin’ website, you’ll see that their tabs not only display the logo, but it also has a brief description. This is very similar to what you may have on your website. But if you go to look at your Pardot landing pages, you may not see this and that’s probably because you’re missing this one little piece of code. If you use this tool called favicon-generator.org, you just drop your logo in, go through a very short creation wizard and then it generates code.
When you get that code, all you have to do is copy and paste it. Open up your layout template and add this section, usually near the top of the code. You can host the logo within Pardot or externally. If you already have it on your website, it’s very easy to just grab it from there.
Fonts
DesignBold says your website’s font choice helps deliver the perception of how a person should look at your brand. An open source resource that’s free is Google Fonts, which lets you easily create a style sheet that essentially populates a different font on your landing pages.
Go to Google Fonts, find a font that you would like to use, Google will then produce a piece of code for you. Now just add this piece of code where you put the Favicon code. What that means is that’s a directory now that you can pull from to the rest of your file for landing pages that you can call out that specific font.
Then we have two ways to actually make the font look the way that we want. We can call that a class and say, pretty much all of our fonts on our landing page are gonna look like this. Or on each paragraph we can go ahead and add this tag that says reference the font from the very top and then add it to this particular section.
Icons
Sometimes we don’t have graphic designers to produce really nice images for our website or landing pages. Something that I used to use quite a bit was this open source resource called Font Awesome. You just grab this line of code at the very top, you add it to your landing pages and then they have a whole library of icons that you can use.
After you find the icon that you want, it gives you this very small snippet of code. And then you can do either one of two things. If you know that you always want the same icons on your landing page, you can go into the layout template here and just add them there. If you don’t want them to be on the template every single time and you only want to use them on specific landing pages, grab the code but add it via the landing page editor.
Add to Calendar
Now more than ever, because of COVID, we have been pushed to do a lot more digital efforts, including webinars. You can use Add to Calendar to type in all your information and then it generates this code for you. Grab that code, then put it into the thank you content of your landing page. So when I click on it, on the page, I get this little pop-up that says, “thank you for adding this event to your calendar”.
Social Cards
Using this tool, you can create actual social cards and it would actually look exactly as you see here. Normally in Pardot, what you actually show people via the Pardot posting process doesn’t always come out the way you might like. You can try these for LinkedIn, Facebook and Twitter.
JavaScript Code Tools
Make Forms More Accessible
One of the things that’s really important to me, as a designer developer, is making sure that everything we do is as accessible as possible to the widest range of people. Our Pardot required fields will have a little yellow star next to them. This indicates that this is a field that must be completed before the form can be submitted. However, that yellow does not have a lot of contrast with the background, making it harder to see and less accessible.
Now there are ways around this. In the Pardot form, you can uncheck that you want to use these stars and it’ll put it in an asterisk. But when you do it that way, you don’t have access to changing that color of the star, so the star or the required indicator for that field can be lost next to the text.
I’ve created a little piece of JavaScript on CodePen, where you can see all of the code, take it, manipulate it, do whatever you want with it and it’s free. The code I’ve created shows you some Pardot input fields, a little bit of HTML, some CSS, the style though is asterisks. And also the JavaScript to then look through the required fields of the form and insert them. So this way it gives you more control over that section. Again, you can change the color, you could change the size, you can change the placement. Anything that you can do in CSS, you’ll have access to do for these asterisks.
Add Sections to Forms
So in the spirit of helping you guys do better things with Pardot forms, I’ve created a second CodePen here. This is something that comes up quite often for us – how do you create sections inside of a Pardot form?
Obviously, if you’re working inside the Pardot form, you know that you can add classes, you can add inputs, you can move them all around and Pardot gives you a lot of tools in order to create the forms. But the one thing it doesn’t give you is the ability to add a headline above certain input boxes or to group inputs into sections.
I’ve just created a little bit of code for you to go check out on CodePen which looks through all of the inputs that you put into Pardot and anywhere that you add a CSS class of section, you’re able to insert that title. So here, for instance, we have section one, which is a section for personal information, where we get their name, their email, and their address.
But maybe we also want to grab some company information from them too, which would be the company address, company name, telephone number, contact, etc. So this gives you a great way to just use a little bit of JavaScript inserted into your page layout, to create some distinct sections, which gives the user a much more palatable presentation for the form.
Watch the video to take a closer look at this topic!
