Course Layouts

Course Layouts

BuddyX Pro transforms LearnDash courses with modern, customizable layouts. Create stunning course pages with cover images, custom features, instructor profiles, and flexible content areas.

What You Can Do

Customize every aspect of your course appearance:

  • Add Cover Images – Beautiful header backgrounds for courses and groups
  • Highlight Features – Icon-based feature lists with custom text
  • Showcase Instructors – Multiple instructor profiles with avatars
  • Display Progress – Show enrollment counts and completion status
  • Customize Cards – Control course card appearance in grids
  • Style Headers – Rich course headers with breadcrumbs
  • Control Layouts – Grid, list, or custom column layouts
  • Show Participants – Display enrolled students with avatars

Single Course Page Layout

BuddyX Pro completely redesigns the single course page for better visual appeal and information hierarchy.

Course Header Components

The enhanced course header includes:

ElementDescriptionCustomizable
Cover ImageFull-width background imageYes – per course
BreadcrumbsNavigation path to courseYes – global toggle
Course TitleLarge, prominent headingAutomatic
Short DescriptionBrief course overviewYes – per course
Enrollment CountNumber of enrolled studentsAutomatic
Instructor ProfilesAvatars and names with linksAutomatic
Last Updated DateMost recent modificationAutomatic

Header Layout Structure

┌─────────────────────────────────────────────┐
│                                             │
│            [Cover Image Background]          │
│                                             │
│  Breadcrumbs > Courses > Web Development    │
│                                             │
│  Web Development Fundamentals               │ ← Title
│                                             │
│  Learn HTML, CSS, and JavaScript from       │ ← Short Description
│  scratch to build modern websites           │
│                                             │
│  👥 247 students                            │ ← Enrollment
│                                             │
│  [Avatar] [Avatar] John Doe, Jane Smith     │ ← Instructors
│                                             │
│  🏆 Last updated January 25, 2026           │ ← Updated Date
│                                             │
└─────────────────────────────────────────────┘

Adding Cover Images

Cover images create visual impact and help students identify courses.

For Courses

  1. Edit Your Course
  2. Find Cover Image Meta Box
  3. Upload Image
  4. Save Course

For LearnDash Groups

  1. Edit Your Group
  2. Find Cover Image Meta Box
  3. Upload Image
  4. Save Group

Cover Image Specifications

PropertyRecommendationNotes
Dimensions1920×600pxMinimum width 1200px
Aspect Ratio3.2:1Wider than standard hero
File FormatJPG for photos, PNG for graphicsWebP for best performance
File SizeUnder 200KBCompress before upload
Safe AreaCenter 60%Sides may crop on mobile

Image Tips:

  • Use high-quality, relevant images
  • Avoid text in images (use overlays instead)
  • Ensure good contrast with white text
  • Test on mobile devices
  • Consider dark overlay for readability

Removing Cover Images

  1. Edit the course/group
  2. In the cover image meta box
  3. Click Remove listing image
  4. Update course/group

Effect:

  • Header still displays but with solid color background
  • All other header elements remain

Custom Course Features

Highlight what students receive or learn with icon-based feature lists.

Enabling Custom Features

  1. Edit Course
  2. Find Custom Course Features Meta Box
  3. Enable Features

Adding Features

  1. Select Icon
  2. Enter Feature Text
  3. Add More Features
  4. Reorder Features
  5. Delete Features
  6. Save Course

Feature Display Location

Custom features appear on single course page:

  • Below course content
  • Above lesson list
  • In a styled grid layout
  • Icons on the left, text on right

Layout Example:

What You'll Learn
┌──────────────────────────────────┐
│ 📹 12 hours of video content     │
│ 📄 15 downloadable resources     │
│ 🏆 Certificate of completion     │
│ ♾️  Lifetime access              │
│ 📱 Access on mobile and desktop  │
└──────────────────────────────────┘

Feature Ideas by Course Type

