Bricks Survival Guide for Oxygen Users

Updated on 19 Jan 2024

Here are some tips and answers to FAQs for users switching to or considering switching to Bricks Builder from Oxygen.

Version of Bricks used in this guide: 1.9.5.

Table of Contents

• Is there a Section element?
• How to add/paste an element at the root level
• What’s with the Block element?
• Where’s the Repeater element?
• Where do I set sitewide settings?
• How do I use CSS Grid?
• How can I set up Conditions?
• Does Bricks have Template Inheritance?
• Do Code Blocks work similarly?
• Custom CSS for elements
• Why is there no preview for custom fields?

Is there a Section element?

Yes.

Like in Oxygen, the Section element (having section HTML tag) goes edge-to-edge of the screen.

Unlike in Oxygen though the Section’s Container is also accessible in the structure panel (you can already see the flexibility of Bricks). This Container is a div inside having a fixed width.

By default, the width of containers is 1100px. To change this click the Settings gear icon, create a new theme style named say “Global”, set it to apply for “Entire website” under CONDITIONS and under GENERAL set your desired Root container width. ex.: 1280px.

If you wish to set/change the root container width per Template or Page that is possible as well. When you are inside your Page/Template, go to Settings → PAGE SETTINGS → GENERAL.

How to add/paste an element at the root level

There is no “body” to click on before adding or pasting if you want the elements to be added the root or top-level in the page structure.

Here’s the trick: Click anywhere in the empty space of the structure panel and hit Escape. Then add/paste.

What’s with the Block element?

Besides Sections and Divs, you could add Containers and Blocks in Bricks.

Here’s a short summary of the available layout elements:

• Section: section HTML element that goes edge-to-edge.
• Div: div HTML element having display: block and no set width.
• Container: div HTML element having display: flex and 1100px (changeable)
• Block: div HTML having display: flex and 100% width.

Where’s the Repeater element?

Bricks does not have a dedicated Repeater component like there is in Oxygen.

But it has something that is better: Query Loop.

Select a Container/Block/Div (Block is the most popular choice for this) and enable query loop on it. This makes that element a repeating item (post). The query parameters can be changed by clicking the loop icon. It is common to place the Block on which query loop is enabled in a Container.

Where do I set sitewide settings?

Answer: Theme Styles.

Click the Settings gear icon, create a new theme style named say “Global” (if you haven’t already), set it to apply for “Entire website” under CONDITIONS.

Now you can set defaults for sitewide typography, colors and several Bricks elements.

We recommend setting Section elements’ padding at the minimum.

See our Getting Started with Bricks article for more details.

How do I use CSS Grid?

Select the element and set Display to grid.

Enter your desired Gap, Grid template columns etc.

Add child elements inside.

How can I set up Conditions?

Select the element, click the Conditions icon, click + and proceed.

Does Bricks have Template Inheritance?

No.

We initially felt templating to be a weak point of Bricks coming from Oxygen but after using it for a while, realized that while it is not possible to inherit Templates, it works out quite alright and makes up by other useful features that are missing in Oxygen for templating.

Things to keep in mind in Bricks:

• There is no Catch All Template concept (with Inner Content) that others inherit from.
• A Template of type “Header” will automatically apply sitewide. No need to set conditions. It is possible to select a Page/Template and set this header to not appear.
• A Template of type “Footer” will automatically apply sitewide. No need to set conditions. It is possible to select a Page/Template and set this footer to not appear.
• Conditions can be set inside a Template to specify where all it should apply.
• Let’s say you created a “Page” Template and set it to apply to all Pages. Then you edit a particular Page say, “Sample Page” with Bricks, you would expect this Page to appear like how you designed it in the editor. But it will be rendered using the Page Template. You would need to edit the Page Template and adjust the conditions and add an exclusion rule.
• We covered a slightly different way to set up Templating in our Bricks Setup Guide.

It is also possible to apply a Bricks Template in the WP editor for Pages.

Do Code Blocks work similarly?

Out of the box, code execution is not enabled even for admins.

Go to Bricks → Settings → Builder Access and enable Code Execution for Administrator user role.

There are no separate tabs for HTML & PHP, CSS and JS like there is in Oxygen in Bricks.

Code elements in Bricks have a single text area.

PHP can be added by wrapping the code with <?php and ?> tags.

CSS can be added by wrapping the code with <style> and </style> tags.

JS can be added by wrapping the code with <script> and </script> tags.

For the code to actually run, “Execute code” for the Code element should be toggled on.

If you are making changes to existing code, make sure you first press CTRL / CMD + R or click the Refresh button for the changes to apply before saving your Page/Template.

Custom CSS for elements

It is possible to add custom CSS for elements in Bricks and in a way that is actually better than Oxygen.

In Oxygen, we are already inside the current element’s scope.

In Bricks, we have the freedom to refer to the current element using %root% keyword and are not forced to being inside the element.

%root% refers to the current ID or class and can be its own selector or be a part of a complex selector.

Why is there no preview for custom fields?

Go to Bricks > Settings > Builder.

Toggle “Render dynamic data text on canvas” on.

—

Let us know in the comments if you have any questions on Bricks equivalent features of Oxygen.