1. Home
  2. Modules
  3. Templated Experiences
  4. Content Page and Landing Page Templates
  5. How to Build Content Page Templates and Landing Page Templates

How to Build Content Page Templates and Landing Page Templates

This article describes how to build a Template for a Content Page or Landing Page that is based on a Theme. Content Page Templates and Landing Page Templates must be created in order to build a Content Page or Landing Page within a Templated Experience.

What Are Content Pages and Landing Pages?

Content Pages are “content playlists,” curated and branded collections of content that bring together assets and call-to-action buttons in a focused digital experience. You can link to these Content Pages from any link or CTA in any channel (website page, social post, ad banner, etc.). For PathFactory customers familiar with Content Tracks, Content Pages are very similar to Content Tracks in look and feel.

Before you can build a Templated Experience Content Page, you must first set up Content Page Templates. These templates incorporate heading elements set within the Theme, as well as different layout options to choose from to display your content. Below is an example of a completed Content Page.

image 108
Content Page example

Landing Pages are website-like digital experiences that you can create within Templated Experiences. Landing Pages are highly customizable and can support a wide variety of use cases — e.g., a campaign hub, product support site, ABM experience, a partner resource center, event marketing, just to name a few.

Below is an example of a completed Landing Page. 

image 103
Landing Page example

How to Set up Content Page Templates

The Content Page Settings tab within Themes is where you set up Templates that can be used when building Content Pages. Any Content Page Templates you create here will populate a list of Content Page Templates a user can select from when building a Templated Experience. 

  1. On the main menu navigation, click the gear icon and then select Themes.
image 98
Themes menu item
  1. Select the Content Page Settings tab.
  2. On the left side of the screen, you will notice a dropdown list labeled sidebar, as shown in the screen capture below. 
image 101
Sidebar link highlighted

You will also notice other parts of the Content Page Template that are customizable, using options in the left panel:

Sidebar Position – You may configure the Content Page Template to have the sidebar on the left or the right of the screen.

Logo – Click Change Image to select your company logo at the prompt. If you don’t want a logo to appear on this page, click Remove.

Logo Size dropdown list – Here you have some preset options for logo size. The size you select for a Logo image affects only the size of the image, not the text that accompanies it.

image 83
Logo Pixel Size menu

Site Name – This text is where you enter the company name to be displayed in the Header section of your Content Page. 

Partnership Logo Configuration

In this menu you can choose to display a partner or account name, related logo and then configure their appearance. This is useful for ABM or partner marketing experiences.

Note: If routing is required for an ABM account (e.g. drive account A to Page A and account B to page B, that can be done using Segments and Routes).

image 99
Partnership Logo menu

Enable Partnership Logo – To display a partner or account logo, activate this toggle. At the prompt, select the image you want to display here. If you select this option, you then see a menu in which you can add the Partner logo, logo size, logo position, the company name, Partnership + Sign color, and background color of the header section.

Dynamic Logo – Activate this toggle so that when a Content Page is created using this Content Page Template, a partnership logo will be generated based on visitor data and displayed here. If there isn’t an identifiable IP address for the visitor, neither the partnership logo nor the plus (+) sign will not appear to the visitor. 

Partnership Logo Size – click here to select one of the preset sizes available. 

Partnership Logo Position – click here to put your partner’s logo on the left or right of your company’s name and logo, in the Header section. 

Partnership Site Name – Enter the name of the company here. If you want to customize the font and text appearance for your partner company name, click the three dots.

image 84
Fonts and Styling menu

Partnership + Sign Color – this refers to the plus (+) sign that displays in the Header section. 

Background Color – Select a color at the prompt to specify a color that will display in the background of your Header section. 

Enable Primary CTA – If you are planning to display a button in the Header section, activate this toggle. The same applies to Enable Secondary CTA. 

image 85
Primary CTA menu access

For many more customizations of your CTAs, expand the menu by clicking its arrow as shown in the screen capture above. In the resulting CTA menu, you have several options to track its use and customize the background color of the CTA button, as well as its text size and color. 

image 94
CTA Configuration menu

When you are happy with your settings, click Save. You may have to scroll down the left panel to see the Save button. Continue to tweak your Settings as needed, to achieve the look you want. 

How to Build Landing Page Templates 

Below is a step-by-step description of the sections you can configure on this tab to build a Landing Page Template. Note: You may create as many Landing Page Templates as you wish.  

  1. On the main navigation, click the gear icon and then select Themes
image 117
Themes menu item

  1. Now you see a list of the Themes that have been created by your organization. 
image 118
List of Themes

  1. Select an existing Theme from the list or create your own by clicking Create Theme (top right of screen). For more detailed information on Themes, see the Introduction to Themes tutorial
  2. If you selected Create Theme, enter the Theme name and select a Theme Preset (also called a starter Theme) that you will customize to create your new one. (Your PathFactory instance includes a starter Theme file you can modify if you haven’t built one yet.) Click Save when you are finished entering the information.
  3. Now you are presented with a basic Theme ready for your modification Open on the Theme Settings tab.
image 116
Theme Settings tab

  1. To create a Landing Page Template, click the Landing Page Templates tab.
image 121
Landing Page Settings tab

  1. On the left panel, select the Standard link as shown below.
image 120
Standard link highlighted

  1. Click the Customize button on the top right of the screen to begin setting up your Landing Page Template. 
image 122
Customize button highlighted

  1. Now you see all of the Sections and Settings within each section that you can customize. 
image 119
Landing Page Template Sections

