BLACK FRIDAY DEAL 🎉 Save up to 30% on all plans!


This area is particularly strong. You can control the native Bricks elements here and set different settings for different user roles. But not only that. You can change the look of Bricks, customize it for your customers and as a highlight: create completely new user roles, to which you can assign settings to adjust Bricks optimally to your customers.

Activate / Deactivate Elements

You can decide whether an element should be active or inactive by pressing the toggle next to the element. Activated elements will be displayed in the Bricks Builder for your set user role. Not activated elements will not be loaded at all.

Keep the changeability

If you remove certain elements for rendering via the official Bricks filter, the element is no longer loaded in the Builder. This ensures good performance. This way you can load only the elements you really use for your development. However, if you are customizing the builder for your client, it may also be useful to hide certain elements without immediately disabling editability. Activate the "Keep The Changeability" mode to do just that. Important: Changing the order in this mode is not supported.

Changing the order

You have the possibility to change the order of the elements for certain user roles. For this you can simply move the elements via drag&drop. The changes are immediately saved and applied. Important: Moving the layout elements (Container, Section, Block, Div) is not possible at the moment.

Create a new User Role

If you want to create a completely new user role, click the "Add New User Role" button. Then you have to enter the following information:

Role Name: Here you enter the name that the user role should have, for example: Customer.

Capatibilities: A user role has different permissions in WordPress. You can automatically copy the permissions from an already existing user role. Alternatively, you can use the “Expert Mode” to set the permissions individually.

Customize the Bricks Builder

You can make Bricks look different for different user roles. You can choose from the following options.

Hide Element Header: Hides the class selection and the tabs “Content” and “Style”.

Hide Tabs: Hides only the element tabs (“Content” and “Style”)

Clean Up Toolbar: Removes some elements from the builder toolbar to make the backend more clean

Custom Builder Theme: With it you can give the builder a completely new look and change the color environment.

Global Classes

Creating global classes has never been so innovative. You can create your own sets of global classes in this section, which will be automatically generated from your entered CSS code. The possibilities are endless! For example, do you like to use CSS frameworks? No problem! Just include the CSS code of the framework and Bricksforge will create global classes from the styles with a little bit of magic. Or write your own sets and use them in different projects. We are very proud of this feature! What all is included?

Bricksforge Class Set

Bricksforge has a small CSS framework built in. We provide you with several classes that you can use to take your design to the next level. For example, typographic styles are included that are based on CSS clamp. So your fonts will always look good! Or you can use the built-in CSS grid to design your content in a 12 column grid. If you don't need the classes, you can always remove them - with the possibility to add them back later.

Activate Global Classes

With the toggle "Activate Global Classes", you can activate or deactivate your global classes globally.

Create New Global Class Set

You can create a new set of Global Classes by clicking the button "New Global Class Set". Here you can pass different values.

Class Set Name: Here you can define a name for your set.

Class Prefix: Define a prefix for your classes here. For example, if you choose “brf”, all your included CSS classes from your code get automatically prefixed with “brf”. (Before: .example {}, After: .brf-example {})

Write your CSS code

Now you see an empty code area and can start writing your CSS code. Click on "Save And Generate Global Classes" to have Bricksforge create global classes from your input. Classes that have been created globally will be displayed as yellow tags.


With Bricksforge you can easily create stunning popups using your own created Bricks Templates. Here I would like to give you some hints. By the way: We do not use any library for the popups. Everything is lightweight and self-programmed.

Create A Popup

You can create a new popup by clicking the button "Create Popup" or "Create your first Popup". After that, you will be shown various setting options, which I would like to discuss in more detail now.


This is the name of your popup and is only used for a better overview. No one will see this ;)


Select a template here, which you have created before. For the template you can select the "Section" area.

Display On

Here you can set where you want your popup to appear. You can choose between "Entire Website" and "Specific Page". If you select "Specific Page", you can select a page in a selection field.

On (Trigger)

What should be the trigger for your popup? You can choose between "Page Load", "Click" and "Scroll Position".

Page Load: Fires when the page is loaded.

Click: Fires on click to a element of your choice

Scroll Position: Fires when the scroll position is greater then a value of your choice

After (Time in seconds)

For some trigger settings you can enter a delay. The popup will appear only after the entered time has elapsed.


You can control how often a popup should be displayed. The number is stored in the local storage. For example, if you enter "5", the popup will not be displayed to the visitor after 5 times.


You can define an entry animation for your popup. The leave animation will automatically be the reverse version of the entry animation. Currently we offer the following animations: Fade In Down, Fade In Up, Fade In Left, Fade In Right, Fade In.

Overlay Color

You can decide for each popup which overlay color it should have. Select transparent if you don't want an overlay color.

Inner Background Color

Decide what background color you want your popup to have. This is not required, because you can specify the background color in the template itself.

Close On Overlay Click

Activating this, the popup will trigger a close when the user clicks outside the popup.

Add Close Button

Activating this, the popup will trigger a close when the user clicks outside the popup. This setting adds an automatic close button that appears fixed at the top right. Tip: Create your own triggers (Open and Close) using the "Popup Trigger" element.

