Using BRM Bricks Elements

BricksMembers adds five powerful elements to Bricks Builder: Progress Checkbox, Progress Bar, Post Navigation, Protected Download, and Like Button, + an enhancement to the Bricks Form element to let you apply user levels on user registration via Bricks form. These elements give you complete control over the member experience without writing any code.

This guide covers all five elements and how to use them effectively.

The Five BricksMembers Elements

1. Progress Checkbox

Let users mark content as complete

2. Progress Bar

Show visual progress indicators

3. Post Navigation

Navigate between posts with structure-based boundaries

4. Protected Download

Display secure download links with access control

5. Like Button

Let users like/unlike posts with count display

6. Form Action: Assign User Levels

Automatically assign user levels when users register via Bricks forms

All five elements are native Bricks elements—they appear in the Bricks element panel in the BricksMembers section and work exactly like any other Bricks element. The form action for level assignments is part of the Bricks Form element.

Progress Checkbox Element

Important: This element only shows up in the Bricks elements list if progress tracking is turned on!

The Progress Checkbox lets users mark posts as complete and optionally automate what happens next.

When to Use It

Perfect for:

• Course lessons (mark as complete when finished)
• Onboarding steps (check off completed tasks)
• Reading lists (track which articles you’ve read)

Not needed for:

• Blog posts (no completion tracking)
• Static pages (no progress to track)
• Sales pages (not member content)

Adding a Progress Checkbox

1. Edit a post template in Bricks (for posts within content structures)
2. Find the BricksMembers Progress Checkbox element in the element panel
3. Drag it to your desired location (usually at the bottom of the content)
4. Configure the settings (see below)
5. Save the post

Settings

Label

• Text shown when unchecked
• Default: “Mark as complete”
• Examples: “You’ve finished this lesson,” “Done,” “Complete”

Checked Label

• Text shown when checked
• Default: “Completed ✓”
• Examples: “Done! ✓,” “Finished,” “Completed”

Style

• Show as button (Content tab)
• Typography: Font, size, weight, color
• Spacing: Padding, margin
• Colors: Text color, background color, border color
• States: Different styles for unchecked, checked, hover
• Bonus: Button Style tab:
  • We all love AutomaticCSS, so in the Button Style tab, you can select AutomaticCSS under Button Style and then use the appearing selects to choose the button style and sizes
  • The correct ACSS utility classes are automatically applied to the button

Events (Advanced)

• Reload Page After Completion: Automatically reload the page after marking as complete
• Open Next Post After Completion: Automatically navigate to the next post in the structure
• On 100% Completion Redirect: Redirect to a specific page when the user completes all items in a boundary – super useful for congratulations pages after finishing a course
• Drip Unlock Behavior: (When Drip Content is enabled) Choose how the page reacts when a drip unlock happens—AJAX partial refresh, full page reload with scroll restore, or no change. See the Drip Unlock Behavior section below for setup.

Advanced: Automating the Learning Flow

The Progress Checkbox includes powerful automation options to create seamless learning experiences.

Option 1: Reload Page After Completion

What it does:

• Automatically reloads the page after the user marks content as complete
• Updates progress bars and unlocks new content immediately
• Works great with drip content that unlocks based on completion

When to use it:

• You have progress bars on the same page
• You’re using drip content that unlocks after completion
• You want users to see their updated progress and unlocked posts immediately

Option 2: Open Next Post After Completion

What it does:

• Automatically navigates to the next post in your structure
• Creates a seamless “Netflix-style” learning flow
• You can set boundaries with “Next Post Boundary” control (e.g., stay within the current course)

When to use it:

• You want users to move through content sequentially
• You’re building a course with a clear learning path
• You want to reduce friction (no need to click “Next”)

Settings:

• Next Post Boundary: Choose which boundary to stay within (Top Level, Parent Level, or specific levels)

100% Completion Redirects

What it does:

When a user completes the last item in a boundary (e.g., finishes all lessons in a course), you can redirect them to a specific page.

Redirect Options:

• No redirect: Default behavior (reload or next post)
• Reload page: Refresh the current page
• Go to parent post: Navigate to the course overview page
• Internal post/page: Send them to a specific congratulations page
• Custom URL: Redirect to any URL (e.g., certificate page, external site)

Example Use Case:

Set up “Open Next Post After Completion” with a 100% completion redirect to a congratulations page. Users will automatically move through lessons, and when they finish the last lesson, they’ll be redirected to a completion page with a certificate download.

Settings:

• Check Completion For: Choose which boundary must reach 100% (Top Level, Parent Level, or specific levels)