Programming Courses:

  • 💻 50+ coding exercises
  • 🎓 Build 5 real-world projects
  • 📚 Downloadable code snippets
  • ⏰ 20 hours of content
  • 🏆 Certificate upon completion

Business Courses:

  • 📊 15 business templates
  • 💼 Case studies from Fortune 500
  • 🎯 Actionable frameworks
  • 👥 Lifetime community access
  • 📈 Results-focused training

Creative Courses:

  • 🎨 Project-based learning
  • 📷 20+ design templates
  • 🖼️ Portfolio examples included
  • 🎬 Step-by-step video tutorials
  • 💾 Software setup guides

Language Courses:

  • 🗣️ Conversational practice
  • 📖 Grammar cheat sheets
  • 🎧 Audio lessons
  • 📝 Quizzes and exercises
  • 🌍 Cultural context lessons

Instructor Profiles

BuddyX Pro automatically displays instructor information on course pages.

How Instructors Are Detected

The theme pulls instructors from three sources:

  1. Course Author (WordPress user who created course)
  2. LearnDash Instructor IDs (course meta: ldinstructor_ids)
  3. Instructor Role Plugin (if using Instructor Role for LearnDash)

All three are combined and de-duplicated automatically.

Instructor Display

In Course Header:

  • Up to 3 instructor avatars (40×40px)
  • All instructor names as clickable links
  • Links go to instructor archive page

Instructor Archive Page: Shows when clicking instructor name:

  • URL: yoursite.com/author/username/?post_type=sfwd-courses
  • Instructor bio and avatar
  • List of their courses
  • Social links (if configured)

Setting Up Instructor Profiles

  1. Edit User Profile
  2. Complete Profile Information
  3. Add Social Links (Optional)
  4. Assign to Courses

Multiple Instructors

To Add Multiple Instructors:

Method 1: LearnDash Meta Box

  1. Edit course
  2. Find LearnDash Instructor IDs meta box
  3. Enter user IDs separated by commas
  4. Update course

Method 2: Instructor Role Plugin

  1. Install Instructor Role for LearnDash
  2. Create instructor users
  3. Assign instructors to courses in plugin settings

Display:

  • All instructor avatars appear (up to 3 shown)
  • All names listed with commas
  • Example: “John Doe, Jane Smith, Bob Johnson”

Course Archive Layouts

Control how courses appear on your course listing page.

Grid Layout Options

Configure in Appearance → Customize → LearnDash → Course Columns

List View (1 Column)

Best For:

  • Courses with long descriptions
  • Detailed course information
  • Professional/corporate training
  • When you have fewer courses (under 12)

What Shows:

  • Large course thumbnail (left)
  • Full course title
  • Complete short description
  • Instructor info
  • Price/enrollment button
  • Categories and tags

Use Case: Corporate training portal with detailed course requirements.

Two Columns

Best For:

  • Balanced layout
  • Medium-sized course catalogs (12-30 courses)
  • Academic institutions
  • Professional certifications

What Shows:

  • Medium course thumbnail
  • Course title
  • Truncated description (2-3 lines)
  • Instructor name
  • Price/button

Use Case: University department offering 20 courses across semesters.

Three Columns

Best For:

  • Compact display
  • Larger course catalogs (30-60 courses)
  • Category-based browsing
  • Visual learners

What Shows:

  • Smaller thumbnail
  • Course title
  • Brief description (1-2 lines)
  • Price/button
  • Minimal instructor info

Use Case: Online learning marketplace with varied course topics.

Four Columns (Default)

Best For:

  • Maximum courses visible
  • Very large catalogs (60+ courses)
  • Image-focused browsing
  • Modern, Pinterest-style layout

What Shows:

  • Small thumbnail
  • Course title only
  • Price badge
  • Hover for more info

Use Case: Massive open online course (MOOC) platform with hundreds of courses.

Responsive Grid Behavior

BuddyX Pro automatically adjusts columns based on device:

