Adding the first section

First, define the purpose and location

Before you click to add, define the purpose of the section: will it be a top notice, a content band, an addition alongside the main content, or a lower part above the footer? Based on this, select a zone above the mainbox, inside it, in the sidebar, or below the mainbox.

Step-by-step procedure

1. Open the Grid tool. In the list, identify the mainbox and the area where you want to insert the section.
2. Use the controls to add a row in the corresponding zone: above the content, inside, in the sidebars, or below the content.
3. The editor activates a prepared row, or creates a custom section after they are exhausted. The new row will appear in the list as well as an overlay on the canvas.
4. Select the row and set the number of positions. For a standard new row, you can use presets or manual values 1–12; desktop presets are displayed only in the desktop view.
5. Check the responsive widths. A new position usually has a width of 12 on mobile and tablet, while the desktop layout tries to use the available space.
6. Go to Modules and drag and drop a module into the highlighted active position. A simple click will not insert the module.
7. Wait for the autosave and check the new section in Preview as well as on mobile.

What the editor prepares automatically

A new position gets a safe name, default visibility, and responsive values. If the row previously contained a single desktop position with a width of 12, adding a second one may create a practical 2+10 split. In other cases, the editor uses the remaining space or sets a full width of 12.

Automatic calculation is a default helper, not the final design. In the right-hand Grid inspector, check all three ranges. For mobile, stacking at a width of 12 is usually safe, while desktop can be split according to the actual content of the inserted modules.