Creating and editing the lessons in Web Page Designer Tool

How to add (create) a lesson?

We have already described how to add a new lesson in this article.

Then select a type of lesson editor — web page designer tool or visual editor. This article will look at Web Page Designer Tool to create new lessons. Therefore, enter the name of the lesson, leave the settings by default and click “Choose a template”:

How to create lessons with visual editor is described in this article.

Template Selection

Select a template for your future lessons or create a new template from scratch. Look carefully through the templates to decide on the best one. Here you can also find previously created ones. Click “View” to preview a template:

The opened window will preview the template on a computer screen and mobile devices. If you select the right template, it’s time to create a lesson:

Page designer tool for lessons

1. lesson page settings
2. adding sections and widgets

Lesson designer tool occupies all screen.
Control buttons are at the bottom of the screen:

• left — page settings;
• right — adding new elements.

Control buttons on the left:

1. exit from designer tool
2. lesson page settings
3. lesson preview
4. saving a lesson as a template
5. saving changes in a lesson

To start creating a lesson, drag and drop the required section in the workspace and then add the relevant widgets to it.

Collection of ready-to-use sections

Large page blocks — sections —are divided into categories by the content: advantages, content, header, footer, products, etc. Ready-to-use sections can speed up the process of creating the lessons. Click “Add element” below to the right to select and to add the sections on the page.

You can also add your own partition templates to a collection of finished partitions.
To save the section as a template, move the mouse over the upper-right corner of the section and click the star icon.

To delete a partition template, go to the My Partitions category in collection and click the recycle bin icon on the partition template you want to delete.

How to add new widgets

To add widgets on the page, select and post a section (by left clicking the mouse). Click “Add element”. A panel will pop up on the right, select a tab “WIDGETS”, click the required element and drag and drop it to the section where you wish it to be.

Element insertion place is blue coloured.

How to drag and drop elements

To move a section or a widget, click a block heading. Hold the left button of the mouse over an element and drag and drop it to the required place. You can select an insertion place before placing an element in the chosen place. Follow the same procedure for the blocks in one row. Just drag the line between them. This procedure is frequently used to place a text near an image, however, it is available for any blocks:

Widgets can be moved inside a section and between the sections. When you drag a widget from one section to the other, it becomes the first in a new section. Once you drag a widget to a new section, select this section (by left clicking the mouse) and drag a widget to the required place inside the section.

How to change the element design

Click the required element — you will see its settings in the right panel. Each widget has ready-to-use styles which can save your time.  You can add CSS classes to the block in html/css tab.

Web page designer tool will save your time and create useful lessons for your students.

Working in the mobile version of the lesson builder

Sometimes it may be necessary to edit a lesson with only a mobile device at hand.
In the lesson designer, you can add, delete sections and widgets, make changes to the widget settings from mobile devices.

FAQ (frequently asked questions)

<details>
<summary>Title. If you need any spoiler to be open, add “open” attribute to “details” tag.</summary>
  <p>Spoiler content</p>
</details>

<details open>
<summary>Title 1</summary>
<p>Spoiler content</p>
</details>
<details>
<summary>Title 2</summary>
<p>Spoiler content 2</p>
</details>