: remaining for test
Magento 2 Blog Extension
How to Create Equal Height Columns?

How to Create Equal Height Columns?

Creating equal height columns is very important in web design but normally requires CSS to achieve. In Magento 2, this is not an exception. 

However, with Magezon Page Builder, creating layouts with equal height columns has become much easier and faster with no CSS needed. Curious? Let us show you how in this post today. 

https://www.youtube.com/watch?v=6JngpMNrS9Q
Video tutorial

After installing Magezon Page Builder, you can open CMS pages, CMS blocks, category description, product description and short description to view the new builder interface like this: 

Magezon Page Builder interface

Suppose that you create a layout with multiple columns like this:

Create multiple columns
  • Hover over the row, then move your mouse over Row in the top bar. After that, click Edit in the drop-down.
Open row settings
  • In the popup, turn on Column Equal Height. Then Content Position field will show up where you can choose to display content in the columns on Top, in the Middle or at Bottom.
Set equal height columns and choose content position

Remember to save after finishing. 

Now let’s see how a layout with equal height columns looks like on frontend: 

Equal height columns with content on top
Equal height columns with content on top
Equal height columns with content in middle
Equal height columns with content in middle
Equal height columns with content at bottom
Equal height columns with content at bottom
Share

Your feelings about the post?

Drag and Drop in Magezon Page Builder explained
Previous article

Drag and Drop in Magezon Page Builder explained

Related Products

1 comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *
Copyright © 2013-present Magento, Inc. All rights reserved.