This article is about the page builder tool in the admin website. This tool can be used to enable page templates and create customized pages for a portal; once a page is created, it can be accessed by other tools in the admin website—automations and flows—for use in the portal.

• To read about enabling a system Page template, see this article.


• To read details about each system Page template, see this article.

What is a Page?

In this context, a Page is a single, specific destination that members go to when visiting the portal. The page builder enables you to create customized pages by selecting various building blocks, which are called “components,” and arranging them as tiles within sections on the page. For instance, you can build a homepage that has tiles arranged for specific content, courses, and trackers that the portal members will see when they log into the portal.

To build a page, you arrange a single section, or multiple sections, as you’d like them to appear. You can determine what appears in a section by setting configurations or by dropping component tiles (this is explained more in this article).

To choose an existing page template or to create a new page from scratch:

1. Go to the Settings section of the admin website.


2. Enter the Portal Management module.


3. Select the portal.


4. Click on "Page Builder" under the CONTENT section on the left menu column

You are now on the Page Builder manager. Here, you can view any pages that currently exist in the portal listed in the table.

1. The actions menu allows you to view, edit, copy, delete, and export the page (exporting is convenient for importing a page to other portals without having to recreate it).


2. The title, which contains two versions: a user-facing title and an admin-facing title. Admin-facing titles can help with internal organization; for instance, if you have several pages designed for weight management, with one page being more basic than another, the admin-facing titles might be “Weight management 1” and “Weight management 2.”


3. 
   Keywords, which also contain a user-facing and admin-facing version.


4. 
   Type indicates whether the page is custom, which means it is listed in the table as a singular page, or a template page, which means it will appear in the template catalog for the portal (where the system template pages appear, which we’ll discuss below).


5. 
   Last published shows the date of the most recent published version of the page.


6. 
   Status is either draft, which means it is not yet published and cannot be used yet, and published, which means it can be used.

To create a new page or to choose from an existing template, click on the CREATE button above the Page Manager table.

Now you can choose a template to start from OR you can create a new page from scratch. If you want to read about the system page templates, see this article.

Creating a New Page

Note: You can make it a template page by clicking the "Template" box on the right, beneath the CREATE NEW button. This will make the page appear in the template catalog when you first choose to create a page and enables easy access and editing of a previously created, foundational page.

Click on the CREATE NEW button in the upper-right corner. Now you are in the page-builder tool.

The page builder is divided into three main parts:

1. Components—this contains the sections and interactions, which are the building blocks of the page.


2. The drag-and-drop field—this is where you build the page by adding the section and interaction components. 


3. The Page Settings fields—this is where you configure settings and styles for sections, components, and the page itself.

Enter the Page Settings

The first thing to do when you're creating a new page is to set a page title and other page details, which will appear in the table so you can identify the page's purpose:

1. Choose the title for your page.


2. Enter a short summary for the page; this appears on the page tile after it's been saved.


3. Enter the description for the page; the description is generally more detailed than the summary and explains what the page is meant to be used for.


4. Enter a keyword for the page.


5. Upload a thumbnail image for the page (jpg or png are accepted, ideally 300x200).

After editing the page's basic settings, it's time to build the page. The first step is to choose a section, as all pages must contain at least one.

Types of sections to choose from:

1. Component section—This is the most general section type, in which you can add any of the component options as a single tile by drag-and-dropping them from the components field on the left. All tiles added here represent a single piece of content or a single action, making the process of populating this section slightly different from the other section types. 


2. Custom section—You can create a section from scratch.


3. Content section—This section can be used to show up to 100 tiles of individual content pieces from the library. 


4. Course section—This section can be used to show up to 100 individual course tiles.


5. Tracker section—This section can be used to show up to 100 individual tracker tiles.


6. Challenge section—This section can be used to show up to 100 individual challenge tiles.

Adding and Configuring Sections

The page builder automatically has a components section in it. You can use this component section or you can delete it and add a different section from the four options on the left:

After choosing the first section you want on the page, configurations on the section can be done by clicking the header, which opens the section editor on the right.

Here, you can make stylistic edits for the header:

1. Enter a title for the section.


2. Choose a background color for the header.


3. Upload a picture, if you choose, to display in the header.

Watch a short video on making stylistic edits to sections:

Creating a Component Section

The component section is the wild-card section, as it can contain any number of different interaction component types in the arrangement of your choosing. To add an interaction component, simply drag-and-drop it from the left to the builder field: 

Watch a short video that shows how to add components to a component section:

The Components List

• To-Do’s—Displays the member's list of to-do's.


• Goals—Displays the member's short- and long-term goals.


• Wellness Vision—Displays the member's wellness vision.


• Page—Displays a tile that links to another page.


• Flow—Displays a tile that, when clicked by the user, takes the member to a specific flow that you select.


• Content—Displays content  that you select from the content library that the member can read, listen to, or watch on the page.


• Tracker—Displays an interactive tracker tile,


• Course—Displays a specific course tile.


• Redirect—Displays a tile that redirects the member to the selected destination: course catalog, specific course, specific flow, specific page, goal reminder center, personal journal, member dashboard, portal home, trackers dashboard, or inserted URL.


• Call-to-Action—Displays a tile that, when clicked, takes the user to the call-to-action in the portal's general settings.


• BMI Calculator—Displays the BMI calculator.


• Calorie Calculator—Displays the calorie calculator.

Configuring Course, Content, and Tracker Sections

Determining what displays in these three sections works differently than the process for the component section. Once you select any of these section types, you can choose what to display using the setting editor on the right. 

For course/content/tracker sections, you can display up to 100 tiles by choosing the amount in the display field. These tiles are interactive for members; for instance, a member can review a course outline, start a course, and continue from a course tile; trackers can be used from a tile; and content can be read, watched, or listened to from a tile.

You can populate courses, content, and trackers based on associated keywords by entering them into the keyword field and you display them based on one of four rules:

1. Alphabetic ascending


2. Alphabetic descending


3. Date added ascending


4. Date added descending

Let's look at an example:

In this image, you can see that a course section has been added. The section has been stylized by making the header blue with a background image. Further, the section has been configured to show up to 22 tiles for courses, with no keywords assigned, arranging the course-tiles descending order down the page based on the date the course was added to the portal:

1. In the style editor, the color blue was chosen and an image was added: both of these can be seen in the section's header.


2. The display limit has been set to 22, which means up to 22 course tiles will be displayed here.


3. The order in which the course tiles are displayed has been set as "date added, descending." You can also choose to display tiles alphabetically.

Watch a short video about Course, Content, and Tracker sections: