Tutor LMS

Single Course Elements

This documentation is about the smaller elements available in the Tutor LMS tab under the Single Course tab.

Title

You can use the Oxygen Builder text field editor to change the typography of the title

Rating

Use this tab to change the appearance of the course rating: 

  • Stars size: change the size of the star in the rating system. The units are in px (pixels)
  • Stars Color: use this RGBA color picker to select the color of the stars in the rating system. 

Author

Use this tab to change the attributes for the Course Author field

  • Image
    • Height: Select image height. The units are in px (pixels)
    • Width: Select image width. The units are in px (pixels)
    • Font Size: Change the font size of the icon text
    • Line Height: Use this to tweak the text position
  • Label: You can use the Oxygen Builder text field editor to change the typography of the Author Label. 
  • Name: You can use the Oxygen Builder text field editor to change the typography of the Author Name.

Level

Use this tab to edit the Course Level field

  • Label: You can use the Oxygen Builder text field editor to change the typography of the Level Label.
  • Value: You can use the Oxygen Builder text field editor to change the typography of the Level value text.

Share

This tab changes the visuals of the social share icons

  • Layout: Select between left and right align
  • Label: You can use the Oxygen Builder text field editor to change the typography of the “Share” label.
  • Original Icon: You can use the Oxygen Builder text field editor to change the typography of the Share Icons without hover.
  • Hovered Icon: You can use the Oxygen Builder text field editor to change the typography of the Share Icons with hover.

Categories

Typography: You can use the Oxygen Builder text field editor to change the typography of the categories page

Duration

Typography: You can use the Oxygen Builder text field editor to change the typography of the Duration value.

Total Enrolled

Typography: You can use the Oxygen Builder text field editor to change the typography of the Duration value.

Last Update

Use this tab to change the attributes for the Last Updated value

  • Image
    • Height: Select image height. The units are in px (pixels)
    • Width: Select image width. The units are in px (pixels)
    • Font Size: Change the font size of the icon text
    • Line Height: Use this to tweak the text position
  • Label: You can use the Oxygen Builder text field editor to change the typography of the Last Updated. 
  • Name: You can use the Oxygen Builder text field editor to change the typography of the Last Updated.

About

Use this tab to edit the About section of the course.

Heading: You can use the Oxygen Builder text field editor to change the typography of the About section’s heading.

Paragraph: You can use the Oxygen Builder text field editor to change the typography of the About section’s paragraph.

Description

Use this tab to edit the Description section of the course. 

Heading: You can use the Oxygen Builder text field editor to change the typography of the Description section’s heading.

Paragraph: You can use the Oxygen Builder text field editor to change the typography of the About section’s paragraph.

Curriculum

This tab contains all the customization options for the header section: 

  • Header Title: You can use the Oxygen Builder text field editor to change the typography of the curriculum title.
  • Header Info: You can use the Oxygen Builder text field editor to change the typography of the curriculum header info.
  • Topic Title: You can use the Oxygen Builder text field editor to change the typography of the topic title.
  • Lesson Icon: 
    • Size: Select the size of the icon
    • Color: Select the color of the icon
  • Lesson Title: You can use the Oxygen Builder text field editor to change the typography of the lesson title.
  • Spacing: Select the padding to be applied around the curriculum section

Benefits

Use this tab to change the benefits section: 

  • Title: You can use the Oxygen Builder text field editor to change the typography of the Benefits section’s title.
  • Icon: 
    • Size: Select the size of the icon
    • Color: Select the color of the icon
  • Typography: You can use the Oxygen Builder text field editor to change the typography of the About section’s paragraph.
  • Spacing: Select the padding to be applied around the benefits section

Requirements

Title: You can use the Oxygen Builder text field editor to change the typography of the requirements title

Content: 

  • Icon
    • Color: Select the color of the icon
    • Size:  Select the size of the icon
  • Typography: You can use the Oxygen Builder text field editor to change the typography of the requirements text
  • Spacing
  • Items Padding: Select the padding applied around the section
  • Line Height: Select the vertical spacing between lines. 

Target Audience

Title: You can use the Oxygen Builder text field editor to change the typography of the target audience text

Icon: 

  • Color: Select the color of the rating stars
  • Size: Select the size of the rating stars

Typography: You can use the Oxygen Builder text field editor to change the typography of the target audience text

Spacing:

  • Items Padding: Select the padding applied around the section
  • Line Height: Select the vertical spacing between lines.

Materials

Title: You can use the Oxygen Builder text field editor to change the typography of the materials title

Icon: 

  • Color: Select the color of the rating stars
  • Size: Select the size of the rating stars

Typography: You can use the Oxygen Builder text field editor to change the typography of the materials text

Spacing:

  • Items Padding: Select the padding applied around the section
  • Line Height: Select the vertical spacing between lines. 

Thumbnail

Original Thumbnails: Change the look of the original video thumbnail.

  • Opacity: Change the opacity of the thumbnail
  • Background Color: Change the color of the thumbnail background
  • Border Color: Change the color of the thumbnail border
  • Border Width: Change the border width
  • Margin: Add a margin around the video thumbnail
  • Box Shadow: Toggle between inset and outset shadow
  • Shadow Color: Use this RGBA color picker to choose a shadow color
  • Shadow Horizontal Offset: Select the horizontal position of the shadow
  • Shadow Vertical Offset: Select the vertical position of the shadow
  • Shadow Blur: Select a blur intensity effect. 
  • Shadow Spread: Select how far the shadow spreads

