Sections for online course
In this article, we will tell you how to add a block with information about courses to your website.
In the world of online learning, ease of navigation plays a key role in attracting and retaining users. Customizable course cards are a great way to make your website more interactive and informative.
These cards allow visitors to quickly find the programs they are interested in and easily navigate to course pages with just one button. In this article, we'll look at how to set up a section of customizable course cards to enhance the usability of your website and help users achieve their educational goals faster.
Instead of using online flashcards, you can add lesson lists to the website page: just select the required course in the section and all the lessons will be displayed:
How to add the "Course cards" section
To add the "Course cards" section, click on the "+" in the editing mode of your website:
Then find the "Course cards" section in the menu that opens and click on it to add the section to your website:
The section will be added to your website site, and the content settings menu will open for you:
Content section
Configuring the content of the Course cards section consists of selecting a course(s) that has already been created in the project to display on the website and customize the card elements.
Choosing a course
Choose the courses that you would like to showcase on your website:
To do this, tick the box with the name of the required course:
In turn, the selected courses will immediately be displayed on your website page with the cover that you set in the course settings.
Customization
After you have selected the necessary courses, proceed to customizing the card elements:
Shadow
For course cards in the section, you can adjust the shadow intensity:
a) without shadow:
b) light shadow:
c) strong shadow:
Color palette for card elements
You can change the colors in the card for the background, text (both on the card itself and in the buttons), and also add interactivity to the cards by changing the colors of the elements when hovering over them with the cursor:
a) Text color: it will help to change the main color of the text in the card (except for the button):
b) Background of the card: to change the color scheme of the background for the card:
c) outline color: to change the color scheme of the card frames:
d) Button text: to change the color of only the button text in a static state:
e) Button background: it will help to change the background color for the course card button:
For the dynamism of the site, you can also change the colors of the button when you hover the cursor. To do this, you can use the hover color settings:
Now you know how to display the available courses in the Salebot on your website using the "Course cards" section.
How to add the "Lesson lists" block?
To add a block to display the list of lessons in the course, switch to the website editing mode and hover over the workspace, and then click on "+":
A menu opens on the right with the available sections of the site, where you need to find the "Lesson lists" block:
Click on the "Course cards", and then a menu will open for configuring the content of the block:
You just need to select the required course, which has already been created in the Salebot, in the drop-down menu and click on "Save".
Then go to settings to customize the block content:
Customization
When you click on the "Settings" button and hover over the section, the settings for customizing the content and the block itself open:
What settings are available?
Lesson list style
By default, the style of the lesson list is displayed in a new format. If necessary, you can set a more concise version of the classic format:
Numbering style
The numbering style is available for a new style of displaying the lessons of the course. The numbering changes in the lesson card itself:
Lesson icons
They are displayed if you added a preview inside the lesson itself in the course settings.
How to add icons
Step 1. Go to the lesson settings:
To do this, go to the course settings mode and find the Lessons tab:
Next, click on "Edit", after which the lesson page will open for editing.
Step 2. Open the lesson page settings.
Go to the "Basic information" section in the lesson page settings:
Step 3. Download the lesson preview
Expand the list of image settings in the basic information settings:
Upload an image for the lesson preview:
Save the settings:
Done! Now lesson previews will be displayed as icons in the Lesson Lists section on the website.
Background pattern
It adds volume and uniqueness to your lesson cards:
Element rounding
The value is set in pixels and rounds off the corners of lesson cards:
Lesson card style
It helps to arrange lesson cards in one row or in a row with or without hyphenation.
Background and text color
There is an extensive color palette available to set the background color of the card and the font color on the lesson card:
Now you know how to add lesson lists to your website and customize the content of the section.
Last updated