Pages and Lessons are the cornerstone of every course. They may seem similar, but they have their differences.

Think of Lesson as a power point file

 – create multiple slides inside to deliver all the theoretical information to your learners. When at this element, a learner can go back and forth through the slides before proceeding to the next element connected by the default arrow. Lesson is keeping the whole sequence of pages in one element so it will keep it nice and tidy on the course map.

Page element, obviously, is a single standing page

and is best used for the purposes of navigation between parts of the course like a menu, for the welcoming and goodbye pages in a course, for pages like “you have failed the test” and “you have passed the test”. 

Page is the only element in the system that can have outgoing click transition connections.

To add a page to a course,

open the course for editing (unpublish it if necessary), then drag and drop the Page element from the toolbar on the left to the pathboard. Once you have added the page to the pathboard, open it for editing to add content to it. 

To add a lesson to a course,

drag and drop the Lesson element from the toolbar on the left to the pathboard, or drag a connection from the previous element. Double click the added Lesson to edit the contents inside. Click + to fill your lesson with more pages.

Using templates

Pages can be designed from scratch, or you can use one of the pre-configured templates to create the basic layout. Page templates contain placeholder images and fragments of text that you can replace with actual text and images.

To create a page using a template, click the "Layouts" icon found in the upper right corner of the screen, select the desired template, and click Apply. Once the template has been applied, you can edit the placeholder objects according to the steps described further in this topic.

Applying a template to a page will remove all objects present on the page.

You can use and place the following types of objects on the single-standing pages and pages within lessons:

  • Text
  • Image
  • Video
  • Shape
  • Iframe

To add an object, 

be it text, image, video, iframe, or a shape, click the corresponding element from the toolbar on the left.

Note: objects placed outside the grid may not be displayed on the page when a learner takes the course.

Images, text frames, shapes and videos on the Page element can become clickable buttons when you set them as target objects to a click transition. 

Text

Click a text object once to customise it. This enables you to do the following:

  • Click "Maximize" icon to increase the size of the selected object so that either its height fits the height of the page, or that its width fits the width of the page. Note that the ratio between the object's width and height remains constant.
  • Click "Fit to width" icon to make it so that the selected object fits the width of the page.
  • Click the "Clone" icon to copy the selected object. A copy of the object is created on a separate layer. Layers are explained further in this article.
  • Click the "Delete" icon to delete the selected object.

You can also do the following:

  • Set the opacity of the text, from 100% to 0%
  • Add a border to the selected object. You can choose to make the border either solid or dotted line, and set the border's thickness and color
  • Apply either the "heading" or "normal" preset to the text. This changes the font, the size, and the color of the text depending on the selected color scheme:
  • Set the size, line spacing and padding of the text
  • Apply styles, such as bold, underscore, and italic
  • Set the alignment 
  • Define the text color
  • Add a bullet or numbered list
  • Add an external link

Once you have finished customising your text, click anywhere on the screen to close the customisation menu.

Image

Click an image object to customise it. This enables you to do the following:

  • Click the "Maximise" icon to increase the size of the selected object so that either its height fits the height of the page, or that its width fits the width of the page. Note that the ratio between the object's width and height remains constant.
  • Click the "Crop" icon to select a part of the image to be shown on the page.
  • Click the "Clone" icon to copy the selected object. A copy of the object is created on a separate layer. 
  • Click the "Delete" icon to delete the selected object.

You can also do the following:

  • Upload an image from your computer or device
  • Use Google safe search to search for an image hosted elsewhere and use it
  • See the list of recently used images and pick one from the list to use
  • Set the opacity of the selected object, from 100% to 0%
  • Add a border to the selected object. You can choose to make the border either a solid or a dotted line, and set the border's thickness and color

Once you have finished customising your image, click anywhere on the screen to close the customisation menu.

Video

Click a video object to customise it. This enables you to do the following:

  • Click the "Maximise" icon to increase the size of the selected object so that either its height fits the height of the page, or that its width fits the width of the page. Note that the ratio between the object's width and height remains constant.
  • Click the "Select interval" icon to select a part of the video to be shown on the page.
  • Click the "Clone" icon to copy the selected object. A copy of the object is created on a separate layer. 
  • Click the "Delete" icon to delete the selected object.

You can also do the following:

  • Upload a video from your computer or device.
  • Use Youtube to search for a video hosted there and use it.
  • See the list of recently used videos and pick one from the list to use.
  • Enable autoplay. This makes it so that the video starts automatically once a learner arrives on the page.
  • Add a border to the selected object. You can choose to make the border either a solid or a dotted line, and set the border's thickness and color.

