How to create a Pardot Layout Template in three simple steps

In this scenario, we have an already developed Landing Page and with want it to be available for everyone to use as a Pardot Landing Page.

I already created a mobile first Layout Template using Bootstrap 5 that you can download here

We will achieve this in three simple steps:

Step 1: Define %title%, %description%, %content% variables

In our Already developed Landing Page we will replace the title, description and the place where our form is hosted with these three variables:

%title%:  This pulls in the title you have specified in your Landing Page set up

%description%: This is the meta-description for your Landing Page. Gives search engines details about the contents they will find when clicking in your search result.

%content%: This tells Pardot where your form should appear on your Landing Page.

Step 2: We define Pardot Regions 

We define pardot regions to make our Landing Page editable. basically, this will allow that when a person creates a Landing Page from our Layout Template they can easily edit the different sections, image, content, links.

How do we add them? We simply add different classes to the HTML blocks that we want to make editable.

The syntax is quite simple: Pardot-Region is the name of your block (needs to be unique in your Layout Template) and Pardot-Region-Type represents if you want to define your code as basic, image, link and so on.

The main Region Types you will need are:

Basic Region: The Basic Region allows you to amend text only but still have control over styling, format and links. In my experience, the more practical approach is to use it for pretty much everything other than images.

Image Region: You use it for banners, logos and so on. 

Link Region: The Link Region allows you to easily update links without impacting any of the styling.

You also have a few more regions called HTML Region, Simple Region, Pardot (WYSIWYG) Region. You can read more about them here. 

Step 3: Host everything in Pardot.

Unfortunatelly Pardot doesn´t work like an FTP where you can just throw the folder with your website and that´s it. In Pardot you will need to upload every plece of content you need, including css files, javascript, images and upload them to the content folder. Then you simply replace every link from your file with this new links.

A final tip: To change the styling of your form you will need to refer to #pardot-form input