Build unique and fully customized activities, reports, feedback, and scoring pages using Page Builder's easy edit component library. This DIY template lets you get really creative!
As of : Q2'23 - Release 1.5
DIY STEPS
In the “Page Builder” template edit screen, within each Row or Column you create is a field in which you can add custom components (like text, pictures, videos, inputs or charts)!
Click + Add item to access your component options.
There are three tabs, each with various components to choose from:
The Basic Tab offers things like text, pictures, videos, and inputs
The Data Tab offers charts, gauge, and rating outputs
The Layout Tab offers you the ability to add some spacing between these elements.
You can add multiple components to each Row or Column field.
To edit any of them, hover over the component and choose edit.
To delete any of them, hover over the component and choose “remove”.
You can resort their order within the box with the arrow buttons “move right”, “move up” etc.
Keep in mind a few Best Practices:
Do: Try to balance your layout and minimize scrolling for your learners.
Don’t: Overcrowd the page with too much text or busyness
FAQ
Which Page Builder components can you make "Required"?
PageBuilder components with the required option:
Dropdown
Checkbox
Radio
Rating (Input)
Likert
Video
AI Video
The following PageBuilder components don't have the required option because they are not interactive:
Rich text
Image
Bar chart
Line chart
Pie chart
Gauge
URL
Timer
Table
Character Avatar
Rating Output
Divider
Spacer
The following PageBuilder components don't have the required option because they have a starting value:
Number entry
Slider
What configuration options are available for the Table component?
You can adjust the Alignment (left/center/right) and Width by clicking on the Column label field, see the image below.
The Width can be set to a specific number of pixels or add “%” after the number to set a percentage width.
NOTE: if you have a lot of white space in your table, you can add a column to the right or left using the ellipsis (...) button on the page, or change your container width in the page’s Configure > Style settings.
