Adjusting Margins & Padding in Fusion Builder Live
With Fusion Builder Live, we have made it even easier to adjust margins and padding than ever! Watch the video, or read on to see how easy it is to control your layout with padding and margins.
Adjusting Margins & Padding via Element Options
There are two ways to adjust margins or padding in Fusion Builder Live. These can be set on every container and column. Let’s start with inputting values manually.
To input a value manually, simply edit the container or column and go to the Design Tab. At the very bottom of the Element Options are the Padding and Margin options. Here you can input your desired values (Margins have top and bottom values, while Padding has Top, Right, Bottom and Left values). These values can be input in any valid CSS unit, including pixels and percentages.
Adjusting Margins & Padding Visually
An alternative way to edit the margins and paddings is to do it visually. When you edit a container or column in the Front-End builder in Avada Live, you will see colored handles at the top and bottom, and left and right of the selected container or column. These can be used to visually drag the margins and paddings out to the desired values.
As you drag, a colored area will appear, showing you the area that will be padding or margins. Correspondingly, the values in the Container or Colum Margins or Padding option will change as you drag. To save your changes, just click the Save button on the Toolbar.
The Blue handles are for padding. To increase the padding, drag the handles IN towards the middle of the column or container. To decrease padding, drag them OUT.
The Purple handles are for Margins. To increase the margins, drag the handles DOWN. To decrease margins, drag them UP.
To understand more about paddings and margins, please read our How To Control Spacing With Avada document.