Once you have finished customizing your video, click anywhere on the screen to close the customization menu.

Shape

Click a shape object to customize it. This enables you to do the following:

  • Click the "Maximise" icon to increase the size of the selected object so that either its height fits the height of the page, or that its width fits the width of the page. Note that the ratio between the object's width and height remains constant.
  • Click the "Clone" icon to copy the selected object. A copy of the object is created on a separate layer.
  • Click the "Delete" icon to delete the selected object.

You can also do the following:

  • Upload a .SVG file from your computer or device.
  • Set the opacity of the selected object, from 100% to 0%.
  • Choose a color to fill the shape with.
  • Add a border to the selected object. You can choose to make the border either solid or dotted line, and set the border's thickness and color.
  • Add a shadow, select its size, color and opacity

Once you have finished customizing your shape, click anywhere on the screen to close the customization menu.

Iframe


Click an iframe object to customize it. This enables you to do the following:

  • Click "Maximise" the icon to increase the size of the selected object so that either its height fits the height of the page, or that its width fits the width of the page. Note that the ratio between the object's width and height remains constant.
  • Click the "Clone"  icon to copy the selected object. A copy of the object is created on a separate layer.
  • Click the "Delete" icon to delete the selected object.

You can also do the following:

  • Specify the URL of the object to be embedded.
  • Set the opacity of the embedded object, from 100% to 0%.
  • Add a border to the embedded object. You can choose to make the border either solid or dotted line, and set the border's thickness and color.

Once you have finished customizing your iframe, click anywhere on the screen to close the customization menu.

Layers

Every object on the page exists on a separate layer. This comes into effect to determine what object is displayed on top when two or more objects overlap. To see all the layers, click the "Layers" icon. 

Mouse over a layer to bring up the instruments that enable you to do the following:

  • Click the "Arrows" icon or the  icon to move the layer up or down the list. Objects on layers higher on the list are displayed on top of objects on layers lower on the list when two or more objects overlap.
  • Click the "Settings" icon to customize the object on the layer.
  • Click the "Delete" icon to delete both the layer and the associated object.

When you have finished working with the layers, click anywhere on the screen to close the layers menu.

Managing objects

Once an object has been added, you can relocate it, resize it, rotate it, and customize it.

To relocate an object,
drag and drop it to the desired location on the page. You have two tools that help you to position objects with respect to each other:

  • The grid. Align objects using the grid as a reference. If you move the horizontal or the vertical edge of an object close to one of the grid lines, the object will "stick" to it. This makes it easier to move the object along one of the axes without shifting its position along the other.
  • Alignment lines. Alignment lines appear when you move an object in such a manner that either its center aligns with the grid (either vertically or horizontally), or one of its edges aligns with the edge of a different object. This helps you align objects against the grid and each other.

To relocate several objects at once,
hold the left mouse click and hover over the objects you'd like to select. When you see the selected objects in one frame click anywhere within to change the location.

To resize an object,
click it, and then click one of the four corners of the object and drag them. Note that the ratio between the object's width and height remains constant. If the selected object is a text, you can also click the arrow icon on its right side to make the text object wider or more narrow.

To rotate an object,
click it, and then click the circle icon connected to the object's bottom right corner and rotate it clockwise or counterclockwise.

To customize an object, click it. The available customization options depend on the type of the object.

Customizing the background

To add a custom background to your page, click the top or the middle icon in the top right corner of the page:

  • Click the top "Color" icon to fill the background with a single color.
  • Click the middle "Image" icon to either upload an image from your computer or device, or to use Google to search for an image hosted elsewhere, and use it as the background.

Choosing the color scheme and typography

Your page can be customized further with an alternative color scheme and typography.

To choose a different color scheme, click the "Customize" icon, then click the name of the currently selected color scheme. Select a new one from the menu, then click anywhere on the screen to close the customization menu.

To change the typography, click the "Customize" icon, then click the name of the currently selected typography. Select a new one from the menu, then click anywhere on the screen to close the customization menu.

The font at the top will be used for text with the "heading" preset applied, and the font at the bottom will be used for text with the "normal" preset.

Previewing, saving, and exiting

When you have finished editing the page, it is time to see how it would look in the course.

To preview the page, click the "Eye" icon.

If you are satisfied with the look of the page, it is time to save the changes you made and exit the page editor.

To save the changes you made to the page, click the "Save" icon.

To exit the page editor and return to the course builder, click the "Close" icon.

Did this answer your question?