![Create multi column layouts](https://blog.magezon.com/wp-content/uploads/2019/07/create-multiple-columns-magezon-page-builder-1024x537.png)
Multiple columns can be used to create a clear layout for your webpages, thus making it easier for customers to scan and read. In this article, we’ll show you how to create multi-column layouts in Magezon Page Builder.
To get started, you first need to download and install Magezon Page Builder. Please refer to this installation guide for details.
After finishing, every WYSIWYG editor in your store backend will be replaced with new builder interface (that you can activate/deactivate):
![Magezon page builder interface](https://blog.magezon.com/wp-content/uploads/2019/07/new-builder-interface-1024x584.png)
Create Multi-Column Layouts
You can quickly add multiple columns as seen in the below image.
![Quickly add multiple columns](https://blog.magezon.com/wp-content/uploads/2019/07/quickly-add-multiple-columns-1024x581.png)
Or for more layout options, you can follow these steps:
- Click the plus icon in the top bar. A popup with all elements will appear. Click to add Row element to the builder.
![Add row element](https://blog.magezon.com/wp-content/uploads/2019/07/add-row-element-1024x589.png)
- Hover over the element and you’ll see a top bar like this:
![Top bar when hovering over element](https://blog.magezon.com/wp-content/uploads/2019/07/top-bar-1024x588.png)
- Move your mouse to Row > Row Layout and choose your wanted layout.
![Row layouts](https://blog.magezon.com/wp-content/uploads/2019/07/row-layout-1024x688.png)
Customize Columns
1. Add Elements
To add elements to a column, you can follow either of 2 following ways:
– Inside each column, you can see a plus icon.
Click on this to show the popup containing all elements. Choose your element to add to the column.
![Add element to column with plus icon](https://blog.magezon.com/wp-content/uploads/2019/07/add-element-to-column-with-plus-icon-1024x588.png)
– Or you can hover over the column. Then move the mouse to Column in the bar. Click Add Element.
![Add element to column with Add Element option](https://blog.magezon.com/wp-content/uploads/2019/07/add-element-to-column-with-add-column-option-1024x581.png)
2. Rearrange & Resize Columns
a. Rearrange columns
To do this, hover over the column. Then move the mouse to drag drop icon next to Column in the bar. After that, drag and drop the column to your wanted positions.
![Rearrange columns](https://blog.magezon.com/wp-content/uploads/2019/07/rearrange-columns-1024x594.png)
![Columns after being rearranged](https://blog.magezon.com/wp-content/uploads/2019/07/columns-after-being-rearranged-1024x586.png)
b. Resize Columns
You can resize columns using drag & drop like this:
![Resize columns](https://blog.magezon.com/wp-content/uploads/2019/07/resize-column-1024x589.png)
3. Custom Options for Columns
When hovering over the column and move the mouse over Column in the bar, you will see a drop-down with the following options:
![Column custom options](https://blog.magezon.com/wp-content/uploads/2019/07/column-custom-options-1024x596.png)
- Add Element: add element to the column.
- Edit: click to open column settings in a popup.
![Column settings](https://blog.magezon.com/wp-content/uploads/2019/07/column-settings-popup-1024x690.png)
- Design Options: open Design Options tab in the popup.
![Design options tab](https://blog.magezon.com/wp-content/uploads/2019/07/design-options-tab-1024x688.png)
- Duplicate: duplicate column.
- Copy: this function doesn’t apply to column.
- Remove: remove column.
When hovering over the row, then moving the mouse over Row in the bar, you can:
– Click Edit to open row settings in a popup.
![Open row settings](https://blog.magezon.com/wp-content/uploads/2019/07/open-row-settings-popup-1024x628.png)
There, please pay attention to:
![Customize column equal height and gap](https://blog.magezon.com/wp-content/uploads/2019/07/customize-column-equal-height-and-columns-gap-1024x748.png)
- Column Equal Height: set equal height for all columns in the row. If this function is turned on, Content Position field will appear. You can choose to display content in the column on top, middle or bottom.
- Columns Gap: set the gap/distance between columns.
![Column equal height and column gap](https://blog.magezon.com/wp-content/uploads/2019/07/column-equal-height-and-columns-gap-1024x620.png)
– Add Column: add another column to the row.
![Add column](https://blog.magezon.com/wp-content/uploads/2019/07/add-column-1024x619.png)
![Column added](https://blog.magezon.com/wp-content/uploads/2019/07/column-added-1024x623.png)
To Sum up
In this article, you’ve looked at a detailed guide on how to create multi-column layout for your Magento 2 websites. If you have any questions and need support, feel free to leave a comment below.
![](https://blog.magezon.com/wp-content/uploads/2023/01/magezon-page-builder-conversion-block-7.png)
Try FREE Magezon Page Builder demo today
Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.