Skip to content

Grid designer

The Grid Designer allows you to create exactly the grid structure you want withing the boundaries of a Section.

When opening the Grid Designer, you will see a blank canvas that’s composed by an underlying grid of 12 columns, by 6 rows. Hover the mouse over the grid, and drag around the grid to create content areas.

The content areas you design will be laid out exactly in the way you compose them in the Grid Designer, both backend and frontend.

After you’ve added an Area to the composition, you’ll be able to edit its boundaries by dragging its borders, or you can place it somewhere else on the grid by dragging it. Keep in mind that Areas can overlap each other: you’ll be able to control which one is on top, by tweaking the Stack order parameter in the Area editing panel, under the Display tab.

Whenever you add an Area to your composition, a reference to it will be displayed in a sidebar placed on the right of the Grid Designer interface. Use that sidebar to either remove Areas from the composition, or drag the Areas up and down to determine the markup order of the contents of the custom-designed Section.

After you’re done editing the grid, click on the “Insert in page” button, to consolidate the layout.

Editing a section

If you have composed a Section with the Grid Designer, you can select it and then activate its Edit mode, by clicking on the pencil icon in the block toolbar.

When in Edit mode, the Grid Designer interface will be shown again, allowing you to edit/delete the previously created Areas, or add new ones to the composition.