Using the Page Builder
Overview of the Page Builder
What Is the Page Builder?
The Page Builder is an editing tool in the Velsoft LMS that allows you to drag and drop content on a page of an eLearning course. Alongside the Page Editor, the Page Builder gives you the ability to edit and customize your eLearning courses to meet your needs.
In a similar way to many slideshow editing programs, content in the Page Builder is not restricted to any single grid or column. A wide range of content can be freely moved around the page and positioned in exactly the way you want.
Navigating to the Page Builder
To access the Page Builder, start by opening the Page Editor in the Velsoft LMS. Begin by clicking Courses, then My Courses from the sidebar menu:
Then click the dropdown next to the course you want to edit, and click Edit Course:
This will open the Page Editor. To access the Page Builder, click Page Builder from the upper toolbar:
The Page Builder will open:
Parts of the Page Builder Interface
The Page Builder is comprised of a main editing area with a number of toolbars and panels to add and edit content.
The main area (1) displays the page you are currently editing. This is where you can view, add, and edit content, and preview the changes you are making.
Content can be added to the page using the top-right toolbar (2).
The side panel (3) is used to format content that has already been added to the page.
The bottom toolbar (4) is used for actions including publishing, previewing, cloning or adding pages. You can also navigate back to the Page Editor using this toolbar.
Page Structure in the Page Builder
Pages that are edited in the Page Builder are organized into sections and blocks.
A section is the area in which you can add content. It acts as a background behind a page’s content. A single section can contain any number of blocks of content, and multiple sections can be added, arranged vertically.
A block contains one or more pieces of content. This could include text, images, media, etc. Blocks can be positioned within a section by dragging and dropping.
Parts of the Top-Right Toolbar in the Page Builder
Let’s take a closer look at the top-right toolbar, and the actions it can perform.
The plus (+) button (1) is used to add blocks of content. It can also be used to add new sections, flex sections, and templates.
The Toggle Side Panel button (2) can be clicked to show or hide the side panel. The side panel is used to format content that has been added to a page.
The Undo and Redo buttons (3) can be used to undo or redo an action.
Clicking the ellipses (…) (4) opens a sub-menu of additional options:
These options include device preview buttons (1), a zoom slider (2), a light/dark interface theme selection (3), and a Preferences menu found under the gear icon (4).
The Preferences menu contains a number of helpful options:
Using the Code Editor menu (1), you can select whether you want to use the basic or advanced code editor when using developer tools. The basic code editor simply lists the code as plain text. The advanced code editor uses color coding to distinguish between different coding tags in the editor.
The Paste menu (2) lets you choose whether you want to paste text or HTML code in the page builder.
The Show Section Label menu (3) lets you toggle the display of the “section”, “slides”, and “flex section” labels in the top-right corner of sections in the main area:
The following options are available under this dropdown menu:
- Flex sections: labels are only shown for flex sections
- Active section: a label is only shown for the section currently being edited
- All sections: labels are shown for all sections
- No: all labels are hidden
The Workspace Style menu (4) lets you choose between a Default or Light style behind the main area. Selecting Default, then choosing a color from the color swatches (5), will change the color of the workspace to match. Selecting Light will automatically change the workspace to a light white color.
When you are done making changes, click OK (6).
