Bricks Builder and LifterLMS: Native Elements and Course Templates

Bricks has become a popular choice for agencies and developers who want a fast, code-friendly builder, and LifterLMS supports it natively. The core plugin registers its own Bricks elements, so you can design course pages, lessons and memberships in Bricks without a third-party add-on.

This guide is for designers and developers using the Bricks theme with LifterLMS. It covers enabling Bricks for LifterLMS content, the nine LifterLMS elements, templating many courses and lessons at once, and the gaps you need to fill with shortcodes. We also cover the access-control checks that matter more with Bricks than with most builders.

Element names and behaviour were checked against the LifterLMS 10.3 source and the LifterLMS Bricks documentation at the time of writing.

What native support means here

When the Bricks theme is active, LifterLMS registers a set of elements in a LifterLMS category in the Bricks panel and loads a small stylesheet for the builder canvas. Each element renders a LifterLMS shortcode, so the output on the front end is the same markup LifterLMS uses everywhere else. Your existing LifterLMS CSS and any template overrides still apply.

What LifterLMS does not do for Bricks is migrate existing courses or insert a starter layout. With Elementor and Beaver Builder, LifterLMS adds its elements the first time you open a course in the builder. With Bricks, a page opens on a blank canvas and you place every element yourself.

Enable Bricks for courses, lessons and memberships

1. Go to Bricks > Settings, General tab, and find the post types section.
2. Enable Courses, Lessons and Memberships. Save.
3. Open any course and choose Edit with Bricks, from the course list, the block editor or the admin toolbar.

If your courses already have block editor content, Bricks can import it. The LifterLMS documentation points to two Bricks settings under General: Load Gutenberg data into Bricks and Save Bricks data as Gutenberg data. With those on, LifterLMS blocks and many core blocks convert into Bricks elements. Try it on a copy of one course first; conversions rarely come out exactly as designed.

The nine LifterLMS elements

Element	Output	Settings
Course Information	Course meta with a heading	Title text and heading level
Course Meta Information	Length, difficulty, tracks, categories, tags	Course (blank for current)
Course Author	Author name, avatar and bio	Avatar size, Display Bio, Course
Instructors	Course or membership instructors	Detects courses and memberships
Course Syllabus	Sections and lessons	Course (blank for current)
Course Progress	Progress bar for the current course	None
Course Progress with Continue Button	Progress bar and next-lesson button for enrolled students	Course (blank for current)
LifterLMS Pricing Table	Access plans for the current course or membership	None
Lesson Progression (Mark Complete)	Mark Complete or Take Quiz button	None; use on lessons only

Elements with a Course setting can be used on ordinary pages too, which is handy for a home page that features one course. The pricing table element always uses the page it is on, so for a separate sales page use a Shortcode element with [lifterlms_pricing_table product="123"] instead.

Fill the gaps with shortcodes

Some LifterLMS features have no Bricks element. Place them with Bricks' Shortcode element:

• Lesson navigation: [lifterlms_lesson_navigation] for previous and next lesson links.
• Prerequisites notice: [lifterlms_course_prerequisites] on courses that have one.
• Course reviews: [lifterlms_course_reviews] if you use reviews.
• Enrolled-only content: [lifterlms_hide_content id="123"]...[/lifterlms_hide_content], or Bricks' own conditions combined with care, as described below.
• Course grids: [lifterlms_courses] on a catalog page, if you prefer LifterLMS's tiles to a Bricks query loop.

Every course and lesson you build in Bricks needs a quick checklist pass: is the syllabus there, the pricing table, the Mark Complete button, the navigation? On a lesson, a missing Lesson Progression element means students cannot complete it.

Templating many courses and lessons

Designing each lesson by hand does not scale. Bricks templates with conditions let you build one layout for every lesson and another for every course.

A lesson template

1. Create a Bricks template of the Single type and set its condition to the Lesson post type.
2. Add a Post Content element where the lesson text from the WordPress editor should appear.
3. Below it, add the Lesson Progression (Mark Complete) element and a Shortcode element with [lifterlms_lesson_navigation].
4. Add a sidebar column with the Course Syllabus element if you want a course outline next to each lesson.

