Online course section
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.
How to create courses on the Salebot platform is described in the section “Online courses”.
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:
Card elements color settings
Customize the card's appearance by adjusting colors for various elements. You can also add interactive hover effects.
Text Color: Changes the primary text color on the card (excluding buttons).
Card Background: Sets the background color of the card.
Border Color: Defines the color of the card's outline or frame.
Button Text: Sets the color of the text inside the button (static state).
Button Background: Sets the background color of the button.
Interactive hover effects (optional section):
Enable hover effects to dynamically change the color of these elements when a user moves the cursor over the card.
Now you know how to display the available courses in the your MaviBot site using the "Course cards" section.
For background and display settings, see the article "Global section settings".
How to add the "Lessons" 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 "Lessons" 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 "General" section in the lesson page settings:
Step 3. Upload 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 Lessons 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.
For background and display settings, see the article "Global section settings".
Last updated