Building a Layout

Pages edited in the Page Builder follow layouts from Design > Layouts. It isn’t currently possible to create a new page to edit the layout by Page Builder editor. New layouts are created programmatically by themes and other extensions.

Adding a Row

Rows form the overall structure of your page layout. These are the first components you should add to your page layout. To add a row, click on the Block Manager icon on the right and drag 1 column component to the page.


You can choose the row layout by selecting the components with different numbers of cells in the row, the cell ratio.

2 columns - each column 50% of the width

3 columns - a 3-cell layout using an equal ratio

2 & 3/7 columns - a 3-cell layout using a golden ratio from right to left. The narrow column on the left and wider on the right

Deleting a Row

To delete a row, select row and hover over the icons in the right corner above that row. An icon will appear with options to Move, Duplicate or Delete. Click on the “Delete” icon

Manually Editing Cell Widths

The cell widths can be manually adjusted in two ways.

It can be done by dragging the dividing bar between two cells. Drag the bar left or right to increase and decrease the cell’s width.

You can also adjust the cell widths outside the edit dialog, in the Style Manager view > General > Layout.

Adding a block

The blocks or components can be dragged from the Blocks Manager to the selected cell in your layout.


If you are making significant changes to Page Builder content, we recommend that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

AbanteCart, all rights reserved. 2024 ©