Bricks allows you to add your own custom code (CSS, JavaScript, HTML, PHP) to various parts of your website.
Global CSS & JavaScript
You can add your own Custom CSS & Custom JavaScript globally from your WordPress dashboard under Bricks > Settings > Custom Code.
Custom scripts (JavaScript) can be added in three different (document) locations:
- Header scripts: Adds your scripts right before the closing </head> tag. This is where you want to copy & paste tracking scripts, etc.
- Body (header) scripts: Adds your scripts right after the opening <body> tag.
- Body (footer) scripts: Adds your scripts right before the closing </body> tag.
Page-Specific CSS & JavaScript
To apply custom CSS & JavaScript to a specific page edit this page with Bricks, and go to Settings > Page Settings > Custom Code. There you can add your custom CSS & JS that should only be applied to the page you are currently editing.
Element-Specific Custom CSS
You can extend the styling of any element inside the builder by adding your own custom CSS to it.
First, edit the element to which you want to add your own custom CSS.
Then under the “Style” tab open the “CSS” control group.
There you can find the Custom CSS setting.
Use the root placeholder to target the currently editing element. Bricks automatically converts this root placeholder to your element ID.
If you are adding custom CSS while having a global class selected then root acts as a placeholder for the class (instead of the ID).
The screenshot on the right illustrates how to add a 1px width red border to an element.
CSS Code Completion via Emmet
Since version 1.3.6 you can use CSS abbreviations to write your CSS even faster. Instead of writing margin: 10px, simply type m10 and hit the TAB key.
https://docs.emmet.io/css-abbreviations/
Code Element (PHP, HTML, CSS, JS)
The “Code” element allows you to execute your own code (PHP, HTML, CSS & JS) anywhere on any page.
By default, the code added to the Code element is displayed as a code snippet.
In order to execute your code, you need to first enable “Code Execution” for the appropriate user role or user in your WordPress dashboard under “Bricks – Settings – Builder Access” (see the screenshot below).
Make sure to only enable code execution for users & user roles you trust 100%.
How to add PHP & HTML code to your element
Once enabled you can start adding the “Code” element wherever you want to execute your code. You’d usually execute PHP & HMTL code, as CSS & JS can be added much easier via the solutions outlined above.
Once you’ve added the Code element to your page, you can add your custom code to it (as shown in the screenshot below).
To run/execute the code in the builder, enable the “Execute Code” setting.
Make sure to click the “Run Code” icon at the top-right of the code editor once you’ve finished editing your executable code.
HTML Code Completion via Emmet
Since version 1.3.6 you can use abbreviations to generate your HTML structures much faster via a familiar CSS-based syntax.
Abbreviation: #header (+ TAB key)
Generates: <div id="header"></div>
Abbreviation: h$[title=item$]{Header $}*3
Generates:
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>