How to Build an Online Course Platform Landing Page with Canvas
Most online course landing pages underperform not because the offer is weak, but because the page structure fails to guide visitors from curiosity to enrolment. If you are building an edtech product in 2025, your landing page needs more than a headline and a button — it needs a conversion architecture that works at every scroll depth.
Planning the Right Page Structure for an Online Course
Before writing a single line of HTML, map out the sections your visitors need to see. A high-converting online course landing page follows a predictable persuasion sequence. Prospective students arrive with a specific problem — they want to learn a skill, advance a career, or earn a certification. Every section should answer a question they are already asking.
A practical section order for a course platform page looks like this:
- Hero — headline, subheadline, primary CTA, optional course preview image or video thumbnail
- Social proof bar — student count, ratings, logos of featured companies
- What you will learn — four to six key outcomes in an icon grid
- Curriculum — module list with lesson counts and durations
- Instructor bio — credentials, photo, authority signals
- Pricing — one or two tiers, clearly differentiated
- FAQ — address objections that kill conversions
- Final CTA — repeat the enrolment call to action
This structure maps directly onto Canvas’s section-based layout system and pairs well with the advice in the post on free trial landing page copy and design that reduces friction.
Setting Up Your Canvas Page File
Canvas is built on Bootstrap 5 — do not load Bootstrap from a CDN separately, as it is already bundled. Your page file needs only two CSS references and two JS files.
<!-- Canvas CSS -->
<link rel="stylesheet" href="css/font-icons.css" />
<link rel="stylesheet" href="style.css" />
<!-- Canvas JS (before closing body tag) -->
<script src="js/plugins.min.js"></script>
<script src="js/functions.bundle.js"></script>Set your brand colours and typography by overriding Canvas CSS variables in a <style> block in the <head>. For an edtech brand with a deep blue primary colour:
:root {
--cnvs-themecolor: #1a3e6f;
--cnvs-themecolor-rgb: 26, 62, 111;
--cnvs-primary-font: 'Inter', sans-serif;
--cnvs-secondary-font: 'Merriweather', serif;
--cnvs-logo-height: 48px;
--cnvs-logo-height-sticky: 36px;
}These six variables handle the vast majority of global visual changes. If you need to go further with SASS-level customisation, the post on customising Bootstrap 5 with SASS covers that workflow in detail.
Building the Hero Section
The hero section carries the heaviest conversion burden on any edtech website design. It needs a strong outcome-focused headline, a concise subheadline, a primary enrolment CTA, and a visual that signals the learning experience. Canvas’s section and row utilities handle the layout; you write the copy and drop in your image.
<section id="content">
<div class="content-wrap pt-0">
<!-- Hero -->
<div class="section py-6" style="background-color: var(--cnvs-themecolor);">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6 text-white">
<span class="badge bg-white text-dark mb-3 fw-semibold">New for 2025</span>
<h1 class="display-5 fw-bold mb-3">Master UX Design in 12 Weeks</h1>
<p class="lead mb-4 opacity-75">
A project-based curriculum taught by industry practitioners.
Build a portfolio. Land interviews. No prior experience needed.
</p>
<a href="#pricing" class="button button-large button-light">
Enrol Now — $297
</a>
<p class="small mt-3 opacity-50">30-day money-back guarantee. No questions asked.</p>
</div>
<div class="col-lg-6">
<img src="images/course-preview.jpg" alt="Course preview" class="img-fluid rounded-4 shadow-lg" />
</div>
</div>
</div>
</div>
</div>
</section>Notice the use of Bootstrap 5 utility classes like align-items-center, g-5, and opacity-75 — these are all available in Canvas without any additional setup. For a broader reference on what is available, the guide to Bootstrap 5 utility classes every designer should know is worth bookmarking.
Curriculum and Outcomes Sections
The curriculum section is where prospective students decide whether the course is worth their time. Use a two-column grid: learning outcomes on one side as an icon list, and a module accordion or table on the other. Canvas includes icon fonts out of the box, so you can use them without any additional imports.
<div class="section bg-transparent py-6">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-lg-7 text-center">
<h2 class="fw-bold">What You Will Learn</h2>
<p class="text-muted">Practical skills you can apply from day one of the course.</p>
</div>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="d-flex gap-3 align-items-start">
<i class="bi bi-check-circle-fill fs-4" style="color: var(--cnvs-themecolor);"></i>
<div>
<h5 class="mb-1 fw-semibold">User Research Methods</h5>
<p class="text-muted small mb-0">Interviews, surveys, and usability testing frameworks.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="d-flex gap-3 align-items-start">
<i class="bi bi-check-circle-fill fs-4" style="color: var(--cnvs-themecolor);"></i>
<div>
<h5 class="mb-1 fw-semibold">Figma Prototyping</h5>
<p class="text-muted small mb-0">Build interactive prototypes from wireframe to high-fidelity.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="d-flex gap-3 align-items-start">
<i class="bi bi-check-circle-fill fs-4" style="color: var(--cnvs-themecolor);"></i>
<div>
<h5 class="mb-1 fw-semibold">Portfolio Projects</h5>
<p class="text-muted small mb-0">Three end-to-end case studies you own and can present.</p>
</div>
</div>
</div>
</div>
</div>
</div>For richer interactive elements like tabbed module lists or animated counters showing student numbers, Canvas shortcodes can speed this up considerably. The post on using Canvas shortcodes to build feature-rich pages faster has a full walkthrough of the available components.
Pricing and Social Proof
Pricing sections for course platforms should present one to three tiers, with clear visual hierarchy between them. Use a featured state on the recommended tier — a subtle border or background using –cnvs-themecolor achieves this without custom classes. Below the pricing grid, a row of student avatars with a star rating and total enrolment count reinforces the decision.
<div id="pricing" class="section py-6 bg-light">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-lg-6 text-center">
<h2 class="fw-bold">Simple, Transparent Pricing</h2>
</div>
</div>
<div class="row g-4 justify-content-center">
<div class="col-md-5">
<div class="card border-0 shadow-sm h-100 p-4">
<h4 class="fw-bold">Self-Paced</h4>
<p class="display-6 fw-bold my-3">$197</p>
<ul class="list-unstyled text-muted small">
<li class="mb-2">Lifetime access to all lessons</li>
<li class="mb-2">Downloadable resources</li>
<li class="mb-2">Community forum access</li>
</ul>
<a href="#" class="button button-border button-dark mt-auto">Get Started</a>
</div>
</div>
<div class="col-md-5">
<div class="card border-0 h-100 p-4" style="background-color: var(--cnvs-themecolor); color: #fff;">
<span class="badge bg-warning text-dark mb-2">Most Popular</span>
<h4 class="fw-bold">Mentored</h4>
<p class="display-6 fw-bold my-3">$297</p>
<ul class="list-unstyled opacity-75 small">
<li class="mb-2">Everything in Self-Paced</li>
<li class="mb-2">Weekly live Q&A sessions</li>
<li class="mb-2">Portfolio review and feedback</li>
</ul>
<a href="#" class="button button-light mt-auto">Enrol Now</a>
</div>
</div>
</div>
</div>
</div>Performance, Hosting, and Delivery Considerations
A static HTML course landing page built on Canvas loads extremely fast compared to WordPress or LMS-heavy alternatives. To keep it production-ready, compress all hero and instructor images to WebP format, lazy-load below-the-fold images with the loading=”lazy” attribute, and ensure your meta tags are complete for social sharing. If you are handing this page off to a client, setting correct Open Graph tags is essential — the complete guide to Open Graph tags for social media previews covers every required property.
For the Bootstrap grid layout underlying your sections, the Bootstrap Grid Calculator tool can help you verify column spans and gutters before you commit to a layout, saving time during review cycles. Similarly, if you are adjusting spacing values from pixel comps, the px to rem converter ensures your type scale stays accessible.
Frequently Asked Questions
Can I use Canvas HTML Template to build a multi-course platform, not just a single landing page?
Yes. Canvas supports multi-page fullpagelayout builds, so you can create separate pages for individual courses, a course catalogue index, an instructor profile section, and a checkout flow — all sharing the same header, footer, and CSS variable theme.
Do I need to load Bootstrap separately when building with Canvas?
No. Canvas bundles Bootstrap 5 within its compiled files. Loading Bootstrap from a CDN alongside Canvas will cause conflicts and duplicate styles. Use only Canvas’s own style.css and css/font-icons.css files, plus js/plugins.min.js and js/functions.bundle.js.
How do I change the primary brand colour across the entire Canvas course page?
Override the –cnvs-themecolor CSS variable in a :root block in your page’s <head>. Set the matching –cnvs-themecolor-rgb value for components that use alpha transparency. This single change propagates to buttons, accents, and interactive elements site-wide.
What is the best Canvas section type to use for a standalone course landing page?
Use the single_page section type, which provides a complete document structure including header, hero, content sections, and footer in one file. This is the correct type for a self-contained landing page rather than a reusable component or a multi-page demo build.
How can Canvas Builder help speed up building an online course landing page?
Canvas Builder generates section-by-section HTML layouts based on a prompt describing your page goal, audience, and content. Instead of manually scaffolding each Bootstrap grid row and Canvas component, you get production-ready markup that you can drop directly into your Canvas page file and customise from there.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.