Skip to main content
Design

Choose the content layout, customize the logo, colors, backgrounds, and fonts for your course, and preview it on any device and orientation.

Olga avatar
Written by Olga
Updated over 6 months ago

In Easygenerator you can easily create a consistent visual design of your courses and check how your course looks and behaves on any device and orientation.

Preview

Previewing is a great way to see the adjustments you've made to your course before publishing. Switch between laptop, tablet, and mobile, landscape and portrait views to quickly see how your course will look on different devices.

Overview of the Design configuration:

Layout

Under the Configure tab -> Design, you can choose the layout for your course and decide if you want to present it on multiple pages (regular course) or on one page (microlearning).

If you select the Multiple pages layout, the course cover will be shown with the introduction on the left and the content (sections, pages) on the right, and you can select from the two course navigation settings: Click “Next” or Scroll through.

  • Click next: Learners will need to click on the “Next” button to view new pages in the course.

  • Scroll through: Learners will scroll down to view the new pages in the course.

On the other hand, if you choose the One-page layout, usually used for microlearning lessons, all the content will be displayed on one scrolling page, which means that the course cover and structure are not available.

Table of contents

The table of contents is available for the learners and it allows them to check the overview of the course content and go back and forth as needed.

As the author of the course, you can decide whether you want to expand or collapse this menu by default.

  • If you select the option to expand the table of contents by default, it will be automatically expanded once the learner navigates to the inner course page:

  • If you choose the option to collapse the menu, once the learner navigates to the course content, the navigation menu will be collapsed by default:

Note: Even though you can decide how to display the table of contents by default, the learner can still change its visualization for their convenience.

Advanced design settings

By clicking on this option, you can customize the look and feel of your e-learning course, by choosing a theme, adding your own logo, changing the fonts, and more.

In this tab, you will find:

Themes

Under this section, you can choose a default design theme, create your own, save it, and reuse it in other courses.

Once you have customized your theme, click the Save or Save as new button. The theme will then appear under the My Themes section.

Branding

Under the Branding tab, you can add your own logo, change the background, and customize the color settings, such as text, interface labels, button text, and content body colors.

Course Logo

You can change your course logo either by uploading it from your computer or by attaching a link. The recommended size for the course logo is 360x200 px, depending on the logo shape.

The Cover background logo is shown on the course cover, and the main background logo is shown on the certificate, and, if this option is enabled, on the content and question pages.

Backgrounds

Easygenerator has a gallery of backgrounds you can choose from. You can also upload your own image, or select a solid color.

Interface Colors

Color settings, such as text color, main and secondary color, button text color, and content body color can be customized under Interface colors.

Cover background overlay text and scroll color are applied to the course title and introduction.

Fonts

The last option for the advanced design settings is the fonts. Here, you can choose the fonts and adjust their styles accordingly. It is possible to customize the fonts of the course interface and content separately.

Under General styles, you'll be able to change the font that is applied for the entire course (Body Font). The Headline font is applied to the course title and introduction.

Note: By default, the course title is 48px.

Under Content styles, you can change the fonts for specific content styles like headlines (the course title and intro text), headings, normal text, quotes, highlighted text, and links.

Important:

  • If you choose the One-page layout on the display settings for your course, then on the advanced design settings, the cover background logo under Branding -> Course logo, the cover background section under Branding -> Backgrounds, and the cover background overlay text and scroll color section under Branding -> Interface colors are not available as this option does not include a course structure.

  • Here is an additional document with specific information about where is applied each interface color and heading:

Did this answer your question?