Sections and Pages

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.

What is a Box.png

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.



  • You can place boxes within boxes

Add a new box inside an existing box.jpg


Add a new box inside an existing box(2).jpg

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

Multiple Boxes inside each other.jpg

Deleting a box

  • Click on the box you want to delete
  • Click the bin button on that box
  • Click 'OK' to confirm the deletion


Note: If another box is in the way as you try to delete, move your box to the bottom and then try deleting.