Posted in: Plugins/Addons

Posted on:

Essential Tips For Mastering Bricks Builder & Core Framework

Core Framework and Bricks Builder are powerful tools for WordPress site building. This guide, based on a detailed video tutorial, will walk you through essential steps and best practices to efficiently use these tools together.

Setting Up Core Framework and Bricks Builder

  1. Account and Plugin Setup: Ensure you have an account with Core Framework and have set up the plugin inside Bricks Builder.
  2. Setting Preferences in Core Framework:
    • Go to Preferences.
    • Set your max screen width (e.g., 1366px). Ensure this matches the setting in Bricks Builder.
  3. Configuring Bricks Builder:
    • Open a page with Bricks active.
    • Go to Settings → Theme Styles.
    • Create a theme style and name it.
    • Set conditions to enable it across your website.
    • Match the Element container’s Max Width to Core Framework’s setting (in this example 1366px).
  4. Breakpoints Synchronization:
    • Bricks Builder and Core Framework have different default breakpoints.
    • Enable custom breakpoints in Bricks: Settings → General → Custom Breakpoints.
    • Match Bricks’ breakpoints to Core Framework’s settings.

Typography and Styling

  1. Setting Typography:
    • Open the Typography tab in Core Framework.
    • Set minimum and maximum font sizes and scaling ratios.
    • In Bricks, go to Theme Styles → Typography.
    • Use Core Framework variables for consistent typography.
  2. Default Styling:
    • Use Core Framework to set default values for elements like padding in sections.
    • Select the appropriate spacing in Bricks using Core Framework variables.

Advanced Customizations

  1. Creating Selector Groups:
    • Use Core Framework to create custom definitions for styles.
    • Example: Setting default page content to 100% vertical height.
  2. Integrating Variables:
    • Add Core Framework variables to Bricks Builder for consistent styles across your website.
    • Example: Set default font size using Core Framework variables.
  3. Overriding Bricks Builder Styles:
    • Use Core Framework to override Bricks Builder settings.
    • Example: Automatically apply a specific padding to all sections in Bricks.

Exporting and Reusing Settings

  • Once your settings are perfected, export them from Core Framework for use in future projects.


By following these steps, you can streamline your workflow, ensuring a consistent and efficient design process.

You may also like these posts.

Join The Community

Join over 13,500 WordPress enthusiasts and become part of a vibrant community.