Qubely Compatibility

Edumax has full Gutenberg support. Meaning you get all the amazing benefits Gutenberg has to offer. There are also specific Gutenberg blocks made just for your LMS Site.

You will find these under the Edumax section in the Add Blocks section.

Edumax core blocks

Course Listing

Course Listing helps you to see all the existing courses on your site. After adding it to your directed page/post you can customize it to your needs.

Course Listing block Edumax

Course Settings

Select Layout: Select from predefined two layouts.

Select Column: Select the number of columns you want to show in the course listing.

Post Order: Define if the post order will be ascending or descending.

Number of Post: Drag the bar to select the number of posts you want to show. You can also manually set the number.

Course Title

Enable/disable: Use the toggle button to enable/disable course title. Once you enable the course title you will find the following options.

Typography

Typography: To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Admin

You can choose to show the author’s name for the course & set its properties from here.

Disable admin

You can enable or disable the Author information using the toggle.

Typography

To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Color: Choose the color of the text using the color picker. You can choose from a wide range of colors.

Rating

Every course has a rating option, which the students give for a specific course. Indicating the satisfaction 

Disable Rating: You can choose to disable the ratings of the courses in your listing using the toggle button.

Color: Choose the color of the rating (in this case the star symbols indicating rating) from the color picker.

Price

Courses might be free or paid depending on your marketplace policy. In the course listing, the price of a course is shown right below the rating of the course.

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Color: Choose the text of the price. You can set any color from the color palette and apply it.

Get Enrolled

A student can easily enroll himself/herself using the “Get Enrolled” button found after the price of the Course Title.

Typography: 

To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Color: Choose a color from the color palette for the to get enrolled text.

Hover Color: If you want to set a different color for the hover state, choose a color from the color picker from here.

Advanced:

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is where you define the name.

With the course search block, you can enable your users to search for a specific course using relevant keywords. Once you add it to your post/page, you will find the following options.

edumax course search block

Input

Typography

To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Border: Set a border around your search block. Predefined borders include Solid, Dotted, Dashed and Double. There is also a clear button if you don’t want to apply a border.

Border Radius:  You can also set the radius of the search block using the Radius function. The scale can be calibrated between 1 to 100. You can apply the same value to all the corners by choosing the global option or also using the Custom option will let you set a different value for each corner. It’s a responsive feature that means you can apply different values for different device types.

Color

You can define the color for two states of your user’s interaction.

Normal

Background color: Choose a color for the background of the search box.

Input Text Color: Set the input text color form the color palette.

Placeholder text: This option lets you set a color for the placeholder text.

Focus

A Focus state is when a user searches for courses. You can set the following properties for this state.

Background color: Define a color for the background in the focus

Border Color: You can also set a specific border color with the 

Advanced

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is where you define the name.

Category Listing

In your LMS site, there are multiple categories of courses. Your students can choose their desired category. And if you want to show all your existing categories in the list, you can use the Category Listing block.

edumax category listing block

Once you add it to your post/page you will find the following configuration option.

Course Settings

Select Column: Select the number of columns you want to show in the course listing.

Post Order: Define if the post order will be ascending or descending.

Number of Post: Drag the bar to select the number of posts you want to show. You can also manually set the number

Category Name

Enable/disable Title: Use the toggle button to enable/disable course title. Once you enable the course title you will find the following options.

Typography

To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Color: Choose a color for your title text from the color picker.

Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Course Count

Enable/disable: Use the toggle button to enable/disable course count. Once you enable the course title you will find the following options.

Typography

To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Color: Choose a color for your title text from the color picker.

Category Button

Disable Button: Use the toggle button to enable/disable the category button. Once you enable the category button, you will see the following settings.

Typography

To change the typography of the text turn on this function and you’ll have the followings:

  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg.
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
    • Color: Choose a color for your title text from the color picker.
    • Hover Color: If you want to set a specific hover color for the course title you can choose a color from the color picker.

Button Color: Choose a color for the button color for the category listing.

Button hover Color: Set a separate color for the button while in hover state.

Button Background: Define a background color from the color palette.

Button Hover Background: You can also set a separate color for the background of your user’s hover state.

Border

Set a border around your search block. Predefined borders include Solid, Dotted, Dashed and Double. There is also a clear button if you don’t want to apply a border.

Border Color: Choose a specific color from the color picker for your border.

Border Width:  You can also set the radius of the search block using the Radius function. The scale can be calibrated between 1 to 100. You can apply the same value to all the corners by choosing the global option or also using the Custom option will let you set a different value for each corner. It’s a responsive feature that means you can apply different values for different device types.

Advanced

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is where you define the name.

Was this helpful?