In Pardot

How to Turn any Landing Page into a Pardot Layout Template

5 Mins Read

In this tutorial, you will learn how to turn any landing page into a Pardot Layout Template that can be used across all your Pardot marketing campaigns. You can use an existing landing page, a free template, a paid template from a marketplace like ThemeForest, or an existing page on your website.

Step 1: Create a new layout template in Pardot

Create a new layout template in Pardot (Content > Layout Template > Add Layout Template). Give your layout template a descriptive name and add your desired tags.

Step 2: Import Your Own Landing Page

For this tutorial I will be using this landing page as an example, but you can follow along with whatever landing page you want.

There are 2 ways you can import your landing page into Pardot

  1. Copy & pasting the HTML source code directly into the editor
  2. Using the Import layout from URL option that Pardot offers

Both ways are pretty similar. Let’s break down the 2 ways.

1. Copy & pasting the HTML source code directly into the editor

You can view the source code of the landing page in Chrome by navigating your landing page > right click > view page source. Copy all the code that is there and paste it into your layout template editor.

pardot-landing-page-template-view-source

2. Using the Import layout from URL option that Pardot offers

Copy your landing page URL, then navigate to your Pardot layout template. Click on import layout from URL and paste in the landing page URL.

pardot-landing-page-template-import-url

Both ways will give you the same result.

Step 3: Upload Your Images and Files

Now that all the landing page HTML is loaded into Pardot, the images and files linked on the page are not imported yet.

There are a couple different types of files that will need to be imported into Pardot

  • All images (.jpg, .gif, .png, etc)
  • All CSS files (.css)
  • All Javascript files (.js)

In my landing page template there are 3 files that I need to download.

  1. Styles.css
  2. logo-placeholder.png
  3. feature-image.jpg

Download these files, if you haven’t already, and save them on your computer. Upload them into Pardot under Content > Files > Add File

Replace the URL to the old files in your page template by copy and pasting the URL that Pardot generates when you upload the files

Repeat this process until all your images and files are in Pardot.

Step 4: Create editable Text

The next step is where you choose what content should be editable within the Pardot landing page editor. You can create as many editable sections as you want, but I recommend limiting it so your layout and branding is consistent across all Pardot landing pages. For this example, I’m going to make the main content area editable and the call-to-action title editable as shown below in yellow.

To create an editable section, wrap a DIV around the content like this

For my example, I’m left with this HTML for my main content section

INSERT YOUR HEADLINE HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis elit ex, at condimentum leo varius porttitor. Ut sed malesuada enim. Cras eget tristique diam. Nam eget accumsan sem, eu pulvinar nisl. Donec quis aliquet dolor, quis finibus leo. Fusce commodo enim est, quis porttitor enim molestie vel. Sed quis sapien egestas nulla rutrum accumsan.

  1. This is an important point

    Nullam eget sapien fringilla, cursus lectus ac, ullamcorper sapien. Cras dolor nisi, blandit venenatis sapien at, elementum luctus arcu. Pellentesque.

  2. This is another important point

    Donec a diam at quam pellentesque commodo et sed felis. Nulla efficitur erat eu tortor aliquet semper. Vestibulum aliquet sollicitudin dui id cursus metus.

  3. This is an important point

    Etiam cursus consectetur lacinia. Donec vehicula dui quam, sit amet facilisis felis tincidunt in. Sed ac eleifend velit, sit amet rutrum nullam.

And my call-to-action title looks like this

CALL TO ACTION TITLE


	
Repeat this process for all the sections you want to make editable.

	
Step 5: Add the Form

	
If you want to have the ability to add a Pardot form on the page, you will need to add this tag to your page where you want the form to go.

	
%%content%%


	
pardot-landing-page-template-replace-form-1

	
pardot-landing-page-template-replace-form

	
Step 6: Edit the Title

	
Lastly, replace the title in the HTML of your template to this to dynamically display the name of the landing page in the browser.

	

	
pardot-landing-page-template-replace-title

	
pardot-landing-page-template-replace-title-2

	
Testing

	
Create a landing page to test your new Pardot layout template by going to Content > Landing Pages > New Landing Page and select the new page template.

	
pardot-landing-page-creation

	
If you have setup the Pardot editable regions correctly, you should see a dotted box around everything that is editable.

	
pardot-landing-page-edit-content-1

	
If you double-click into the editable section to make sure the WYSIWYG editor pops up.

	
pardot-landing-page-edit-content-2

	
My Final Code

	
Here’s a peak at my final code after turning my sample landing page into a Pardot layout template.

	

  
    
    
    
    

    
    

    
    

    

	

		

			

				
				
			

			

			

				

					

						
						

							
INSERT YOUR HEADLINE HERE

							
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis elit ex, at condimentum leo varius porttitor. Ut sed malesuada enim. Cras eget tristique diam. Nam eget accumsan sem, eu pulvinar nisl. Donec quis aliquet dolor, quis finibus leo. Fusce commodo enim est, quis porttitor enim molestie vel. Sed quis sapien egestas nulla rutrum accumsan.

							
    
								
  1. 
									This is an important point
									
    Nullam eget sapien fringilla, cursus lectus ac, ullamcorper sapien. Cras dolor nisi, blandit venenatis sapien at, elementum luctus arcu. Pellentesque.
    
								
    2. 
								
  2. 
									This is another important point
									
    Donec a diam at quam pellentesque commodo et sed felis. Nulla efficitur erat eu tortor aliquet semper. Vestibulum aliquet sollicitudin dui id cursus metus.
    
								
    3. 
								
  3. 
									This is an important point
									
    Etiam cursus consectetur lacinia. Donec vehicula dui quam, sit amet facilisis felis tincidunt in. Sed ac eleifend velit, sit amet rutrum nullam.
    
								
    4. 
							

						

					

					

						

							

								
								

									
