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.
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 Whatever You Named The Project in WP/Webflow at the top of the code and update it to %%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.
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 or ) 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 ![]()
tag.
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.
-
600 Congress Ave. Austin, TX 78701
-
1 (877) 278-8759
-
info@SalesLabX.com
Subscribe to Our Newsletter
© Copyright 2024 - SalesLabX. All Rights Reserved.
) 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![]()
tag.
For images, place the code after the containing element and directly inside the
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.
- 600 Congress Ave. Austin, TX 78701
- 1 (877) 278-8759
- info@SalesLabX.com
Subscribe to Our Newsletter
© Copyright 2024 - SalesLabX. All Rights Reserved.