fbpx

Course Content Tabs

Tutor LMS – Course Content Tab Element

Overview

The Course Content Tab element in Tutor LMS provides structured navigation for course-related details, allowing users to access various sections in a tabbed format. It includes four main tabs:

  1. Course Information – Displays course details, curriculum, lesson list with links, and lesson durations.
  2. Reviews – Shows student reviews, review dates, and the average course rating.
  3. Q&A – Allows students to ask and view questions related to the course.
  4. Announcements – Displays upcoming course announcements and important updates.

This element is fully customizable, with styling options for all components.

Features

  • Provides a tabbed interface for easy navigation.
  • Displays lesson lists with links and duration.
  • Shows student reviews with timestamps and average ratings.
  • Allows users to ask questions related to the course.
  • Displays important course announcements.
  • Offers full styling customization for tabs, content, typography, colors, and spacing.

Available Controls

Content Controls

  1. Enable/Disable Tabs – Choose which tabs to display.
  2. Custom Tab Labels – Rename tabs (Course Info, Reviews, Q&A, Announcements).
  3. Show Lesson Links – Enable clickable lesson titles.
  4. Display Lesson Duration – Show estimated time for each lesson.
  5. Enable Average Rating – Show total rating count in the Reviews tab.
  6. Enable Q&A Submission – Allow students to ask questions.
  7. Enable Announcement Section – Show upcoming announcements.

Style Controls

Tab Styling
  1. Tab Background Color – Customize the background of the tabs.
  2. Tab Border & Shadow – Modify the border and shadow of tabs.
  3. Active Tab Indicator – Customize the active tab color and underline style.
Content Styling
  1. Lesson Title Style – Customize font, color, and size of lesson titles.
  2. Review Text & Date Style – Modify review text and timestamp appearance.
  3. Q&A Box Styling – Change input field styles for submitting questions.
  4. Announcement Layout – Adjust background, padding, and text styling.
  5. Spacing & Alignment – Control margins and paddings for better layout.

Dynamic Behavior

  • Course Information Tab: Fetches and displays lesson lists with links and time duration dynamically.
  • Reviews Tab: Shows existing reviews, ratings, and timestamps of student feedback.
  • Q&A Tab: Allows enrolled students to ask questions and view answers from the instructor.
  • Announcements Tab: Displays upcoming course updates or important messages.

Use Case

  • Perfect for Course Detail Pages to provide structured and interactive navigation.
  • Enhances user experience by organizing course information efficiently.