Screen Size4 Column3 Column2 Column1 Column
Desktop (>1200px)4 cols3 cols2 cols1 col
Laptop (992-1200px)3 cols3 cols2 cols1 col
Tablet (768-992px)2 cols2 cols2 cols1 col
Mobile (<768px)1 col1 col1 col1 col

Result: Your courses always look great regardless of device.

Course Card Styling

Each course card in the grid includes standardized elements.

Standard Card Elements

┌──────────────────────────┐
│                          │
│   [Course Thumbnail]     │
│                          │
├──────────────────────────┤
│ Web Development          │ ← Title
│                          │
│ Learn HTML, CSS, and...  │ ← Description
│                          │
│ 👤 John Doe              │ ← Instructor
│                          │
│ 👥 247 Students          │ ← Enrollment
│                          │
│ [Enroll Now - $49]       │ ← Price/Button
└──────────────────────────┘

Customizing Card Content

Via LearnDash Course Grid Plugin:

  1. Install LearnDash Course Grid (free on WordPress.org)
  2. Go to LearnDash → Course Grid
  3. Configure card elements:

Via LearnDash Settings:

  1. Go to LearnDash LMS → Settings → General
  2. Find Price Type Display
  3. Choose: Free, Closed, Open, Buy Now
  4. This affects price badges on cards

Course Thumbnail Images

Setting Featured Images:

  1. Edit course
  2. Find Featured Image in right sidebar
  3. Click Set featured image
  4. Select or upload image
  5. Update course

Recommended Specifications:

  • Dimensions: 800×600px (4:3 ratio)
  • File size: Under 100KB
  • Format: JPG or WebP
  • Consistent style across all courses

Lesson and Topic Layouts

Control the appearance of lessons and topics within courses.

Lesson Sidebar

Default: Inherits from global sidebar setting

Override Per Lesson: Lessons typically use LearnDash’s built-in layout, but you can:

  1. Use Focus Mode (recommended)
  2. Use Standard Mode with sidebar

Lesson Progress Display

Location: Top of lesson content

Shows:

  • Lesson number in course
  • Percentage complete
  • Previous/Next lesson buttons
  • Mark complete button

Styling: BuddyX Pro applies consistent progress bar styling matching theme colors.

Topic Display

Topics are sub-lessons within a lesson.

Default Display:

  • Nested under parent lesson
  • Indented in course content list
  • Same layout options as lessons
  • Numbered sequentially

Best Practice: Keep topics focused on single concepts for better learning flow.

LearnDash Groups Layout

Groups bundle multiple courses together (like “bundles” or “memberships”).

Group Page Components

Similar to course pages with:

  • Group cover image
  • Group title and description
  • Group leaders (instructors)
  • Member count
  • List of included courses
  • Enrollment button

Group vs Course Differences

ElementCoursesGroups
Cover Metacourseimage_idgroupimage_id
InstructorsMultiple sourcesGroup leaders
EnrollmentStudentsUsers/Members
ContentLessons/topicsCourses
ProgressLesson completionCourse completion

Progress Tracking Display

BuddyX Pro enhances how progress is displayed throughout the learning experience.

Course Progress Bar

Location: Student dashboard, course cards

Shows:

  • Percentage complete (0-100%)
  • Colored progress bar
  • “Not Started,” “In Progress,” or “Completed” badge

Styling:

  • Theme primary color for progress
  • Secondary color for incomplete
  • Success green for completed

Lesson Completion

Location: Within course content

Shows:

  • Checkmarks for completed lessons
  • Play icons for in-progress
  • Lock icons for unavailable
  • Estimated time per lesson

Quiz Results

Location: After quiz completion

Shows:

  • Score percentage
  • Pass/fail status
  • Correct/incorrect answers (if enabled)
  • Certificate link (if passed and certificates enabled)

Certificate Integration

Display certificates for completed courses.

Enabling Certificates

  1. Create Certificate Template
  2. Assign to Course
  3. Set Criteria

