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

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. 

---

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.

2. Select the Content Page Settings tab.
   
3. On the left side of the screen, you will notice a dropdown list labeled sidebar, as shown in the screen capture below. 

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

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

Header Menu

The Header menu offers the following customizations.

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.

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

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.

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. 

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. 

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. 

---

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. 

2. Now you see a list of the Themes that have been created by your organization. 

3. 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. 
4. 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.
5. Now you are presented with a basic Theme ready for your modification Open on the Theme Settings tab.

6. To create a Landing Page Template, click the Landing Page Templates tab.

7. On the left panel, select the Standard link as shown below.

8. Click the Customize button on the top right of the screen to begin setting up your Landing Page Template. 

9. Now you see all of the Sections and Settings within each section that you can customize. 

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

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
• Resource Center

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.

• 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

When you add a Hero section to the Landing Page Template you have three layout options:

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

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

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

Feature List Section Type Details

When you add a Feature List section to a Landing Page Template, you are offered three layout options, all of which are configurable after being added. Your Feature List will have one of the following layouts assigned via the Landing Page Template.

• Feature List with 3 Columns

• Feature List (Vertical Layout)

• Feature List (Horizontal Layout)

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

General

• Section ID – To connect a CTA to this section, copy the Section ID using the clone icon provided. To find out more about using Section ID, read How to Link to Specific Sections Within a Landing Page Using CTAs.
• Section Title – Enter a name for the section. 

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

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

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. 

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

---

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.