Have you ever finished working on an email template in the Marketing Cloud Account Engagement (Pardot) Email Builder with all of its convenient features like:
- Removable sections
- Repeatable sections
- The ability to move sections up and down within the template
…only to start editing a landing page, and you become extremely frustrated with the fact that you can’t do the same things in the Pardot Landing Page Builder?
In this post, we’re going to cover a way that we can basically replicate all of these features for the Pardot Landing Page Builder!
Watch a demo video to learn these hacks
Before we dive in, here’s a video to walk you through the three Pardot Landing Page Builder hacks from this blog post.
Pardot Landing Page Builder hacks — an overview of the approach
To achieve these features in the Pardot Landing Page editor, we’re going to add a little snippet of code at the end of our layout template. It goes between the closing </body> tag and the closing </html> tag.
The code snippet styles the different sections, or individual elements, of the page that we want to be able to alter from within the editor.
<code pardot-region="hide_elements">
<style>
#sectionName {
/* styling goes in here */
}
</style>
</code>From there, we can add the different styles to each element based on the different features we are wanting the element to have.
An important note
The first time you open this WYSIWYG editable code block for a Landing Page, it is going to include a <![CDATA]]> tag in the code. You will have to remove the tag before any of the changes you make in that code block will take effect.
Landing Page Builder Hack #1: Removable Sections
To make “Removable” sections for the Pardot landing page editor, we need to add the display property into the styling for the element we want to be able to remove. This will give us the ability to edit the display property from within the WYSIWYG editor.
Then, we will basically toggle the display property from display: flex (or display: block if that’s the normal styling for the element) to display: none. This will “remove” the section, or element, we want to hide!
<code pardot-region=”hide_elements”>
<style>
/* Change display:flex to display:none to hide an element */
#visibleSection {
display: flex !important;
}
#removedSection {
display: none !important;
}
</style>
</code>
Landing Page Builder Hack #2: Repeatable Sections
To create “Repeatable” sections, we’re going to use a very similar approach to the “Removable” sections. We’re going to leverage the display property again.
The key here is to include extra copies of the section you might want to repeat in your layout template from the start, and then use the display property to hide the ones you don’t need in that Landing Page. Or alternatively, have the sections start as hidden and come back in and change the styling to show the sections if you need them.
<code pardot-region="hide_elements">
<style>
/* This will show the section 2 of the 3 possible times */
#Section1a {
display: flex !important;
}
#Section1b {
display: flex !important;
}
#Section1c {
display: none !important;
}
</style>
</code>Considerations for “Repeatable” Sections
- While this does effectively create a “repeatable” section for the landing page, it is important to note that we are not actually duplicating the sections from within the landing page editor. This means that the number of times you can “repeat” a section will be limited by the number of times you include that section in the original layout template.
- Keep in mind that your editable regions in a layout template are marked by pardot-regions and these must all have a unique name. When we copy a section of our landing page to make it “repeatable” we will need to go in and update the pardot-region names as well. For example, Section1-Image might become Section1a-Image and Section1b-Image and so on. If you don’t update these names when you copy a section, you will receive an error message when trying to save the layout template.
Landing Page Builder Hack #3: The Ability to Move Sections Up and Down on the page
If we have sections included in our Layout Template that we want to rearrange based on the Landing Page, we can add another property into our code block. This is called the order property. This works as a sort of ranking system where the section with the lower values will appear first on the page.
By default, we will assign each section a value to give them their original placement on the page. But by including the order property in our styling, we can adjust that order later on from within the WYSIWYG landing page editor.
Considerations for “Movable” Sections
- This will only work for sections, dividers, etc. that are children of a flex container in the html code. That’s because the order property only applies to flex elements. If your code isn’t set up with the main sections in a flex container, then unfortunately this approach isn’t going to work for you. The good news is that you can probably restructure your code (or we can help!) so you can make use of this “feature” for your landing pages.
- The default value for the order property is 0. This means if you have Section A defined as order: 1, and then you add Section B but don’t define an order value for it, it will appear before Section A on the page.
<code pardot-region="hide_elements">
<style>
/* Use order to adjust which elements appear first on the page, with 1 being the first */
#Section1 {
order: 1;
}
#Section2 {
order: 2;
}
#Section3 {
order: 3;
}
</style>
</code>More like workarounds than features
It is important to keep in mind — these are not features of the Pardot Landing Page editor. Instead, these are more of a creative approach to achieve some of the functionality we all often find ourselves wanting.
If you run into issues with any of the approaches in this post, please reach out to us and we can help you obtain your desired experience with the Landing Page editor. Or, tell us how you did in the comments!
