December 11, 2023

Walkthrough: Create Reusable Bricks Builder Blocks of Elements

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Creating reusable Bricks Builder blocks of elements is an efficient way to design and manage your WordPress site. This walkthrough will guide you through the process of building flexible, customizable blocks using Bricks Builder.

Reusable Bricks Builder Blocks of Elements Preview


Please make sure you have the following installed and activated:

Understanding BEM and nth-child Selector

Before diving into creating reusable Bricks Builder blocks of elements, it’s important to understand two key concepts: BEM (Block Element Modifier) and the nth-child CSS selector. These tools are vital for creating efficient, scalable, and maintainable code in web development.

BEM (Block Element Modifier)
BEM is a methodology for naming and organizing HTML and CSS classes. The essence of BEM is to break the user interface into independent blocks, making it easier to understand and manage the UI’s structure. Here’s a quick breakdown:

  • Block: A standalone entity that is meaningful on its own, like a button, menu, or header.
  • Element: A part of a block that performs a specific function. For example, a menu item in a navigation block.
  • Modifier: A flag set on a block or element used to change appearance or behavior. For example, a disabled button or a highlighted menu item.

Using BEM, you might have HTML and CSS class names like menu (block), menu__item (element), and menu__item--active (modifier).

nth-child CSS Selector
The nth-child selector is used in CSS to select elements based on their position in a group of siblings. It allows you to apply styles to specific items in a list or grid without having to add extra classes to each item. For instance, li:nth-child(2) would target the second list item in an unordered list. It’s a powerful tool for creating patterns and special styles in your layouts.

Understanding these concepts is crucial when working with reusable Bricks Builder blocks of elements, as they allow for more structured, readable, and maintainable code, leading to efficient and dynamic web designs.

Reusable Bricks Builder Blocks of Elements Summary

  • 0:01 – 1:13: Introduction to creating reusable blocks of elements using Bricks Builder. A demonstration begins with a basic card design. Explains the use of an nth child selector for style variations and the use of modifiers for primary and secondary colors and alignment.
  • 1:14 – 2:52: Breakdown of the structure and elements of the created card. Discusses the benefits of building reusable content, its flexibility, and ease of modification. Details include the use of BEM (Block Element Modifier) naming convention, header, body, and footer elements within the card, and button utility.
  • 2:53 – 4:06: The development environment setup is described. This includes using local by Flywheel for development, resetting to a base site using WP Reset, and outlining the plugins and utilities in use.
  • 4:07 – 5:51: Introduction to a custom framework, ‘Bricks bits’, used to generate a CSS framework. This framework, primarily consisting of CSS variables, is described as a slim, basic setup used for development and providing more control over automatic CSS.
  • 5:52 – 7:01: Explanation of creating a card grid with BEM naming, turning it into a semantically correct list, and removing default padding. The process includes using shortcuts and utility classes for efficiency.
  • 7:02 – 9:02: Details on setting up a grid for the card grid, adjusting grid gaps, and creating a flexible card component. Emphasis is on avoiding default Bricks Builder settings by starting with a div for greater control.
  • 9:03 – 11:17: Building the individual card components (header, body, footer) and defining their styles using custom CSS. The process involves setting display types, flex directions, and width.
  • 11:18 – 17:06: Conversion of initial card settings into variables for greater flexibility and reusability. The tutorial demonstrates changing styles into CSS variables and underscores the benefits for scalable and manageable design changes.
  • 17:07 – 20:37: Further explanation of variable creation for card components. Shows how to make global changes within the card’s scope by altering a few variables, highlighting the efficiency of this method.
  • 20:38 – 24:40: Continuation of converting card component styles into variables. The process includes setting specific properties for header, body, footer, and icons.
  • 24:41 – 31:35: Finalizing the card variables and addressing issues with specificity and CSS overrides. The tutorial demonstrates how to ensure that custom styles take precedence over default styles using the ‘:where’ CSS pseudo-class.
  • 31:36 – 34:59: Application of created CSS variables to modify the appearance of every second card in the grid using nth-child selector. This demonstrates the power of using CSS variables for easy and efficient styling changes.
  • 35:00 – 37:03: Creation of various card modifiers like ‘secondary’, ‘center’, ‘right’, and ‘compact’ using BEM naming conventions. This shows how to quickly change the card styles by simply adding a class modifier.
  • 37:04 – 41:41: Detailed demonstration of applying and combining different modifiers to individual cards, showcasing the flexibility of the design system. The process includes changing colors, alignment, and padding through simple class additions.
  • 41:42 – 45:11: Introduction to creating alignment modifiers and their application to the card components. The tutorial explains how to align content within the card’s header, body, and footer.
  • 45:12 – 49:15: Continuation of creating and applying alignment modifiers, with additional adjustments for compact card design. Demonstrates the ease of modifying card designs by adjusting a few variables.
  • 49:16 – 53:45: Adding a utility to push the footer to the bottom of the card and how to handle this with a variable for greater control. Shows how to ensure that modifiers and base styles can coexist and be easily managed.
  • 53:46 – 55:06: Demonstration of renaming classes for scalability and maintenance, using the class manager for bulk actions. Shows how to easily update class names across multiple elements.
  • 55:07 – 57:10: Final thoughts on the flexibility and scalability of using BEM with Bricks Builder for creating reusable components. Encourages feedback and open discussion for improvement.
  • 57:11 – 1:03:41: Wrapping up with advanced tips and tricks for using breakpoints and variable overrides to achieve responsive design. Highlights the ease of making global style changes at different screen sizes.

Official Documentation

Reusable Bricks Builder Blocks of Elements – Conclusion

This tutorial demonstrates the power and flexibility of creating reusable Bricks Builder blocks of elements. By applying BEM methodology and custom CSS, you can craft highly customizable and efficient designs for your WordPress site.

Required Resources

Bricks Builder Logo
Payment required
Credit to WP Easy
WP Easy simplifies complex WordPress topics, helping both beginners and advanced users master the platform. Committed to empowering website creators, WP Easy delivers practical, easy-to-follow content for enhancing your WordPress skills.
Walkthrough: Create Reusable Bricks Builder Blocks of Elements
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.