Building a lessons page with Bricks Builder

This is Erik with RankByDesign. In this lesson I’ll show you how to build a clean, repeatable lessons page layout in Bricks Builder — the kind of layout you can use to build your own WordPress course platform or lightweight LMS.

Important: I’m not affiliated with Bricks Builder in any way. This is simply a free tutorial showing how I’m using Bricks Builder to create a WordPress-based LMS style course platform.

Recommended: Work on a staging site and perform a full site backup before making changes.

Why This Lesson Page Matters (WordPress LMS Layout)

If you’re building a WordPress course website, one of the most important things you can create early is a consistent lesson layout. A solid lesson page design saves time, improves student experience, and gives your course a professional “LMS-style” feel — even if you’re not using a heavy LMS plugin.

In Bricks Builder, you can create a lesson page that’s clean, fast, and easy to manage — which is ideal for a DIY course platform built on WordPress.

What We’re Building in This Lesson

The goal is to build a repeatable WordPress LMS lesson page using a simple structure made of three core sections:

• Lesson Video Section (your training video content)
• Lesson Description Section (lesson intro, notes, and key takeaways)
• Resources + Downloads Section (PDFs, links, worksheets, and navigation)

This exact structure works for:

• Video-based courses
• Membership sites
• Training libraries
• Internal company training portals
• WordPress LMS websites that need a simple layout

Using Automatic CSS (Optional, But Speeds Up LMS Design)

In this lesson I’m also using Automatic CSS to speed up the design and layout process in Bricks Builder. Automatic CSS gives you prebuilt utility classes for width, spacing, background colors, and rounded corners — which makes it easier to build a professional course layout quickly.

Tip: You can still build the same lesson layout without Automatic CSS. The steps and structure remain the same.

Step-by-Step: Build the Lesson Page Layout for a WordPress Course

Step 1: Create your Lesson Title and Video Section

Start with an H1 heading for the lesson title. This improves clarity for students and gives the page a better SEO foundation.

Then place the lesson video underneath. Your goal is to create a clean “lesson header” section that looks like a true LMS lesson page.

Select the container holding the heading + video and apply your design settings. Example styling using Automatic CSS:

• Width: Large (keeps the lesson focused and readable)
• Background: ultra-light background (helps the lesson stand out)
• Padding: medium padding (adds breathing room)
• Rounded corners: large rounded edges (modern course style)

Step 2: Duplicate sections to create a repeatable LMS-style layout

Instead of rebuilding each section, duplicate the container. This helps you build lesson pages quickly and keeps the layout consistent across your entire WordPress course.

For your second section:

• Remove the video element
• Change the heading from H1 to H2
• Rename the heading to About This Lesson

Duplicate once more to create your third lesson section:

• Rename it to Resources & Downloads

Step 3: Add the lesson description and notes area

Under About This Lesson, add a Rich Text element. This becomes your lesson notes area — where you can include:

• lesson summary
• key steps
• important notes
• links to tools mentioned in the video

If spacing feels too loose, use “Move Up” to tighten the gap between the heading and the description for a more professional LMS look.

Step 4: Build a resource section with a two-column grid

The resources section is a major part of any WordPress LMS or course platform because students expect quick access to downloads and lesson links.

Inside your Resources & Downloads section:

• Add a new container
• Convert it into a two-column layout using a grid
• Add blocks or containers inside each column

This is perfect for organizing course assets like:

• Downloadable PDFs
• Lesson templates
• Reference links
• Tool links
• Homework or optional practice files

You can also duplicate blocks inside the grid so your lesson resources grow cleanly without breaking design consistency.

Step 5: Add a “Next Lesson” button (Course Navigation)

To make your WordPress course feel like a real LMS, add a navigation button at the bottom of the lesson. This helps guide students forward and improves course completion rates.

Add a button and label it something like:

• Next Lesson
• Continue Course
• Continue to Lesson 2

Tip: You can drag the button outside the grid container so it sits below your resources list and stands out visually.

What’s Next?

In the next lesson, I’ll show you how to use Bricks templates and introduce custom fields, so you can generate new course lessons faster and build a scalable WordPress LMS without rebuilding layouts every time.