How to Add & Customize Course Section
Display your courses on the website with grid, carousel, or list styles and customizable filtering
How to Add & Customize Course Section
The Course Section displays your published courses on the website. Students can browse, filter, and click through to enroll.
Adding a Course Section
- Open the Website Editor for any page (see How to Edit Pages)
- Click + → Course Section
- Configure the section:
| Setting | Description | Options |
|---|---|---|
| Title | Section heading | e.g., "Our Courses", "Featured Programs" |
| Display Style | How courses are shown | Grid, Carousel, or List |
| Columns | Per row (Grid only) | 2, 3, or 4 |
| Show Price | Display course price | Yes/No |
| Show Instructor | Show teacher name/photo | Yes/No |
| Filter by Tag | Only show tagged courses | Select tags |
| Max Courses | Limit display count | e.g., 6, 9, 12 |
| Sort Order | Display order | Newest, Popular, Price, Custom |
- Click Save
📸 Screenshot: Course section configuration panel
Display Styles
| Style | Layout | Best For |
|---|---|---|
| Grid | Cards in rows and columns | Lots of courses, traditional look |
| Carousel | Horizontal scrollable slider | Featured/limited courses, interactive |
| List | Vertical list with detailed descriptions | Few courses with detailed info |
What Each Course Card Shows
- Thumbnail — Course cover image
- Title — Course name
- Description — Short excerpt
- Price — With discount if set (original price crossed out)
- Instructor — Teacher name and photo
- Enrollment Count — How many students enrolled
- Tags — Course tags as badges
- CTA Button — "View Course" or "Enroll Now"
Using Tags for Featured Sections
You can create multiple course sections on one page, each filtered by different tags:
Home Page:
├── Course Section: "Featured Programs" (tag: "featured", max: 3, carousel)
├── Course Section: "Admission Test Prep" (tag: "admission", grid, 3 columns)
└── Course Section: "All Courses" (no filter, grid, 4 columns)
This lets you curate what appears on your website while keeping all courses in one system.
Related Articles
- How to Edit Webpage Sections — Visual editor guide
- How to Create a Course — Course creation
- How to Create Tags — Tag courses for filtering
- How to Enable the Website — Website setup
course sectionwebsitedisplaystylesgridcarousellist
More in Website Builder
How to Enable the Website
Activate your branded student-facing website with custom theme, colors, and instant subdomain
How to Edit Webpage Sections
Use the drag-and-drop visual editor to add, customize, and reorder sections on your website pages
How to Create a Page
Create custom pages like About, Contact, FAQ, Policies, and more with the visual component editor
How to Add a Custom Domain
Connect your own domain (e.g., academy.com) to Course37 with SSL and DNS configuration guide