Help Center / Website Editor

How to edit the design and content on your course website

This article explains how to use the Website Editor to customize the design and content of your course website.

There are two ways to access the Website Editor for your course.

The first is directly from the My Courses screen in your LessonFlyer admin panel. Find your course and click on the Edit Course Website icon on the toolbar above the course's name. 

Edit Course Website icon
Edit Course Website icon

The second way to access the Website Editor is from the Course Website dropdown menu that appears on all of the screens pertaining to the currently selected course.

For example, the screenshot below showing the course Curriculum & Content screen has the menu button in the upper right corner. All of the screens linked to on the left menu (pointed out in the box below) also have this menu button.

To access the Website Editor, click the Course Website button and select Edit Design from the dropdown menu.

The Course Website dropdown menu appears on all course related screens.
The Course Website dropdown menu appears on all course related screens.

When the Website Editor loads you'll see a preview frame showing the course's website and a toolbar with some controls along the top of the screen.

There's a light grey border separating the toolbar and the sides of your web browser from the preview frame. When you view the actual website the toolbar and grey border won't be there.

Course Website Editor
Course Website Editor

When you hover your cursor over the preview frame the elements of your website that are editable will highlight with an animated dashed border. A button will also appear that you can click to edit the highlighted content.

Hover to reveal editable content
Hover to reveal editable content

When you click the button to edit highlighted content a Design Menu will open on the left side.

You'll see different options on the Design Menu depending on what you're editing but they'll always be contextual (related and applicable) to the content you clicked to edit.

If you make any changes on the design menu the website preview frame will update automatically and a blue save bar will appear across the top of the screen.

Click the Save Changes button to save and apply your changes to the website

Or click the Discard link to undo your changes and revert back to the prior settings.

Edit content and design settings on the left design menu.
Edit content and design settings on the left design menu.

You can navigate to any page of your course's website from within the Website Editor's preview frame by clicking links as you normally would on a website.

In the screenshot below we clicked Course Details on the site navigation bar to go to this page in the preview frame.

As described above, hover your mouse over parts of the page and content that is editable will highlight.

Course details page in the website editor preview frame.
Course details page in the website editor preview frame.