Editable Landing Pages in Pardot

How To

Editable Templates

Landing pages can be turned into editable templates using html code applied in the landing page template.

Screen Shot 2020-06-24 at 3.09.20 PM

Set Up

Open your landing page in Pardot. From here you will open your Landing Page Template and the Live Website Page.

You will need all three windows opened, the Landing Page, the Landing Page Template and the Live Page.

Step 1

Open the landing page template and click edit layout template.

First, find where it says < title> Whatever You Named The Project in WP/Webflow< /title> at the top of the code and update it to < title> %%title%%< /title>. This controls the page title that will display in the browser tab, and using %%title%% allows users to update this from the Landing Page Wizard rather than having to go into the code.

Next, place your cursor in the page html code and type command F to enable the search feature.

Screen Shot 2020-06-24 at 3.37.34 PM
Screen Shot 2020-06-24 at 3.39.18 PM

Step 2

Search for the text or image you wish make an editable field in parot.

Pardot Prodigy Tip
A quick way to search for images is to inspect the image on the live page. Right click the image on the web page to open the Inspect feature. You will see the image file name in the "src" code.

Step 3

Search for the containing element (usually a < td> or < div>) immediately before each piece of text code. This is where you will place the editable field code.

For images, place the code after the containing element and directly inside the < img> tag.

Screen Shot 2020-06-24 at 3.09.01 PM
Screen Shot 2020-06-24 at 3.02.10 PM

Step 4

Paste

pardot-region="example"

inside the containing element tag. Change the name "example" to a unique name for each field.
ex. H1, H2, Image1, BodyText2, etc.

Pardot Prodigy Tip
If you see red "X"s to the left side of your code then you have most likely placed the code incorrectly. Also, you cannot have editable regions within other editable regions, so if you have a container with multiple text/image items you will need to make the whole element an editable region instead of each individual text/image.

Step 5

Repeat these steps for each editable section.

Pardot Prodigy Tip
Check your Landing Page in the Quick Edit Mode and also the Live Website view as you work. It's better to catch broken code right away.