Need help? We've got your back.

Find advice and answers for everything

Back

Category: Website Builder 2.0

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.



image



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.



image



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.



image



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



image



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.



image



image



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. 



image



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



image



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



image