Adjust margins and padding settings

Placement and configuration of BeaverBuilder modules (elements)We briefly touched on the margin and padding settings. These are simple settings, but if you don't define the rules and proceed with the creation, you can end up in a difficult situation where adjacent elements cancel each other out, so be sure to check them carefully.

Set initial margin and padding values

Margins and padding can be specified individually for each module, column, and row. However, it is tedious to specify them one by one, so specify the initial values for each module, column, and row according to the design of your site.

The initial settings are done in the global settings. Launch BeaverBuilder on any page. Select Global Settings from the pull-down menu in the upper left.

If you open the General tab of the global settings, you will see that the column (row) padding is set to 20px, the module margin to 20px, and everything else is set to 0px as the default. Change these to suit your design. Again,There are icons, so specify the values for each device size to ensure responsiveness.

The advantage of specifying and managing the initial values in the global settings is that if you want to change the overall margins (padding) later as you proceed with the construction, you can change them all at once. It is a hassle to adjust each module one by one, so be sure to check the global settings carefully.

Individual and collective value specification

Next to the input fieldBy clicking the icon, you can input and manage the four values for the top, bottom, left, and right all at once.

Responsive design for each device size

Next to the input fieldClicking the icon allows you to set values for each device size: large devices (PCs), medium devices (tablets), and small devices (smartphones). The "R" key on your keyboard becomes the shortcut key, and the device size will change each time you press R.

Preview your layout before publishing

Once you've finished editing, use the preview function to check the actual screen. Click Preview Layout (shortcut key: P) from the pull-down menu in the upper left of the screen.

The preview also has a device switching button so you can check the site on desktop, tablet, or smartphone.

You can return to the editing screen by clicking the Continue Editing button.