BRICKS MASTERY

Learn Bricks Builder Components: Build 3 Real-World Components (2026)

ENROLL TO TRACK PROGRESS

01 · BRICKS BUILDER COMPONENTS: CORE CONCEPTS

What Are Components and Why You Need Them3:44

Without vs With Components4:46

Build Your First Class Component from Scratch6:41

Properties, Variants, Slots and Nested Components24:20

02 · BUILD A COPY TO CLIPBOARD COMPONENT

What You'll Build: Copy to Clipboard Component2:44

Custom Input Field (Allow HTML Tags in Bricks)6:47

Input Attributes, Copy Button & Builder Fixes5:03

Interactions & Passing Arguments in Bricks Builder13:56

Copy to Clipboard JavaScript (Data Attributes)12:47

Converting It Into a Bricks Component (Properties)7:56

Use Components Everywhere (Templates, Popup & Block Editor)13:26

Copy to Clipboard: Code, Template & Component JSON Snippets1:20

03 · BUILD A FLEXIBLE CTA COMPONENT

What You'll Build: Flexible CTA Component1:29

CTA Base Structure & Create Variants5:21

Second Button & Make Content Dynamic with Properties8:45

Conditionally Hiding Elements with Toggle Type3:19

Component Slots for Unlimited Flexibility4:27

IN PROGRESS

This course is still being recorded. New lessons land here as they're finished.

← Back← Course overview MODULE 03 · LESSON 01

BUILD A FLEXIBLE CTA COMPONENT · LESSON 01

What You'll Build: Flexible CTA Component

A walkthrough of building a reusable CTA (Call-to-Action) component that's flexible enough to adapt across different projects and client use cases.

Unlock full course →

Lesson notes

A quick demo of the finished CTA component so you know exactly what you're building before diving into the lessons.
Two variants: base and centered are implemented
You'll see how a toggle property type can conditionally show or hide elements.
Along the way, you'll learn how to work with component slots
The point isn't just the finished CTA. It's the process: build the base structure, layer in variants, add toggle conditions, extend with slots. Turning one component into something you can reuse across your own or your client's projects.

Resources

JSONCTA Component

Enroll to unlock

Discussion

Discussion is for enrolled students

Enroll to ask questions, get answers from the instructor, and connect with other students.

Enroll in this course →