Drip Unlock Behavior (Instant Unlock UX)

Important: Drip Unlock Behavior controls only appear when the Drip Content module is enabled.

When learners complete a lesson, waiting for a full page reload can feel clunky. The Drip Unlock Behavior controls let you choose how the page reacts when a drip unlock happens—so newly available content can update right away.

After a user checks the Progress Checkbox, BricksMembers can react in three ways:

• Do nothing – Save completion only; no page change
• Update matched wrappers (AJAX) – Re-render matching sections in place without reloading the page
• Reload page with position – Refresh the page, then restore scroll position or jump to a target element

When to use which mode:

• Update matched wrappers (AJAX) – Smooth in-place update. Best when you want an unlock panel to switch from “Locked” to “Continue” without a page refresh.
• Reload page with position – When the page has many dynamic sections that should all reflect the new state at once.
• Do nothing – When completion should be recorded silently and UX changes happen elsewhere (e.g., on next visit).

Prerequisites: Enable Progress Tracking and Drip Content in BricksMembers → Settings → Modules. Add a BRM Progress Checkbox to your lesson template. For AJAX mode, you need at least one wrapper element on the page that you want to refresh after unlock.

Setup: Partial Refresh (AJAX) — Step by Step

Partial refresh re-renders specific sections of the page via AJAX, so locked/unlocked content can update without a full reload.

1. Edit your page or post template in Bricks Builder
2. Select the BRM Progress Checkbox element on the canvas
3. In the panel, open the Drip Unlock Behavior control group
4. Set After Drip Unlock to Update matched wrappers (AJAX)
5. Prepare your wrapper element(s): Each section you want to refresh must be inside a wrapper (e.g., a Section or Div). Select that wrapper in Bricks and give it a CSS class or custom ID so it can be targeted:
   • To add a class: In the wrapper’s settings, open Advanced → CSS Class(es) and add something like drip-refresh
   • To add a custom ID: In the wrapper’s settings, open Advanced → CSS ID and add something like next-lesson-panel
   • Inside the wrapper, add child elements for locked and unlocked states, and use Bricks conditions (BricksMembers → Drip → is Locked / is Unlocked) to control visibility
   • Important: Don’t put conditional logic on the wrapper element as otherwise it won’t work!
6. Enter the CSS Selector: In the Progress Checkbox’s Drip Unlock Behavior, enter a selector that matches your wrapper(s). Examples:
   • .drip-refresh — targets elements with class drip-refresh
   • #next-lesson-panel — targets the element with ID next-lesson-panel
   • For multiple wrappers, separate selectors with commas: .drip-refresh, #my-unlock-panel
7. Enter the Bricks Element IDs: Bricks assigns a 6-character ID to each element. To find it: select the wrapper in the canvas, then look at the input field on top of the settings panel on the left side of the Bricks editor. You’ll see something like #brxe-yydnul. The part after #brxe- is the element ID (e.g. yydnul). Enter this in the Bricks Element IDs field. The order must match the order of your CSS selectors:
   • If your CSS Selector is .drip-refresh, #next-lesson-panel, then Bricks Element IDs might be abc123, def456 (first ID for first selector, second for second)
   • For multiple IDs, separate with commas (no spaces)
8. Save. When a learner completes content and a drip unlock happens, BricksMembers will re-render the matched wrappers via AJAX. The server returns fresh HTML with updated condition results, so locked/unlocked content updates in place.

Scroll & Highlight (optional): After the AJAX refresh, you can scroll to the first refreshed element and/or highlight it. Enable Scroll to Element to smoothly scroll it into view, and Highlight Element to apply a visual effect (Border, Glow, Background, Shine, etc.). You can configure Highlight Padding, Shine Speed, Duration, and Color.

Setup: Full Refresh Mode — Step by Step

Full refresh reloads the page so all sections reflect the new state, then either restores scroll position or jumps to a target.

1. Select your BRM Progress Checkbox in Bricks
2. Open Drip Unlock Behavior and set After Drip Unlock to Reload page with position
3. Choose Position Restore:
   • Restore exact scroll position — returns the user to where they were before the reload
   • Scroll to element — jumps to an element matching a CSS selector (e.g. .brm-unlock-section). Add that class or ID to your target element in Bricks
4. If you use “Scroll to element”, optionally enable highlight so the target is visually emphasized after the jump

How AJAX mode stays accurate: With partial refresh, BricksMembers asks the server for the current state each time it re-renders. It does not blindly force “unlocked” on the client. That matters when time conditions or prerequisites still block access—the server returns the correct state.

