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.

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 wrapper containor code before each text or image code. This is where you will place the editable field code.

Place the code after the wrapper for images. For text, the code is placed after the container wrapper.

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

Step 4

Paste

< div pardot-region="example" >

Below the wrapper code. Change the name "example" to a name for the field.
ex. headline, image, text, etc.

Paste

< /div >

after the first closing div.

Don't forget to close the div or the page's code will be broken.

Pardot Prodigy Tip
If you see red "X"s to the left side of your code (after you have closed the div) then you have most likely placed the code incorrectly.

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.