On the right side of the screen you see a list of the default sections and their order. Take a moment to scroll down the panel on the right side and expand the menus for editing Sections to see what is available. 

  • To change the order  of the Sections that will appear in the final project, just click, drag, and drop to a new position.
  • To view the Settings for each Section, click on them or the associated arrow next to them, and the associated configuration will expand on the right pane.
  • To remove a Section, click its associated Trash Bin icon, available at the bottom of the Section’s configuration menu.
  • To add a Section, click Add Section. A popup menu appears that contains a dropdown list. This list contains available Sections you can add. This feature is useful if you want to modify a Section’s elements. For example, you may want a Team Section to show more than the default of five team members. Or, in a Testimonials Section, you may want to include more than one quote. Scroll down this list to see all of the available Section type options. 
image 115
Add Section popup menu

You will notice that if you select an option from the dropdown list, you see a thumbnail preview of your Section selection.

This is the current list of Section Types available. Please continue reading below this summarized list for more details  on how to use each Section Type.

  • Content List 
  • Embedded Forms 
  • Feature List 
  • Footer
  • Header
  • Hero 
  • Logo-Banner
  • Teams
  • Testimonials

Make your changes and selections and then click Save. You see the Landing Page Template updates immediately to display the new Section. When you click on a Section on the left, the right side panel opens with editing options for that Section. Similarly, when you expand a Section menu on the right side panel, you will see that Section highlighted in blue color on the left, as shown below, to indicate what part of the overall Landing Page Template you are currently modifying.

Header Section Type Details

image 87
Header section

  • Company name and logo – Enter the name of your company and add the logo. Then select what size you want them rendered at.
  • Partnership logo toggle – This toggle, when activated, displays a logo generated based on Visitor data, and will be visible on the Landing Page you create using this template. If there isn’t a discoverable IP address the viewer is reading from, no logo and no plus sign will be displayed. 

Hero Section Type Details

  • Section Title – Here you enter the title for this section. 
  • Subheading – Here you enter the text for your subheading. You can also alter the text display and size. Click the three buttons to see options for text, as shown below.
image 86
Fonts and Styling menu

  • Primary CTA and Secondary CTA – Click these dropdown arrows to see fields for entering the CTA ID, Size, Text, Text Size, and Text Color.
    Note: The CTA ID you enter here must be unique to avoid duplication when tracking.
image 96
CTA ID Field

  • Background Color – Click here to select the exact color.
  • Media Type – Choose an image or video to display here.
  • Hero Image – Choose which image you want to use here and choose which side it displays within the section by turning on the Swap Positions toggle.

Feature List Section Type Details

  • Section Title – Enter a name for the section. 
  • Background Color – Click on this field and a menu pops up for you to select the color you want for your background. 
image 92
Background Color Picker

  • Heading – Here you can specify the text that will display and the text appearance. To edit the appearance, click on the three dots. 
image 88
Fonts and Styling menu

  • Subheading  – Here you specify the text to appear for the section subheading. If you don’t want a subheading, leave this field blank. 
  • Media type – Select Image or Video. 
  • Main Image or Video – Click the Choose button to open your Content Library. From there, select the image or video you want. 
  • Background Icon Color – Here you can select a color to have on the background of the Landing Page Template. 
  • Background Icon Border Radius – This setting will round the corners of your background icon. 
  • Feature Icons – Click Change Image to view a list of available pictures. You can filter the list by Thumbnail, Hero Images, Icons, and Logos. Want to upload additional images here? On the Choose Image popup menu, click on the Link tab and enter its URL. 
image 89
Choose Image menu with Link tab selected
  • Feature Descriptions – Here is where you briefly describe a feature using text and images. 

Content List Section Type Details

The Content List is where you would add supplemental content and links. There are some different menus here, as follows. 

  • Show Content As – Specify Carousel or Grid layout. If you select Carousel, you have the following options. 
  • Carousel Autoplay – This option appears if you select Carousel layout. 
  • Carousel Speed (seconds) – Specify how quickly you want the tiles to change over.
  • Carousel Tiles – Number of them you want displayed at a time.

If you select Grid, you have the following option.

  • Grid Columns – Choose how many columns of tiles you want to display: 2, 3 or 4. 

Testimonial Section Type Details

By default, there isn’t a Testimonial Section in the Landing Page Template. You can add one by clicking Add Section at the top of the right panel. 

  • Section Title and Testimonial Quote – Here you add the text you want to display. You can also alter the appearance of the text. Click the three buttons to open that menu. 
image 93
Fonts and Styling menu

  • Quotee Name – Enter the name of the person you are quoting. 
  • Quotee Title – Enter the quotee job title or their preferred headline, for example Vice President of Sales. 
  • Background Color – Same as for the other Sections, clicking on this field opens a menu for you to select the color you want. 
  • Media Type – Image or video – same as the other sections, you can add an image or a video here. 
  • Main Image – Here you can change image, remove image or swap the image position within the section. 

Team Section Type Details

  • Section Title – Enter the name for your Team Section here.
  • Heading – Here you provide introductory text about your team and configure the text appearance. 
  • Subheading – Here you add a subheading for your team section. 
  • Background Color – Click on this field to open a popup menu where you can change the color you want displayed here. 
  • Team Members – Select the number of team members you want to display here (up to 12). After you choose a number of team members to display, the next menu updates to give you the number of spaces you need for your team members.
image 95
Team Member section

Next Steps

Once you have created Themes, Content Page Templates and Landing Page Templates, you are ready to start building digital experiences that we call Templated Experiences. Read Introduction to Templated Experiences for detailed instructions on how to do this.  

Updated on May 1, 2023

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!