It looks like you have JavaScript disabled. Please enable JavaScript. znanja uses JavaScript to provide a more interactive experience and to improve response time, so most features will not function without it.

Course Editing: In-depth

Using the Page Builder

Share this video

Course Editing: In-depth

Using the Page Builder

You can edit a page in your course by using the page builder. The page builder is a powerful tool that can help you easily create beautifully designed and functional pages for your courses. It gives you the ability to add text, pictures, links, videos, maps, and other content easily right onto the page.

You can also quickly create a variety of specific pages using the page builder’s templates, which include the following types of pages:

‘Product features’

‘Testimonials’

‘Contact Us’

‘Pricing’

‘Meet the Team’

‘How it Works’

‘As Featured On’

‘Achievements’

‘Under Construction’

Teams Skills’

To open the Page Builder tool, select Page Builder from the top bar of the editing screen.

This will close the classic editor and open the page builder.

Note that you must save any changes you have made to your page before entering the page builder. Do this by clicking Publish.

Creating and Editing Pages

The Page Builder can be used to edit pages you have already created, as well as create new pages.

To edit a page that has already been created, navigate to it using the Table of Contents on the sidebar.

To create a new page, click add page at the bottom of the screen. After entering a title for the page, the new page will be created and you will be taken to it.

To begin building your page, drag snippets of content from the right-side menu onto the page. Its position on the page is indicated by a faint grey bar.

Continue dragging snippets as you desire.

Note that a filter can be applied to the list of snippets based on content type by clicking on the top dropdown menu, and selecting a category.

Editing Snippets

Once a snippet has been added to a page, click anywhere on the snippet to open a set of four buttons.

Clicking and dragging the green button will allow you to move the snippet around on the page.

Clicking the blue button opens the coding string for that snippet. This code can be edited to change how the content looks.

Clicking the grey ‘+’ button adds an identical snippet directly after your current selection. If any changes were made to the snippet, they will be reflected in the copied version.

Clicking the orange ‘x’ button will delete the entire snippet.

Editing Text

To edit the text inside a snippet in the page builder, first click on the section of text you want to edit.

A text editing toolbar will appear at the top of the page which contains options for formatting your text and adding links.

Overview of the Page Builder Text Toolbar

Bold: makes text bold

Italic: makes text italicized

Underline: makes text underlined

Strikethrough: will strikethrough text

Color: allows you to select the colour of your text selection. You can define whether to select the text color, background color(the background behind only the selected text), or block background color(the background behind the entire block of text, no matter what text is selected).

Font size: allows you to change the size of your text selection

Clean: removes any formatting applied to your text selection and returns it to the default formatting.

Paragraph: allows you to apply headings to your text selection

Font: allows you to choose the font type from a list

Alignment: allows you to select either left, center, right, or justified alignment for your paragraph

List: allows you to adjust indenting, start either a bullet list or numbered list, or remove a list from the page

Link: allows you to create a hyperlink over your text selection. Clicking this button will open a menu where you can define the following fields:

Link: This is the link that will be added to the page.

Text: This is the text that will appear on the page to the students containing the link.

Title: This adds a title when hovering over the link. It is commonly used to add a description on where the link goes.

Target: This can toggle whether the link will be opened in a new window or not.

Remove link: will remove any link already added to a text selection

Icon: opens a library of icons that can be added to the page by clicking on them

HTML: opens the HTML coding for your text selection, and allows you to make changes

Type text changes directly into the paragraph and use the text editing toolbar to make formatting changes.

To exit the text editing mode, click anywhere outside of the text area.

Overview of the Page Builder Toolbar

In addition to the snippets menu on the side, and the text editing menu when accessing text, there are a set of commands at the bottom of the page builder.

View HTML: this shows the HTML code for the entire page. You can edit this code in the window that appears.

View Page: this closes the page builder and displays the course page as it would appear to a student. To exit the viewing mode, click Edit page from the sidebar menu to return to the course editor.

Classic Editor: this closes the page builder tool and returns you to the course editor.

Publish: this saves your changes.

Add page: this adds a new page to the course.

Clone page: this creates a duplicate of the page you are currently editing, and inserts it directly after the current page.