The focus frame provides a simple way to adjust the height, width, padding, and margin of any element on your page by clicking and dragging with your mouse. You can also use the focus frame to adjust the column layout of a grid element.

Click any element on the page to select it and activate its focus frame.

The focus frame will show you the current element's margin (shown in green) and padding (shown in blue), and will allow you to adjust the height and width of the element, by grabbing and dragging the small handles at each side of the focus frame. If it's a grid, you can also add columns by clicking at the left or right side.

At each side of the focus frame, you'll see some small "handles". The circular blue handles will allow you to adjust the overall width or height of the element.

As you drag the handle, you'll see a box appear that indicates the current overall dimensions of the element:

The margin is shown as a shaded green area. The margin is the space outside of an element, relative to other elements on that page. Margin values can be defined for the top, bottom, left, and right as a number of pixels or a percentage using the Dimensions Panel. The default value for all margins is zero.

The square green handles at the top and bottom of the focus frame will allow you to adjust the top and bottom margins by dragging. As you drag the handle, you'll see a box appear that indicates the current amount of margin on the element:

The padding is shown as a shaded blue area. The padding is the space inside of an element, relative to the content within it. Padding values can be defined for the top, bottom, left, and right as a number of pixels or a percentage using the Dimensions Panel. The default value for all padding is zero.

The square blue handles at each side of the focus frame will allow you to adjust the top, bottom, left and right padding by dragging. As you drag the handle, you'll see a box appear that indicates the current amount of padding on the element:

If the selected element is a grid, clicking on the left or right side of the focus frame will allow you to add additional columns. You can create up to 15 columns within a grid element.

Columns can be removed from the grid by dragging them back to the left or right edge of the grid element.