Certificate Display

Where Certificates Appear:

  • Student dashboard (after course completion)
  • Course page (if completed)
  • User profile (via shortcode)

BuddyX Pro Enhancements:

  • Download button with PDF icon
  • Print button
  • Share certificate option (if using sharing plugin)

Quiz Styling

BuddyX Pro applies modern styling to LearnDash quizzes.

Quiz Elements Styled

  • Question Cards: Clean, card-based design
  • Answer Choices: Clear radio/checkbox buttons
  • Submit Button: Theme-styled primary button
  • Results Screen: Formatted score display
  • Timer: Prominent countdown (if enabled)
  • Progress: Question X of Y indicator

Quiz Types Supported

All LearnDash quiz types are styled:

  • Single choice
  • Multiple choice
  • Free text
  • Fill in the blank
  • Essay
  • Sorting choice
  • Matrix sorting

Focus Mode Compatibility

BuddyX Pro fully supports and enhances LearnDash Focus Mode.

Focus Mode Features

What BuddyX Pro Adds:

  1. Dark Mode Toggle
  2. Improved Sidebar
  3. Video Player Integration
  4. Reading Optimization

Enabling Focus Mode

Globally:

  1. Go to LearnDash LMS → Settings → Courses
  2. Find Course Navigation
  3. Select Focus Mode
  4. Save settings

Per Course:

  1. Edit course
  2. Course Settings meta box
  3. Course Navigation → Focus Mode
  4. Update course

Dark Mode in Focus Mode

How It Works:

  1. Student enters Focus Mode
  2. Clicks moon icon (top right)
  3. Dark theme activates
  4. Preference saved in browser cookie
  5. Persists across lessons

Customizing Dark Mode: Dark mode colors inherit from Customizer → Skin → Dark Mode settings.

Common Questions

How do I change course card hover effects?

BuddyX Pro applies hover effects automatically:

  • Slight scale increase
  • Shadow enhancement
  • Smooth transition

To customize, use CSS in child theme:

.ld_course_grid .thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Can I hide the enrollment count?

Yes, via LearnDash Course Grid plugin:

  1. Install plugin
  2. Go to LearnDash → Course Grid
  3. Uncheck Show Enrolled Count
  4. Save settings

How do I add course prerequisites to the layout?

Prerequisites are shown automatically if configured:

  1. Edit course
  2. Course Settings → Prerequisites
  3. Select required courses
  4. Prerequisites display on course page

Can I customize the “Enroll” button text?

Yes:

  1. Go to LearnDash LMS → Settings → General
  2. Find Custom Button Labels
  3. Change “Take This Course” text
  4. Save settings

How do I show course duration?

Install LearnDash Course Grid plugin:

  1. Enables duration field in course settings
  2. Enter duration (e.g., “8 weeks”)
  3. Duration displays on course cards

Recommended Configurations by Course Type

Video-Heavy Courses

Layout Settings:

  • Course Columns: 3-4 columns
  • Single Course: No sidebar
  • Lessons: Focus Mode enabled
  • Progress: Visible on all pages

Why: Maximizes video player space, minimal distractions.

Text-Based Courses

Layout Settings:

  • Course Columns: 2 columns
  • Single Course: Right sidebar
  • Lessons: Standard mode with sidebar
  • Custom Features: Emphasize reading materials

Why: Sidebars provide navigation, two-column provides readable line length.

Quiz-Focused Certification

Layout Settings:

  • Course Columns: List view
  • Single Course: Both sidebars
  • Lessons: No sidebar
  • Certificate: Prominently displayed

Why: Detailed course info, quizzes need focus, certificates are the goal.

Community Learning

Layout Settings:

  • Course Columns: 3 columns
  • Single Course: Right sidebar (BuddyPress widgets)
  • Lessons: Focus Mode
  • Enable: Course participants display

Why: Community engagement via sidebars, focused learning in lessons.

Related Settings

Need Help?

Last updated: January 31, 2026