Back
Using Elements with Non-Grid Settings
The builder 2.0 lets you use a grid system to easily drag and position elements accurately. But, you can also use the non-grid setting on different elements and position them anywhere on the screen, without depending on the grid layout. It is used to create specific shapes and position elements freely.
You can use the non-grid option on the following elements: Text, Button, and Image. If these are within any built-in blocks or templates, you can use the non-grid setting for those too.
Let’s use an Image element. Click the Elements menu on the left sidebar and then click Image. Drag and drop it into the builder.

Now, the element is dependent on the grid layout initially. You have to turn on the non-grid setting. To do that, right-click on the element and open the editing panel. First, upload an image from gallery.

Now, turn on the non-grid option from the Settings menu. Notice that the size of the element instantly changes when you turn the non-grid on because you now have full power over defining the size of the element.

You can set the exact width and height of the element in your own choice of unit such as px, percentage, em, and rem.

Use the top, right, left, and bottom options to position your element freely anywhere on the screen. This lets you position the element outside of the main grid layout, which is usually not possible.


Whether these values are relative to the section or the screen depends on the Position Type you are using. You can set different position types such as absolute, relative, fixed, sticky, and static.

As for giving shapes, you can use the border, corner radius, shadows, and other options from the Styles tab.

From the advanced tab, add animations to the element if you want.
