Bricks Builder Setup

If you’re using Bricks Builder and Automatic.css, please follow the setup steps below.

Option #1: Automatic Setup

We provide two settings files to establish the default settings for your Bricks project automatically. One is a Bricks Settings file and the other is a Bricks Theme file.

Warning: These files should be used to start a new project. Uploading them to an existing project will overwrite your settings and defaults.

Step #1: Import Bricks Settings File

Download this Bricks Settings Blueprint file (.zip), unzip it to expose the .json file, and upload the .json file to your Bricks Settings Panel:

Step #2: Import Bricks Theme File

Bricks uses Global Theme Styles to control a lot of your website’s default styling. Most of this should be left undefined, but a few settings need to be set up.

Download this Bricks Theme file (.zip), unzip it to expose the .json file, and then upload the .json file to the Bricks Global Theme area.

Once you’ve uploaded both files, you’re good to go. You can now proceed with customizing any empty settings based on your preferences (such as setting your font family in Typography > Body/Headings).

Option #2: Manual Setup

If you don’t want to use our settings files, you can configure the settings manually. Here are the steps:

Step #1: Configure Bricks Settings

Navigate to Bricks > Settings in the WordPress Admin:

Configure as follows:

General
- Post Types
  - Pages = On
- Gutenberg Data
  - Load Gutenberg data into Bricks = Off
  - Save Bricks data as Gutenberg data = Off
- SVG Uploads
  - Administrator = On
  - Editor = On
  - Author = Off
  - Contributor = Off
- Miscellaneous
  - Disable global class manager = Off
  - Disable Bricks Open Graph Meta Tags = On
  - Disable Bricks SEO Meta Tags = On
  - Generate Custom Images Sizes = Off
  - Disable “Skip Links” = Off
  - Smooth Scroll = Off
  - Enable Delete Bricks Data Button = Off
  - Query Bricks Data in Search = On (FYI Link)
  - Save form submissions in database = User Preference
- Custom Breakpoints
  - Custom Breakpoints = On
- Convert
  - Convert “Container” to new “Section” & “Block” elements = Off
  - Convert element IDs & classes = Off
  - Add “position: relative” as needed = Off
  - Entry animation to interaction = Off
- Custom authentication pages
  - User Preference
Builder Access
- Builder Access
  - Administrator = Full
  - Editor = Edit
  - Author / Contributor / Subscriber = No Access
- Code Execution
  - Disable Code Execution = Off
  - Administrator = On
  - Editor / Author / Contributor = Off
Templates
- My Templates
  - Disable default templates = Off
  - Public templates = Off
  - My Templates Access = Off
- Remote Templates
  - Remote Templates = Frames (Optional)
- Miscellaneous
  - Convert Templates = Off
Builder
- Disable Autosave
  - Disable Autosave = On
- Builder Mode
  - Builder Mode = Dark
- Language
  - Builder Language = User Preference
  - Builder Language Direction = Auto
- Toolbar Logo Link
  - Toolbar Link = Preview
  - Open in new Tab = On
- Control Panel
  - Disable auto-expand (Text editor, Code) = Off
  - Disable global classes (Interface) = Off
- Canvas
  - Disable Element Spacing = On
  - Auto scroll element into view = User Preference
- Structure panel
  - Duplicate = On
  - Delete = On
  - Collapse on page Load = On
  - Expand active element & scroll into view = On
- Element Actions
  - Wrap Element = Block
  - Insert Element = Block
  - Insert Layout = Block
- Disable WP REST API render
  - Disable WP REST API render = Off
- WP polyfill
  - WP polyfill = Off
- Dynamic Data
  - Render dynamic data text on canvas = On
  - Disable WordPress custom fields in dropdown = On
  - Show dynamic data key in dropdown = On
  - Hide dynamic data label in dropdown = On
  - Expand panel when dropdown is visible = On
Performance
- Disable Emojis = On
- Disable Embed = Off
- Disable Google Fonts = On (Recommended)
- Disable Lazy Loading = On
- Disable JQuery Migrate = On
- Cache Query Loops = Off
- Add Element ID/Class As Needed = On
- Disable Class Chaining = On (REQUIRED)
- CSS Loading Method = External Files

Once you’ve configured the settings, it’s time to setup your Global Theme Styles.

Step #2: Global Theme Styles

Open Bricks Builder by editing any page. Once in the editor, click the settings wheel toward the top left:

Next, click on Theme Styles. Once the panel opens, click the plus sign to add a new theme:

Give your Theme Style a name and click “Create.”

The first thing you need to do is assign your new theme style to your entire website. You can do that in the Conditions tab:

Warning: If you don’t assign your theme styles, you won’t see them at all and ACSS won’t work properly. Make sure you assign the styles to your entire website.

Warning: These settings should only be used to start a new project. Changing them on an existing project will overwrite your current settings, all your headings that aren’t individually set will become h2. Importing templates that don’t have explicit settings will also use your defaults.

Here are the rest of the settings (panels & settings that aren’t mentioned require no changes):

Typography: Set your Font Family for both body and headings.
Element – Container (Required): Set width to var(--content-width)
Element – Code (Recommended): Set theme to Tomorrow Night
Element – Heading (Recommended to ease workflow): Set default Tag to H2
Element – Image: Set caption to no caption

Using these settings means headings will be h2. When the defaults are not what you need, change the individual element after adding it.

Caution: Setting other global styles in Bricks can cause conflicts with ACSS. Make sure you know exactly what you’re doing if you want to set any other global style defaults in Bricks.

That’s it! Bricks is now setup and ready to work properly with ACSS!

Navigation