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.
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.
Related Tutorial Video