Thursday , April 18 2024
Home > Magezon Extensions > Magezon Page Builder Tutorials > How to Create Multiple Columns With Magezon Page Builder

How to Create Multiple Columns With Magezon Page Builder

Create multi column layouts

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.

Video tutorial

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
Image 1: Magezon page builder interface

Create Multi-Column Layouts

You can quickly add multiple columns as seen in the below image. 

Quickly add multiple columns
Image 2: Quickly add multiple columns

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
Image 3: Add Row element
  • Hover over the element and you’ll see a top bar like this:
Top bar when hovering over element
Image 4: Top bar appears when hovering over element
  • Move your mouse to Row > Row Layout and choose your wanted layout. 
Row layouts
Image 5: Row layout options

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
Image 6: Add element to column

– 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
Image 7: Add element to column

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
Image 8: Move columns around with drag & drop
Columns after being rearranged
Image 9: Columns after being rearranged

b. Resize Columns

You can resize columns using drag & drop like this:

Resize columns
Image 10: Resize columns

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
Image 11: Custom options for column
  • Add Element: add element to the column.
  • Edit: click to open column settings in a popup.
Column settings
Image 12: Column settings
  • Design Options: open Design Options tab in the popup.
Design options tab
Image 13: Design options
  • 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
Image 14: Open row settings

There, please pay attention to:

Customize column equal height and gap
Image 15: Column equal height and column gap
  • 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
Image 16: Column equal height and column gap

Add Column: add another column to the row.

Add column
Image 17: Add column to the row
Column added
Image 18: Column added to the row

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.

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.

About Trang Vu

Trang Vu
Min is a content marketer with more than 2-year experience in Magento. She has great patience and high concentration ability to deal with every pressure at work.

Check Also

Copy paste content

How to Copy Content Between Pages or Domains in Magezon Page Builder

When building a website, you will need a consistency in design. It’s the vital key …

Leave a Reply