Hovered Thumbnails: Change the look of the video thumbnail on mouse-hover.  

  • Opacity: Change the opacity of the thumbnail.
  • Background Color: Change the color of the thumbnail background.
  • Border Color: Change the color of the thumbnail border.
  • Border Width: Change the border width.
  • Margin: Add a margin around the video thumbnail.
  • Box Shadow: Toggle between inset and outset shadow.
  • Shadow Color: Use this RGBA color picker to choose a shadow color.
  • Shadow Horizontal Offset: Select the horizontal position of the shadow.
  • Shadow Vertical Offset: Select the vertical position of the shadow.
  • Shadow Blur: Select a blur intensity effect. 
  • Shadow Spread: Select how far the shadow spreads.

Enrolment Box

Price: You can use the Oxygen Builder text field editor to change the typography of the course price

Add to Cart Button/Enroll Button

Button Paddings: Add a padding around the button of the Add to Cart Button. This button may also become “Enroll Now” if the course is set to free.

Background Color: Choose the background color of the button

Background Hover Color: Choose the background color of the button when mouse hovers over it 

Typography: You can use the Oxygen Builder text field editor to change the typography of the button text’s typography

Borders: Use this tab to change the borders of the button. 

  • Currently Editing Border: Choose which border you want to edit
  • Border Color: Select the border color
  • Border Width: Select the width of the button’s border
  • Border Style: Pick a border Style
  • Border Radius: Pick a radius for the curved corners of the button. Use this to create a rounded square effect on the button. You can also click on “edit individual radii” to change each radius separately. 

Hover Borders: Use this tab to change the borders of the button on hover. 

  • Currently Editing Border: Choose which border you want to edit
  • Border Color: Select the border color
  • Border Width: Select the width of the button’s border
  • Border Style: Pick a border Style
  • Border Radius: Pick a radius for the curved corners of the button. Use this to create a rounded square effect on the button. You can also click on “edit individual radii” to change each radius separately. 

Shadow: Use this tab to change the appearance of the button’s shadow effect

  • Inset: Check this if you want an inset border effect. 
  • Shadow Color: Pick the rgba color of the shadow color.
  • Shadow Horizontal Offset: Use this field to change the horizontal position of the shadow.
  • Shadow Vertical Offset: Use this field to change the vertical position of the shadow.
  • Shadow Blur: Pick the strength of the blur effect. 
  • Shadow Spread: Pick how much the shadow will spread. 

Hover Shadow: Use this tab to change the appearance of the button’s shadow on hover

  • Inset: Check this if you want an inset border effect. 
  • Shadow Color: Pick the rgba color of the shadow color.
  • Shadow Horizontal Offset: Use this field to change the horizontal position of the shadow.
  • Shadow Vertical Offset: Use this field to change the vertical position of the shadow.
  • Shadow Blur: Pick the strength of the blur effect. 
  • Shadow Spread: Pick how much the shadow will spread.

Instructors

Title: You can use the Oxygen Builder text field editor to change the typography of the instructor name

Author: 

  • Image
    • Height: Select image height. The units are in px (pixels)
    • Width: Select image width. The units are in px (pixels)
    • Font Size: Change the font size of the icon text
    • Line Height: Use this to tweak the text position

Bottom Info:

  • Rating:
    • Stars size: change the size of the star in the rating system. The units are in px (pixels)
    • Stars Color: use this RGBA color picker to select the color of the stars in the rating system. 
    • Label: You can use the Oxygen Builder text field editor to change the typography of the instructor label.
    • Value: You can use the Oxygen Builder text field editor to change the typography of the instructor name value.

Reviews

Title: You can use the Oxygen Builder text field editor to change the typography of the review title.

Review Avg: 

  • Rating Text: You can use the Oxygen Builder text field editor to change the typography of the review’s rating number (4 out of 5 star)
  • Rating Star
    • Color: Select the color of the rating stars
    • Size: Select the size of the rating stars
  • Total Count: You can use the Oxygen Builder text field editor to change the typography of the total review count
  • Right Rating Bar
    • Color: Choose the background color of the rating bar
    • Fill Color: Choose the foreground fill color of the rating bar
    • Height: Choose the height of the rating bar in pixels.
    • Padding: Choose the padding between the bars and other elements
    • Margin: Choose the margin for the rating bar
  • Right Rating Bar
    • Color: Choose the background color of the rating bar
    • Fill Color: Choose the foreground fill color of the rating bar
    • Height: Choose the height of the rating bar in pixels.
    • Padding: Choose the padding between the bars and other elements
    • Margin: Choose the margin for the rating bar
  • Right Rating Text: You can use the Oxygen Builder text field editor to change the typography of the right rating text.

Review List:

  • Image
    • Height: Select image height. The units are in px (pixels)
    • Width: Select image width. The units are in px (pixels)
    • Font Size: Change the font size of the icon text
    • Line Height: Use this to tweak the text position
    • Name: You can use the Oxygen Builder text field editor to change the typography of the reviewer.
    • Time: You can use the Oxygen Builder text field editor to change the typography of the review’s time.
  • Stars
    • Color: Select the color of the rating stars
    • Size: Select the size of the rating stars
  • Content: You can use the Oxygen Builder text field editor to change the typography of the review content.
  • Spacing
  • Padding: select how much padding you want around each of the review entries

Was this helpful?

Yes No 4