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.

Note: We have updated our WYSIWYG editing menus to include new options such as Undo, Redo, and Clear All Formatting. As a result, whenever you are editing live Content Pages and Landing Pages that were composed using the previous text editing menus, ensure you carefully preview the changes of the appearance of text and layouts before you save them.


What Are Content Pages and Landing Pages?

Content Pages are equivalent to Content Playlists, which contain 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 and Content Playlists 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.
Themes menu item
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. 
Sidebar
Sidebar

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

Content Page Templates tab
Content Page Templates tab

Layout Menu

Content Page Templates Layout menu
Content Page Templates Layout menu

The Layout editing menu offers the following customizations.

  • Background Mode – select color or gradient.
  • Background Color – click on this field to show a popup color picker.
  • Content Title Font Color – click on this field to show a popup color picker.
  • Content Title Font Style – select a heading style from the dropdown list.
  • Mobile Headline – enter the text you want to display on mobile views to encourage visitors to continue reading the content assets on the Content Page.
  • Mobile Headline Font Style – select a heading style from the dropdown list.
  • Logo – change the image, remove the image, and set its size in pixels using the available menus. To display your visitors’ company logos alongside your organization’s logo, activate the toggle labeled Enable the Account Logo.
  • Thumbnails
    • Show Content Thumbnail – select image or icon.
    • Thumbnail size in pixels – using these fields, select the width, height, and corner radius of the thumbnail images.
  • Filter toggle – enable the filter toggle to allow visitors to search through the content you have provided using filters; this feature is useful for Content Pages that contain several content assets. 
  • Pagination toggle – activate this toggle to display the number of content assets on the Content Page.  
  • CTAs – enable up to three CTAs and specify their attributes. Once you toggle on CTA 1, CTA 2, or CTA 3, a menu appears so that you can set its ID, its size, and the text that will appear on the button. Further you can set the button text’s font, color, button color, and button color that displays when a visitor hovers their mouse over the button.
  • Dynamic Personalization – To further enhance user engagement, you can enable Dynamic Personalization. This feature allows you to tailor content and CTAs based on visitor data and behavior, creating a more customized and relevant experience for each visitor. For more details, refer to Guide to Using PathFactory’s Dynamic Personalization Feature.


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.  

Note: To clone a Landing Page Template, read the section following this one.

  1. On the main navigation, click the gear icon and then select Themes
Themes menu item
Themes menu item
  1. Now you see a list of the Themes that have been created by your organization. 
Themes main view
Themes main view
  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.
Theme Settings tab
Theme Settings tab
  1. To create a Landing Page Template, click the Landing Page Templates tab.
Landing Page Templates tab
Landing Page Templates tab

  1. On the left panel, select the Standard link as shown below.
Standard link
Standard link
  1. Click the Customize button on the top right of the screen to begin setting up your Landing Page Template. 
Customize button 2
Customize button
  1. Now you see all of the Sections and Settings within each section that you can customize. 
Landing Page Template Sections
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. 


Adding and Managing Sections in Landing Pages

The following options are available to add, remove, configure, and reorder Landing Page sections.

  • 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 adjust the space inside a section, activate the Override Padding toggle. Once enabled, you can use the Padding settings menus. Choose the Padding Type from the dropdown list: pixel, %, or rem. Rem stands for “Root em” units, which automatically adjust based on font size. If rem is selected as the padding type, the padding amount will be relative to the font size set in the Header section. Additionally, you can adjust the horizontal and vertical padding using the Padding menus.

    Note: Padding refers to the space between the content and the section’s border. When you adjust the padding settings, you’re controlling the amount of space between the content inside a section and the edges of that section. the amount of padding used depends on the specific design goals and preferences, as well as considerations such as readability, usability, and aesthetic appeal.
  • 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. Some of the sections have more than one available layout.

Note: If you add a new section to the source layout in a Landing Page Template after you have already created Landing Pages based on the Template, any new sections will be hidden in previously-created Landing Pages. You can manually unhide the new sections on any Landing Pages you wish, but they are set to hidden by default to avoid adding new sections to existing Landing Pages unintentionally.


Available Section Types for Landing Pages

Below is a list of available section types and a brief description of each, to help you decide which sections would suit your Landing Page best.

Content List Section

In this section you can organize and present your content assets in a user-friendly format. This structured list can include articles, blog posts, or other informational pieces.

Content List Section Type
Content List Section Type

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. 

Embedded Forms Section

In this section you can embed forms directly onto the Landing Page to collect user information, such as email sign-ups or surveys.

Embedded Forms Section Layout Options
Embedded Forms Section Layout Options

Note: If you select the Form Library as the source for your embedded form within a Landing Page, you can edit both the form’s header and description by toggling on the override option as highlighted in the screen capture below.

Form settings menu 1
Form menu

FAQ Section

Use this section to address common inquiries and provide quick information to visitors.

FAQ Section Type
FAQ Section Type

Feature List Section

In this section you can highlight key features or benefits of your product or service.

Feature List Section Type
Feature List Section Type

When you add a Feature List section to a Landing Page Template, you are offered layout options, all of which are configurable after being added.

Read below to find out details about the editing menus available for the Feature List section.

General

  • 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. 

Card

  • Description toggle – turn this toggle on if you would like to add a brief description to the top of this section.
  • Cards Alignment – choose center, left, or right from the dropdown list.
  • Feature Items CTA – to use a CTA in this section, in the dropdown list choose Button. If you do not want to add a CTA to this section, from the dropdown list select None.
  • Feature Items Configuration – select the number of icons you want to display horizontally or vertically, depending on the type of Feature List layout.
  • Feature Cards – Expand each of the Feature Card menus to edit the image, icon size, and title for each card. 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

