Using the Page Builder

Templates and Device Previews

Templates in the Page Builder

A number of templates are available for use in the Page Builder that allow you to quickly add content and formatting to the page.  


To open the list of templates, start by clicking the + (plus) button on the upper toolbar: 


Then click Templates


A list of available templates will appear. There are three different types of templates: imagery, text, and article. You can switch between these types by clicking the gear icon, making a selection in the dropdown list, and clicking OK


When you have found the template you would like to use, click on it: 


The template will be applied to the page: 

You are able to edit any element on the page once the template has been applied.


Previewing Pages

To preview this page as a student would see it, click View page from the bottom toolbar: 

A preview of the page will appear. You can then click Edit Page to return to the Page Editor: 

Once in the Page Editor, click Page Builder to return to the Page Builder:


Using Device Previews

E-Learning courses in the Velsoft LMS can be accessed on a variety of devices including desktop/laptop computers, tablets, and mobile phones. The Page Builder includes some important device previewing tools that allow you to edit your pages to fit any or all of these formats.

By default, the main area matches the dimensions of a generic desktop or laptop screen. You can modify this area to match the dimensions of another device, like a tablet or mobile phone, by clicking one of the device options at the bottom of the side panel:

The dimensions of the main area will be changed, and any content will be automatically adjusted as needed: 

This will allow you to edit the page while seeing the dimensions that will be used on other devices, and allows you to optimize the way you format content.

You can also view a preview of the page with other device dimensions without needing to modify the editing area. Start by clicking on the ellipses (…) icon on the upper toolbar: 

Then click one of the device options:

The device preview will open: 

Click on the X to navigate back to the Page Builder.


Using the Responsive Tab

The Responsive tab, under the Block tab, can be used to adjust settings for blocks as they pertain to different device dimensions. Click on a block to select it, and make sure the Block tab is open in the side panel. Then click to open the Responsive tab:

The first three toggles can be used to hide this block on specific devices. This may be used to hide a block that does not fit well, or that is not needed in a differently-sized format:

There are also toggles for additional options including disabling auto-adjust when on mobile, maintaining the current spacing, and allowing overlap in different device dimensions: 

Click on any of these toggles to make a change.