50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Bricks Survival Guide for Oxygen Users

Updated on 4 Aug 2022

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.5 RC

Table of Contents

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. This Container is a div inside having a fixed width (1140px by default).

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 equivalent or perhaps better: Query Loop.

Select a Container/Block/Div 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.

We have a detailed walkthrough here.

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 Root container padding and Root container width at the minimum.

See our Getting Started with Bricks article for more details.

How do I use CSS Grid?

As of Bricks v1.5 RC there is no GUI i.e., visual controls for applying CSS Grid on a container.

But we can do it manually for Posts element and any container on which query loop is enabled.

For example to set an automatic responsive grid using CSS Grid for a container go to STYLE → CSS → Custom CSS and add:

root {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}

More coverage:

How can I set up Conditions?

As of Bricks v1.5, there is no GUI i.e., visual controls for applying conditions on elements.

Bricks does provide a filter for this though.

You can copy and paste the relevant example from the bricks/element/render article though and modify as needed.

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.


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

Leave your comment