In this section you can include links to important pages (e.g., Contact Us, Privacy Policy), social media icons, and other relevant information in the bottom section of a Landing Page.

Footer Section Type
Footer Section Type

Header Section

Use this section to display your company logo, navigation menu, and a tagline or call-to-action in the top section of the Landing Page.

Header menu for Content Page Templates 1
Header menu for Content Page Templates

The Header menu offers the following customizations.

Background Mode – Choose Color, Gradient, or Image as the background type for the Header section. Depending on your selection, the menu refreshes to offer options to customize your chosen background type further.

Add on Padding Unit Type – Choose from the dropdown list: pixel, %, or rem. Rem stands for “Root em” units, which will automatically adjust based on font size. If you select rem as the padding type, the amount of padding will be relative to the font size you’ve set in the Header section. Next, set the Vertical and Horizontal Padding, as needed.

  • Note: Padding refers to the space between the content and the section’s border. When you adjust the padding settings, you’re controlling the amount of space between the content inside a section and the edges of that section.

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 – Choose a size for the logo using this dropdown list. 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. 

Note: The site name will not appear when a visitor views the Experience on a mobile device, to reduce visual clutter.

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

Dynamic Personalization You can also enhance the Header section by adding Dynamic Personalization. This feature enables the display of personalized content or CTAs based on visitor data, providing a tailored experience that can increase engagement and conversion rates. See Guide to Using PathFactory’s Dynamic Personalization Feature for more information.

By placing the reference in these sections, you ensure that the information about Dynamic Personalization is introduced at points where customization and user engagement are already being discussed, making it relevant and easy to integrate into the overall content.

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

Header Section Type
Header Section Type

Hero Section

This section type enables you to create a section at the top of the Landing Page that includes a headline, subheadline, and a call-to-action button. You may also add CTAs to the Hero section.

When you add a Hero section to the Landing Page Template you have four layout options.

Hero Section Layouts 1
Hero Section Layouts 1
  • Hero with Background Image – this option displays a single hero heading with a single background image.
  • Hero with Carousel Layout – this option enables you to add a series of images and headings that automatically change according to the timer setting you later choose.
  • Hero – this option displays a hero section with text and CTAs only.

Hero Menu Details

  • Section Title – Enter the title you want to display for this section. 
  • Background Mode – From the dropdown list, select Color or Image.
  • Subheading – 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 color you want to display in this section.
  • 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.
  • Scroll Delay – Set the number of seconds you want each hero card to display before automatically advancing to display the next hero card in the carousel.
  • Number of Hero Cards – From the dropdown list, select the number of hero cards you want to display in the hero carousel.
Hero With Carousel Layout expanded 1
Hero With Carousel Layout expanded

Logo-Banner Section

In this section you can display your company logo and ensure it’s visible throughout the Landing Page.

Logo Banner Section Type
Logo Banner Section Type

Teams Section

This section offers a layout that displays team members in a horizontal card view, complete with space for customized messaging. Showcase your team members with photos, names, titles, and brief bios.

The Fixed Contact Card layout in Teams (highlighted below) is designed to be persistently present at the bottom of any PathFactory Templated Experience Landing Page as visitors scroll. Consider using this feature to promote an event or a sales rep’s contact information.

Fixed Contact Card
Fixed Contact Card

Below is an example of a Fixed Contact Card section in the bottom right corner of a Landing Page.

Example of a Fixed Contact Card
Example of a Fixed Contact Card

Team Members Menu

  • 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.
Team Section menu
Team Section menu

Contact Card Menu

If you have chosen the Contact Card layout for the Teams section, you may edit the card using the menu options described below.

Fixed Contact Card menu
Fixed Contact Card menu
  • Section Title – Enter the name you want to appear at the top of the Contact Card for clarity and invitation, ensuring users understand the purpose of the contact card.
  • Card Border Radius – Set a rounded edge to the card, making the design more aesthetically pleasing and modern.
  • Background Mode – Select from color, gradient, or image.
  • Background Color – Click this option to open a color picker to set the background color of the Contact Card.
  • Card Width (pixels) – Adjust this setting to change the size of the Contact Card.
  • Icon, Icon Border Radius, Icon Size (all in pixels) – Add or adjust the icon you want to display on the Contact Card.
  • Contact Info – Add a phone number or email for your prospects to contact the person on the Contact Card.
  • Show CTA – enable one CTA and specify its attributes. Once you toggle on a CTA, a menu appears so that you can set its ID, its size, and the text that will appear on the button. Further, you can set the button text’s font, color, button color, and button color that displays when a visitor hovers their mouse over the button.
  • Swap Positions – Choose which side you want the Contact Card to display at the bottom of the Landing Page. By default, the Contact Card displays on the bottom right side.

Testimonials Section

Use this section to display customer testimonials showing positive feedback from your existing customers. There are two layouts to select from, as shown below.

Testimonials Section Type 1
Testimonials Section Type

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 as highlighted in the screen capture below. 

Add Section button
Add Section button
  • 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. 

Resource Center Section

Use this section to aggregate various resources such as whitepapers, e-books, case studies, and other educational materials.

Resource Center Section Type
Resource Center Section Type


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 June 9, 2024

Was this article helpful?

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