Box / line / column layout

In WebAcappella, elements are organized according to a precise structure:

  • Boxes are the main containers structuring the page.

  • The lines fit directly into the boxes, enabling horizontal organization.

  • Columns are elements like any other (text, image, button) and must be dragged into a line to organize content vertically.

This hierarchy makes it possible to design flexible, adaptive layouts.

Color legend

In WebAcappella’s interface, each element structuring the page is represented by a specific color:

  • Brown for boxes.

  • Pink for the lines.

  • Green for columns.

When an element is selected, it is surrounded by a border of the same color.

Capture showing element colors and framing when selected

Create a new page

  1. Create a new page in WebAcappella.

  2. A box containing a line is automatically placed there.

    ../../_images/step_10.png

Add columns to a row

  1. Each line is divided into 12 notches, making it easy to adjust column widths.

  2. Drag and drop one or more columns into the row.

  3. Repeat the operation to add several columns side by side.

  4. Resize columns by adjusting their proportions.

  5. In each of the columns you create, drag the desired elements (text, image, button, etc.) to occupy the width of the column.

    ../../_images/step_20.png

Adding boxes and lines

  1. You can drag as many boxes as you like onto a single page.

    ../../_images/step_30.png

Practical tips

  • Give priority to a clear structure by using several boxes to organize the page.

  • Use columns to balance the layout, but avoid using too many to overload the mobile display.

  • Regularly test responsive mode to ensure correct display on all screens.