Is Scrollable

If this setting is enabled, your popup will not be centered, but will start at the top. Also, it will be adjusted so that you can scroll well within the popup.


We have developed several tools. Tools are not necessarily additional elements, but work closely with Bricks to extend the functionality.

Custom Fonts Bulk Upload

You never have to upload the custom fonts one by one again. We've expanded the native upload area so you can upload all fonts at once. It is important that you download the fonts in Google Fonts Helper beforehand:

Navigate to the "Bricks -> Custom Fonts" menu. When adding a new font, you will see now the "Upload Google Fonts Bundle" button. Using this button, you can upload a bundle of google fonts downloaded from the Google Webfonts Helper. Alternatively, if you want to create the styles yourself, you can also upload a bundle within a created font style by using the "Upload Font Bundle For This Style" button.

Since Version 0.9.4, you can add not only custom fonts from the Web Font Helper, but also custom ones. It is important that the following informations are included in the file names:

{font-name} {font-weight} {font-style?}.{file-extension}

The order is not important in this case. Here are some examples that would work:

open-sans-400.woff (the font-style is optionally. There is no need to include it)


We have developed a complete animation system based on the powerful library GSAP. This area is very complex, so we would like to simplify it for you here. You can find the documentation for the animations as a separate section under "Animations".


Is your website not officially released yet or are you working on it right now? Put it into maintenance mode with a few clicks and decide the look based on a Bricks template. You can make various settings for this mode, which are basically self-explanatory.


New elements will help you expand the Bricks functionality. We made sure that our elements are nestable wherever it makes sense and that we don't limit you with them, but keep the necessary flexibility.

Flip Everything

This element is not a simple "Flip Card". That would be much too boring and would only limit you! We had a better idea. We created an element that lets you use the power of Nestable Elements to create an element with two sides from all your creative ideas. You can use it to create a regular flip card, as well as elaborate split pages and animations. The possibilities are endless!

Animation Type: You can choose between: Flip, Fade, Fade Shrink, Fade Up, Overlay, Overlay Shrink

Trigger: Change the side of the element by trigger a Click or Hover event

Duration: Define a value for the duration of the animation in seconds

Delay: Define a value for the delay of the animation in seconds

Developer: If you are a developer, you can extend the functionality by writing your own JavaScript code for various events. The following events are currently available: On Animation Start, On Animation Complete, On Animation Reverse Complete. 

Font Awesome Pro

Do you have a license with Font Awesome? Use it to use your Font Awesome Pro icons in the Bricks Builder. Important: You need to enter your Font Awesome Key ID in the settings beforehand. Otherwise you will not be able to use the element.

Icon Style: Choose between: Duotone, Light, Regular, Solid, Thin

Icon Class: Type in the icon class, for example: fa-home

Spin: Activate to spin the icon

Sharp: Activate to enable the Sharp Style of the icon. Currently Font Awesome offers this only for the type “Regular”.

Link: Create a link for your icon

Before And After

This element is super suitable for people who want to show before and after conditions based on pictures. This element is designed for performance and was kept as light as possible. It is also responsive. The images are adjusted in real time. Because we made it a nestable element, you can flexibly extend the content, for example by linking the two images differently.

Width: Set the width of the slider (any unit)

Height: Set the height of the slider (any unit)

Color: The color of the drag handler

SVG: You can define a custom SVG here to replace the basic drag arrow

Popup Trigger

This is a helper for your popups. Basically you can set up popups completely from the menu in Bricksforge. But with the Popup Trigger you have even more possibilities and flexibility. The Popup Trigger is a nestable element that does not contain any content by itself. However, any elements you place inside this element will serve as triggers for your popups.

Type: Select the Trigger Type. You can choose between: “Open Popup” and “Close Popup”.

Popup: Select the popup to which you want to apply the trigger. The Close trigger type automatically closes the popup that is currently open.


Animations are a very strong component of Bricksforge. How you can best use the animations to create impressive pages is what we want to show you here.

Our animations are based on the powerful and leading library "GSAP". This little wonder has a zipped file size of only 23kb, making it a perfect candidate for Bricksforge to create animations that are truly performant. It was also important for us to make the animations responsive as well.

How To Use

You can apply animations to any element. You will find the new group "Animations" in the "Style" tab. There you will find all the settings you can make for your animations. I would now like to go into the different setting options and show you what they stand for and what they do.

Use Animations

This toggle button determines whether animations should be used for the page. Animations will only be applied if this setting is active.


What do you want your animation to trigger? You can decide that here.

Enter Viewport: Triggered when the element to which the animation is applied reaches a certain area of the viewport that you can specify.

Click: Will be triggered as soon as a click event takes place. You can decide on which element the event should listen. For example, you can also trigger an animation when another element is clicked.

Hover: Will be triggered as soon as a hover event takes place. You can decide on which element the event should listen. For example, you can also trigger an animation when another element is hovered.


Choose the method of your animation. Decide how you want your values to behave.

To: Allows you to define the destination values. Example: Animate an element from the current position 300 pixels to the right (x: 100).

