Boxes - Add, Edit, Move and Delete

What is a box?

A box is a segment of content i.e. element(s) within the body of a webpage. A box in the  Advanced Layout Editor (back end) is equivalent to a row in the front end editor. Using the Advanced Layout Editor allows for more manipulation and movement of the boxes.

Add a new box

To add a box:

• Click on the "Add Box" button at the bottom of the editing panel and drag the box to the layout editor. To determine where and how to place it, refer to "Move a Box" further down this page.

Edit a Box

To edit a box you will need to access the box properties tab. More information is found in Box Properties.

Move a Box

To move a box:

• Hold the drag button and move up or down to place the box in your chosen position.

There are numerous positions to add or move a box. Look at the images below to see where you can place it.

• To add/move above a box, hover to the top of an existing box

• To add/move below a box, hover to the bottom of an existing box

• To add/move to the left of a box, hover to the left of an existing box

• To add/move to the right of a box, hover to the right of an existing box

Note: You are using the padding of the box to pick up the position. If nothing appears when you hover over it, your padding is not wide enough. Change the settings of your padding and amend when finished.

Result:

• You can place boxes within boxes

Result:

• Eventually you can add, edit and move multiple boxes to attain your required layout