Common mistakes:

• No Drip Conditional element on the page — AJAX mode has nothing to refresh. Make sure you have wrapper(s) with locked/unlocked child content
• Wrong container selector — The CSS Selector must match the class or ID you added to your wrapper. Double-check spelling and format (e.g. .class vs #id)
• Bricks Element ID does not match — The ID must be the 6-character code for the wrapper element. Get it from the input field on top of the settings panel when the wrapper is selected. Order of IDs must match order of CSS selectors
• Missing locked/unlocked states — Create child blocks for both states inside the wrapper, with Bricks conditions controlling visibility
• Drip rules not matching content — Verify post type, structure, level, and prerequisite settings in your drip rules

Quick test checklist: Complete a lesson as a test user; confirm completion saves; confirm newly unlocked content appears (AJAX) or page reloads to the expected position (full mode); repeat with a second lesson to confirm chain behavior.

These same controls are also documented in Drip Content under the Making Unlocks Feel Instant section, for users configuring drip behavior.

Best Practices

Do:

• Place at the bottom of content (after users have read/watched)
• Use clear, action-oriented labels
• Style to match your design
• Show only to logged-in users – anything else could cause problems
• Use “Open Next Post” for sequential learning paths
• Set up 100% completion redirects for course completion pages

Don’t:

• Forget to enable Progress Tracking module first (element won’t appear)
• Use confusing labels (“Click here”)
• Place in the middle of content (distracting)

Progress Bar Element

Important: This element only shows up in the Bricks elements list if progress tracking is turned on!

The Progress Bar shows visual progress indicators.

When to Use It

Perfect for:

• Member dashboards & course overview pages (progress per course)
• Course pages (indicate progress)
• Module pages (progress within a module)
• Wherever you want to show progress visually

Adding a Progress Bar

1. Edit a page, post or post template in Bricks (e.g., your member dashboard)
2. Find the BricksMembers Progress Bar element
3. Drag it to your desired location
4. Configure the settings and style it (see below)
5. Save the page

Settings

Progress Calculation Mode

Select between auto and manual. Manual gives you the option to insert a post id (eg. for a specific course), while auto lets you choose the progress based on parent (eg. progress within current course or module).

Progress Level (if auto mode is used)
Select the level to show progress for (e.g., Top Level for course progress, even if viewing a lesson).

• Structure: Shows average progress across all top-level posts in the structure.
• Top Level: Shows progress for the top level post (usually the course). Use this when you want to display overall course progress, even if you’re on a lesson or module page.
• Parent Level: Shows progress for the direct parent of the current post (e.g., current module if you’re on a lesson post that’s a child of a module post). Use this to show module progress when viewing a lesson.
• Current Level: Shows progress for the current post itself. Use this when viewing a post that has children (e.g., a course or module page) to display progress for that specific post. Perfect for showing course progress when on a course page, or module progress when on a module page. This does not work on the progress tracking level!
• Level 2, Level 3, etc.: Progress of a specific level

Show Percentage

• Yes: Display percentage text (e.g., “75%”)
• No: Show only the bar

Style

• Height: Bar thickness
• Colors: Background color, fill color, text color
• Border Radius: Rounded corners
• Gradient: Gradient background

Examples

Example 1: Course Progress on Course Catalog Page

Show progress bars in a course list for the user to see his progress instantly.

• Progress Calculation Mode: Auto
• Level: Top Level
• Show percentage: Yes
• Style: Up to you
• Placement: Inside a Query Loop that lists courses / posts of your top level post type

Example 2: Parent Progress Bar in the header of all posts

Show a progress bar in the hero section of all posts within a structure that always shows the progress within the parent post.

• Progress Calculation Mode: Auto
• Level: Parent Level
• Show percentage: Yes
• Style: Up to you
• Placement: Above lesson content – ideally in the header
• Make the hero section a Bricks component and include it in all your post templates

The progress bar will automatically detect the progress within the parent post, eg. progress of the module if you’re on a lesson post, progress of the course, if you’re on a module post.

Alternatively: Set it to top level to always show the progress within the current course in the header.

Best Practices

Do:

• Use on dashboards and overview pages
  • Don’t worry about performance in listings as the reads are fast and well optimized
• Show percentage for clarity

Don’t:

• Forget to enable Progress Tracking module first (element won’t appear then)
• Show on every single page (it’s distracting)
• Mix scopes confusingly (e.g., module bar next to course bar without labels)

Post Navigation Element

The Post Navigation element shows next/previous links within a structure.

When to Use It

Perfect for:

• Course lessons (next lesson, previous lesson)
• Sequential content (step-by-step guides)
• Structured learning paths

Not needed for:

• Blog posts (use standard Bricks Post Navigation element)
• Non-sequential content

Adding Post Navigation

1. Edit a post template in Bricks (for posts within content structures)
2. Find the BricksMembers Post Navigation element
3. Drag it to your desired location (usually at the bottom)
4. Configure the settings (see below)
5. Save the post

Settings

Type

• Both: Show previous and next post links
• Previous: Show only the link to the previous post
• Next: I’m sure you can guess that 😉

User Level Match, Progress & Drip Filters (optional)

Select any of these filters to show only previous and next links to content the user has access to based on his user level and drip logic, or that he has or has not completed.

Navigation Boundary

• Top Level: Navigate within the top level post (eg. course)
• Parent Level: Navigate within the current parent post (e.g., module of current lesson)
• Level 2, Level 3, etc.: Navigate within parent post of a specific level

Labels

• Previous Label: Text for previous link (e.g., “← Previous Lesson”)
• Next Label: Text for next link (e.g., “Next Lesson →”)

Title

• Show Title: Enable/disable post title display (default: enabled)
• Title Tag: HTML tag for the title (default: h5)
• Title Typography: Font, size, weight, color (Style tab)

Arrows

• Show Arrows: Enable/disable arrow icons (default: enabled)
• Previous Arrow Icon: Custom icon for previous link (icon picker)
• Next Arrow Icon: Custom icon for next link (icon picker)
• Arrow Typography: Font size and color for arrows (Style tab)

Image

• Show Image: Enable/disable featured image display (default: disabled)
• Image Size: WordPress image size (default: thumbnail)
• Image Height: Height of the image (Style tab, default: 60px)
• Image Width: Width of the image (Style tab, default: 60px)
• Image Border: Border styling for images (Style tab)
• Image Border Radius: Rounded corners (default: 4px)
• Image Object Fit: How image fills container (default: cover)

Examples

Example 1: Simple Next/Previous

• Boundary: Top Level (eg. within same course – posts within other courses will be ignored)
• Progress filter: All
• Show both previous and next
• Labels: “← Previous” and “Next →”
• Style: Up to you

Example 2: Next Lesson Only

• Boundary: Top Level (across entire course)
• Progress filter: Not Completed (skip completed lessons)
• Type: Next
• Label: “Continue to Next Lesson →”
• Style: Up to you

Best Practices

Do:

• Place at the bottom of content (natural progression point)
• Use clear labels (“Next Lesson” not just “Next”)
• Match boundary to user intent

Don’t:

• Use on non-structured content – Use the native Bricks Post Navigation element in that case

Protected Download Element

Important: This element only shows up in the Bricks elements list if the protected downloads module is turned on!

The Protected Download element displays secure download links that respect user level access control.

When to Use It

Perfect for:

• Course materials (PDFs, worksheets, templates)
• Resource libraries (downloadable files for members)
• Bonus content (exclusive downloads for specific levels)
• Product files (digital products with access control)

Not needed for:

• Public downloads (use regular links)
• Non-member content
• More customized solutions – use {brm_download} tags for that

Adding a Protected Download

1. Edit a page, post or template in Bricks
2. Find the Protected Download element in the element panel
3. Drag it to your desired location
4. Configure the settings (see below)
5. Save the page

Settings

Display Mode

• Single Download: Show one specific download
• Downloads List: Show multiple downloads

Download Selection (for Single mode)

• Select which download to display from your protected downloads

List Settings (for List mode)

• Number of Downloads: How many to show (1-50)
• Filter by User Level: Hide downloads the user cannot access
• List Style: Bullet style (disc, circle, numbers, letters, etc.)

Display Options

• Show as Button: Display as button or link
• Button/Link Text: Custom text (or use filename/title)
• Use Filename as Text: Automatically use the file name
• Use Download Title as Text: Use the download’s title
• Show Download Title: Display the download title
• Show Filename: Display the file name
• Show File Size: Display file size (e.g., “2.5 MB”)
• Show Download Image: Display featured image if set
• Show Description: Display download description

Layout

• Layout Style: Default (vertical), or Horizontal
• Title Position: Top (above everything) or With Content

Button Style (when Show as Button is enabled)

• Button Style: Primary, Secondary, Light, Dark, Muted, or AutomaticCSS (ACSS utility classes get applied)

Examples

Example 1: Single Download Button

• Display Mode: Single Download
• Download: Course Materials
• Show as Button: Yes
• Button Text: “Download Course Materials”
• Show File Size: Yes
• Button Style: Primary

Example 2: Downloads List with Images

• Display Mode: Downloads List
• Number of Downloads: 10
• Show Image: Yes
• Layout Style: Horizontal
• Show Title, Filename, File Size: Yes
• Filter by User Level: Yes

Best Practices

Do:

• Use descriptive button/link text
• Show file size so users know what they’re downloading
• Filter by user level to hide inaccessible downloads

Don’t:

• Forget to enable Protected Downloads module first
• Show downloads users can’t access

Like Button Element

Important: This element only shows up in the Bricks elements list if the like button system module is activated!

The Like Button element lets users like or unlike posts with an optional count display. It can be used on any content. It must NOT be within any content structure. Let users like whatever they want.

When to Use It

Perfect for:

• Blog posts (let readers show appreciation)
• Course lessons (favorite lessons)
• Resource pages (bookmark useful content)
• Community content (show engagement)
• In the future, it will also be used for an upcoming leaderboard functionality

Adding a Like Button

1. Edit a post, page, or template in Bricks
2. Find the BRM Like Button element in the element panel
3. Drag it to your desired location
4. Configure the settings (see below)
5. Save the post

Settings

Content

• Post ID: Post to like (leave empty for current post)

Icon

• Icon Type: Default Heart or Custom Icon
• Custom Icon: Select custom icon (if Icon Type is Custom)
• Icon Size: Size of the icon

Display

• Show Count: Display the number of likes
• Count Position: Right of Icon, Left of Icon, or Below Icon
• Hide Zero Count: Hide count when it’s zero

Styling

• Icon Color: Color when not liked
• Icon Color (Liked): Color when liked
• Count Color: Color of the count text
• Icon/Count Gap: Spacing between icon and count
• Transition Duration: Animation speed

Examples

Example 1: Simple Like Button

• Icon Type: Default Heart
• Show Count: Yes
• Count Position: Right of Icon
• Hide Zero Count: Yes
• Icon Color: Gray (#ccc)
• Icon Color (Liked): Green (#00ff66)

Example 2: Custom Icon Like

• Icon Type: Custom Icon
• Custom Icon: Thumbs Up
• Show Count: Yes
• Count Position: Right of Icon
• Icon Size: 32px

A great way is also to use it in query loops to let users like posts.

Best Practices

Do:

• Show count to encourage engagement
• Use clear visual feedback (color change when liked)
• Place near content (top or bottom of post)
• Style to match your design

Don’t:

• Forget to enable Like System module first
• Use confusing icons
• Place in distracting locations

Form Action: Assign User Levels on Registration

BricksMembers adds a custom form action to Bricks forms that automatically assigns user levels when users register. This is perfect for free membership sites, associations, or any scenario where you want to grant access immediately upon registration.

To use this feature, add the Assign BRM User Levels action to your Bricks form after the User Registration action, then select the level(s) to assign in the BRM User Levels control group.

For complete setup instructions, example use cases, and important notes, see Understanding User levels (Method 4: Form Registration).

Element Availability

Progress Checkbox:

• Only available when progress tracking module is enabled

Progress Bar:

• Only available when progress tracking module is enabled

Post Navigation:

• Always available (doesn’t require any module)
• Works only with posts inside content structures – use the native Bricks Post Navigation Element if not

Protected Download:

• Only available when protected downloads module is enabled

Like Button:

• Only available when Like System module is enabled

If you don’t see an element, check that the required module is enabled in BricksMembers → Settings.

Common Questions

Q: Can I use these elements outside of Bricks?

A: No. They’re Bricks-specific elements. Use dynamic tags where applicable if you need more customization.

Q: Can I style elements with custom CSS?

A: Yes! Each element has CSS classes you can target either with controls, or custom css

Q: Do these elements work with Bricks templates?

A: Yes!

Q: Can I show different elements to different user levels?

A: Yes! Use Bricks conditions to show/hide elements based on user level.

Q: What if I delete an element? Is data lost?

A: No. Progress, completion, likes and downloads data is stored in the database and managed in the WordPress backend, not in the element. Delete and re-add elements freely.

Q: Can I have multiple progress bars on one page?

A: Yes! Show global progress, structure progress, and category progress all on the same page.

Next Steps

Now that you know how to use BricksMembers elements, you’re ready to:

1. Master dynamic tags – Display membership data anywhere
2. Use conditional logic – Show different content to different users
3. Build a member dashboard – Give members an overview of their progress