The Page Builder

Modified on Mon, 12 Feb 2024 at 09:47 AM

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.


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


page builder 1.jpg


 


You are now on the Page Builder manager. Here, you can view any pages that currently exist in the portal listed in the table. To create a new page or to choose from existing page templates, click on the CREATE button above the right corner of the table:


 


page builder 2.jpg


 


Creating a New Page


The page builder is divided into three main parts:


 


page builder 3.jpg


 



  1. The Section and Component Options—these are the building blocks of the page.

  2. The drag-and-drop field—this is where you build the page by adding sections and components (components are added within the larger sections).

  3. The 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:


 


page builder 4.jpg


 



  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.


 


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.


 


There are four different 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. 

    The other 3 sections are not populated by drag-and-drop, but rather by setting the configurations from the Settings section.

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

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

  4. Tracker section—This section can be used to show up to 100 individual tracker 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:


 


page builder 6.jpg


 


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.


 


page builder 5.jpg


 


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 component types in the arrangement of your choosing. To add a component, simply drag-and-drop it from the left to the builder field: 


 


page builder 7.jpg


 


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:


 


page builder 8.jpg



  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:


 



 


 

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article