Pardot Layout Template Documentation

Get Started

Get started with ready layout template for Pardot email preference landing page.

Consider before start process:

Make sure you have installed code editor on your machine. You can use any code editor. I have used Notepad ++, which is free to install and use. If you want to install it now, then you will found a download link here.
Keep the original downloaded ZIP file as a backup.

Changing brand colour on page

You can change defoult colour of this layout. In this template, there is one brand colour. Let's change this one.

Open index.html file in code editor. You will see index.html in Layout Files folder.
Find the text In this template we have used color .

You will see there like this with 6 digit colour code following with #:

  														 
                                 /*

                                 In this template we have used color #09AFD9

                                 If you want to change it replace #09AFD9 to your brand colour.

                                 */

Now we are going to replace #09AFD9 with your brand 6 digit colour code.
Open the find window by pressing Ctr+F if you are using Windows OS or Command+F if you are using Mac. You will see Replace tab on this small window. Place existing used colour (for example: #09AFD9) in Find What: and place your 6 digit bran colour code in Replace With. Click on Replace All.
Save the file changes (Ctr OR Command + S).

Changing text on page

You can change all text of this layout. To change this follow this process.

Open index.html file in browser like Google Chrome. You will see index.html in Layout Files folder.
Copy the text which you want to change. For example © Your Brand

Note

Don't copy with year (eg: © Your Brand 2022), you will not see year in page code. There is code that automatic loading current year at that place.
Open same index.html file in code editor.
Find any text you want to change. For example: © Your Brand .

Help

To quick find code/text line, you can use find window by pressing Ctr+F if you are using Windows OS or Command+F if you are using Mac.

You will see there like this:

    														 
                                    © Your Brand, <span id="year"></span>. All rights reserved.

Change Your Brand by your company name. You can change/replace anything here, just make sure <span id="year"></span> loading current year, so dont remove this.
Same way you can change all text like Email Preference Center.
Save the file changes.

Changing Logo

There is dummy logo used in layout, so let's replace dummy logo with your brand logo.

Keep your logo ready to upload on Pardot. Make sure there is no space around logo in logo image.

Login your Pardot account and go to Marketing >> Content >> Files .
You will see the file upload window. You can drag files here or click on the button to upload images. Drag logo image here.
After upload image successfully, you will get a URL for logo image. For example, like in following image marked in red:
Keep this window as it is and let's open code file to replace this logo.

Open index.html file in code editor which is in Layout Files folder.
Find  line in code.

Help

To quick find code/text line, you can use find window by pressing Ctr+F if you are using Windows OS or Command+F if you are using Mac.

You will see there like this:

														 
                               <!-- Replace your logo here -->
                               <img src="img/logo.svg" width="180" alt="Logo"/>

Go back to Pardot image upload window where we have just uploaded logo. Copy logo image path/location.
In code editor replace img/logo.svg with this Pardot logo url. Make sure you are not removing anything apart from img/logo.svg .
Save the file changes.

Create the Layout with new design

Now we are creating the layout template with this code.

Goto Marketing >> Landing Page >> Layout Template .
From the right-top corner Add Layout Template..
Give the name to the template, select folder (Optional), and add tag (optional).
Remove all code from the "Layout" tab.
Copy all code of layout page form editor Ctrl + A and paste in the "Layout" tab.
Click on the Save button.

Use Layout to Page

This is an final step where we are using this layout to the page.

Goto Marketing >> Emails >> Preference Page .
You will see Default Email Preference Page, and you will gear icon at the end of page url, select Edit from there.
You will see "Edit Email Preferences Page" window. There is Layout Tmplate field, click on Choose and select the layout we just created.
There is another tab + Form Content, after clicking on this, you will see text which will display just before the Email field on preference page.
Click on the Save button.

Welcome to Pardot, multi-purpose layout template