CALL TO ACTION TITLE

								

							

							

								
								%%content%% 
							

						

					

				

			

		

		

			

				

					
					© Insert your copyright and other footer text here.

					Privacy Policy   Other Link   Other Link 
				

				
			

		

	

	
  

    
    


    
    

  



				
		

		
				
		

		
						
			

				
									
				
									
			


			
		

		
				
				

	
		

		
		

		
			
				Author
							
			
			
I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

			
			
			
		

		
	
			
				
		
				
		
		
		

	


		
	

		

			
			41 Comments			
		

	
		
    
					
			
  1. 
				
    
				
					
    
											
    
					
					
    
						
						
    
							
								Kacia
															
																
							
							
														
							
								
							
			
														
							
								Reply								
							
							
						
     
						
						
    
							
    I feel dumb even asking this question, but how do I save the style.css and upload it? When I try to upload into Pardot, I’m getting an error about the file type.  
    

    
						
													
						
    
					
					
     
		
				
    
	
		
    2. 
		
			
  2. 
				
    
				
					
    
											
    
					
					
    
						
						
    
							
								Yvette Montague
															
																
							
							
														
							
								
							
			
														
							
								Reply								
							
							
						
     
						
						
    
							
    Hi Jenna,
    

    This article has been extremely helpful. Is it possible to have two Pardot forms on the same Pardot landing page?
    
For example, one form (CTA) in the body, and another (Newsletter signup) in the footer?
    

    
						
													
						
    
					
					
     
		
				
    
	
		
      
		
			
    • 
				
      
				
					
      
											
      
					
					
      
						
						
      
							
								Jenna Molby
															
																	Post Author
																
							
							
														
							
								
							
			
														
							
																
							
							
						
       
						
						
      
							
      Hi Yvette, So happy you found it helpful! Yes, it’s possible to include more than one form on a Pardot landing page, however, you would have to use the standard embed code for one of them (the same way you would embed it on your website). Cheers, Jenna
      

      
						
													
						
      
					
					
       
		
				
      
	
		
      • 

    

    3. 
		
			
  3. 
				
    
				
					
    
											
    
					
					
    
						
						
    
							
								Bob
															
																
							
							
														
							
								
							
			
														
							
								Reply								
							
							
						
     
						
						
    
							
    Hi Jenna,
    

    Nice article, very helpful.. Just 2 questions:
    

    #1 Where did you get the code for your form? for example did you create the form in Pardot first & then add later?
    
#2 Is it possible to use this method when using a page from your website that has a bunch of additional code? Here is my landing page http://preview.pardot.com/layoutTemplate/preview?id=8344. Its quite confusing because this page has our page builder code, a customer raw code form we tried to implement etc
    

    I’m actually looking for a way to the create landing pages on our website, with our preferred styled forms, that integrate fully with Pardot but it appears to be very difficult. We managed to get the standard form to work np, however, we need to use progressive profiling and this feature does not appear to work. Unfortunately using a form handler has the same outcome. We simply want to make LP on our website & add a Pardot form. Have you had any experience with this? I would appreciate any advice to solve this issue.
    

    Great site by the way,it has helped me greatly when learning about Pardot. 
    

    
						
													
						
    
					
					
     
		
				
    
	
		
    4. 
		
			
  4. 
				
	
		
      
		
			
    • 
				
      
				
					
      
											
      
					
					
      
						
						
      
							
								Jenna Molby
															
																	Post Author
																
							
							
														
							
								
							
			
														
							
																
							
							
						
       
						
						
      
							
      Hey Michael, are you trying to make the entire content section (the DIV with the class ‘main-info’) editable? Sometimes I find that Pardot strips out some code if I make an entire section editable, so I do it in sections. If you’re still experiencing issues, feel free to email me at [email protected] with screenshots and I can help you troubleshoot further. Cheers, Jenna
      

      
						
													
						
      
					
					
       
		
				
      
	
		
      • 

    

    5. 
		
			
  5. 
				
	
		
      
		
			
    • 
				
      
				
					
      
											
      
					
					
      
						
						
      
							
								Jenna Molby
															
																	Post Author
																
							
							
														
							
								
							
			
														
							
																
							
							
						
       
						
						
      
							
      Hi Pranjali, It looks like you need to update your image paths. Did you upload your images into Pardot?
      

      
						
													
						
      
					
					
       
		
				
      
	
		
      • 

    

    6. 
		


		
				
		
		
			

		
		
	
		

		
Write A Comment