From: This is like a backwards animation where you define where the values should START, and then it animates to the current state which is perfect for animating objects onto the screen because you can set them up the way you want them to look at the end and then animate in from elsewhere. Example: Animate an element from top 300px to the current position.

From To: Lets you define both the starting and ending values for an animation (as opposed to from and to animations which use the current state as either the start or end). This is great for having full control over an animation, especially when it is chained with other animations.

Motion Path: Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. The element will follow your specified path exactly and the best part is that the path will adapt to your screen resolution! Note: for performance reasons, this is not done on browser resize, but on window loading. Tip: With the toggle “Use Motion Path Helper” you can draw a path yourself graphically and visually and have the coordinates generated, which you can then easily embed.


Fill your animation with life and feed it with values. You can use the native Bricks settings for this.

Transform: Set different values for the transformation here. You can use anything here to create your animations.

Filters: Animate CSS filters with this setting. Important: Some filters are not yet compatible and will not work. Note: animating filters is very performance-heavy. Keep your animations to a minimum here and rather use transformations to get the best performance.

Custom: You can also create a custom animation here by passing a JavaScript Object. An object to animate an element could look like this: { “opacity”: 0, color: “#FFFFFF” }. You can use almost all CSS values here.

Duration (s): The duration of the animation in seconds

Delay (s): The delay of the animation in seconds

Start Position (Trigger: Enter Viewport required)

Set the start position where your element should start animating when enters the viewport. The default value is "top bottom". This means: The animation starts when the top of the element hits the bottom of the viewport

End Position (Trigger: Enter Viewport required)

Set the end position where your element should finish animating when leaves the viewport.The default value is "bottom top". This means: The animation ends when the bottom of the element hits the top of the viewport

Scrub (Trigger: Enter Viewport required)

Links the progress of the animation directly to the scrollbar so it acts like a scrubber. This will make the animation reverse when you scroll back up. This can be used to create impressive animations.

Show Markers (Trigger: Enter Viewport required)

During development, it is sometimes helpful to have a visual representation of how your animation is behaving. You can get this display by activating "Show Markers". Remember to deactivate the markers afterwards.

Click Target (Trigger: Click/Hover required)

Select a target for your click or hover event.

This Element:Waits for events on the element to which the animation is applied.

Other Element: Here you can specify a selector that waits for events. For example, when you click on one element, you can animate another.

Disable From Breakpoint

You can control when the animation for an element should stop. For example, if you enter the viewport "Tablet", the animation will no longer load on tablets and smartphones.

Motion Path Helper (Method: Motion Path required)

When you enable this, you will be visually shown an SVG path that you can edit with your mouse. After you are satisfied with your path, you can copy it to your clipboard with Copy Motion Path to paste it into the SVG Path area. For customizing the path you can use the following shortcuts:
  • Click and drag on the path itself to move the path.
  • Click on the points of the line to show their handles.
  • Click and drag on the points to move the points.
  • Click and drag on handles to edit how the path curves.
  • Hold Alt and click on the path to add points.
  • Hold Alt and click on a point to toggle it between being “smooth” or a corner.
  • Hold Shift and click on a point to toggle a point’s selection.
  • Click Delete with an anchor selected to delete it.
  • Click the “Copy motion path” button to copy the SVG path data to your clipboard.
  • Hold Ctrl and press Z to undo your last action.

SVG Path (Method: Motion Path required)

The motion path along which to animate the target as string, for example: "M9,100c0,0,18-41,49-65". The easiest way to create the path visually is to use Motion Path Helper.

Auto Rotate (Method: Motion Path required)

Rotates the element in the direction of the path. true matches the angle of the path exactly.

Ignore Parent Dimensions (Method: Motion Path required)

We designed the motion paths to automatically take into account the boundaries of the parent elements. This helps ensure that the animation remains responsive. If you want to disable this behavior to have full freedom, check this option.

Set Position Absolute

This gives the element you are animating an absolute position.

Bricksforge Panel

Coming soon.

Bricksforge Terminal

The Bricksforge Terminal gives you a command line from which you can execute Emmet-style commands. For example you can create several classes at once for one Bricks element or whole element structures. You can open the terminal using the shortcut CTRL + T or by clicking the related icon in the Bricks admin bar.


Create a new element "heading" inside an element "div"
> div > heading
Create a new element "text" inside an element "div". The div element should get the global class "wrapper" and the class "row".
> div.wrapper.row > text
Create a container element with two childs: div + block
> container > div + block
Create a div element with 5 text elements inside
> div > text*5
Add a global class "my-class" to an existing element
// First select the element, then open the terminal and run:
Add multiple classes to an existing element
// First select the element, then open the terminal and run:

White Label

With the white label feature you can customize some things to your desired UI. This is especially useful if you use Bricksforge for customer projects. Or maybe you just don't like yellow ;)

Menu Title: Change the name of the menu title which appears inside the “Bricks” Menu.

Appearance: Switch between the Light and Dark mode

Primary Color: Set a color for the UI. All color variations are created automatically.

Logo: Change the logo for the Bricksforge admin area.

Take your Bricks development to the next level

Start with Bricksforge today!