How to place the widget

To place the widget on your page, first click on the widget inside the Drag and Drop panel (or Clipboard) and without releasing the mouse button move the widget to the preferred location.

You will notice that as you are moving your widget, a yellow box appears every time the editor detects a suitable place where you can drop your widget. The box is there to guide you and help you determine where your widget will be placed once you release the mouse button. You will also notice that the other widgets are reacting to the movement by adjusting their positions to accommodate the new widget arrangement. 

Once you release the mouse button and the widget is placed to the new position, you can adjust the relative proportions of the widgets in the same row (if there is more than one widget in the same row). Whenever you have more than one widget in the same row you will notice a blue dashed vertical line which acts as a separator between 2 or more widgets. You can move this line to the right or left to change the width of the widgets. By default, the widgets will take equal width relative to the others in the same row.