A course template

1. Create a Single template with the Course post type as its condition.
2. Lay out a hero with the title and featured image from dynamic data, then Course Information, Instructors and the pricing table.
3. Add Course Progress with Continue Button and Course Syllabus lower down, so returning students find their place.

Lessons and courses edited individually with Bricks use their own layout instead of the template. Decide which approach you are using per post type and stick to it, or support becomes confusing.

LifterLMS's own Focus Mode uses a fixed lesson layout from the plugin. If you design lessons in Bricks, you will usually leave Focus Mode off.

Catalog, dashboard and checkout pages

The course catalog, student dashboard and checkout are ordinary WordPress pages chosen in the LifterLMS settings, so you can build them in Bricks like any other page. The functional parts still come from LifterLMS:

• Student dashboard: a Shortcode element with [lifterlms_my_account] on the page set as the dashboard. It handles login, registration, the dashboard tabs and password reset.
• Checkout: [lifterlms_checkout] on the checkout page. Keep the layout simple: a single column, a clear heading, and nothing that competes with the payment form.
• Catalog: either [lifterlms_courses] or a Bricks query loop, as discussed in the FAQ below.

Design the space around these elements in Bricks, and leave the forms themselves to LifterLMS. If you need the forms to look different, style them with CSS or change their fields in LifterLMS's form settings rather than rebuilding them, which would bypass validation and payment handling. Our guide to the LifterLMS student dashboard covers what each tab does.

Access control: test it every time

Bricks gives you dynamic data and conditions on every element, which is powerful and easy to get wrong on a course site.

• Locked lessons. When a student cannot access a lesson, LifterLMS loads its restricted-content template at a later priority than theme builders, so the visitor sees the no-access page rather than your Bricks lesson layout. Confirm this on your site with a logged-out browser.
• Course and membership pages stay public. They are sales pages, so they are not swapped for a no-access template. Anything you place on them with dynamic data, such as a custom field holding bonus downloads, is visible to everyone unless you hide it.
• Hiding by enrollment. Use [lifterlms_hide_content], which checks enrollment in LifterLMS. A condition that only checks "user is logged in" is not the same as "user is enrolled".
• Protected files. A download link in a Bricks element is just a URL. If files must stay private, use the LifterLMS media protection features described in protecting course media files.

Common mistakes

• No Mark Complete button on lessons. The lesson template lacks the Lesson Progression element. Add it, and do not add it twice.
• Empty syllabus or pricing table in the builder. Preview data is missing. Assign a real course as the template's preview post, and make sure it has published access plans.
• Styles fighting. Bricks resets and LifterLMS styles meet on buttons and forms. Write a small stylesheet that targets LifterLMS classes such as .llms-button-action, .llms-access-plans and .llms-syllabus-wrapper.
• Cached student pages. Progress and enrollment are per user. Exclude logged-in users from page caching; see LifterLMS caching conflicts.
• Broken pages after switching theme. Bricks is a theme. Content built in Bricks does not carry over to another theme, so plan a switch as a rebuild.

Frequently asked questions

Do I need an add-on to use Bricks with LifterLMS?

No. The nine elements are part of the free LifterLMS core plugin and load when the Bricks theme is active. Third-party element packs exist but are maintained by other vendors.

Is there a Bricks element for lesson navigation?

Not in core at the time of writing. Use the [lifterlms_lesson_navigation] shortcode in a Shortcode element.

Can I use Bricks query loops for the course catalog?

Yes, a query loop on the Course post type works for layout. LifterLMS's own [lifterlms_courses] output adds enrollment-aware details such as progress on each tile, which a plain query loop does not.

Will LifterLMS updates break my Bricks templates?

Element output comes from LifterLMS templates, so markup changes in an update can affect your CSS. Test updates on staging and check the changelog's list of updated templates.

What to do next

Enable the three post types in Bricks, then build one lesson template and one course template on staging. Test them as a visitor, an enrolled student and a student with a locked lesson, and keep a short checklist of the elements each template must contain.

If you are building a Bricks course site and want the templates, styling and access checks done properly the first time, our LifterLMS development service builds exactly this. Tell us about your project and we will scope it.