Thursday , June 20 2024
Home > Magezon Extensions > Magezon Page Builder Tutorials > Spacing Columns by Gap Type and Column Gap in Magezon Page Builder

Spacing Columns by Gap Type and Column Gap in Magezon Page Builder

Spacing Columns by Gap Type and Column Gap in Magezon Page Builder

When you create multiple columns in a row by Magezon Page Builder, if you take a little notice of General Tab in that row, there exist 2 parameters namely Column Gap and Gap Type. They are the key factors that decide the spacing between columns, which helps readers find your page more spacious and easier-to-follow. In today’s post, you will get a chance to dive in them deeper. Now, let’s get started!

1. Column Gap

In Row settings, Column Gap enables you to create extra space between columns within a row. Specifically, the default value of the gap in Magezon Page Builder is 20. Of course, you can adjust any value as desired.

general setting column gap
Default value of Column Gap in Magezon Page Builder

2. Gap Type

Our General setting has 2 Gap Types: Margin and  Padding. Here are some things you should keep in mind. Margin allows us to make space between columns. Meanwhile, padding is what defines space inside a column. Now, let’s check a quick example. To clearly see the difference between these two types of gap, set Column Gap at 100 for both.

Here is the General setting when Gap Type is Padding:

Setting Padding Gap
Setting Padding as Gap Type

Have a look at its front-end result:

Result of setting Padding as Gap Type
Result of setting Padding as Gap Type

And here is the back-end when applying Margin as Gap Type:

Setting Padding as Gap Type
Setting Margin as Gap Type

Below you can see the its front-end result:

Result of setting Margin Gap
Result of setting Margin as Gap Type

Obviously, Margin creates room between every single column while in case of Padding, the Column Gap is the distance between the 2 elements inside each of them.  Remember this! If you want to separate the columns in your page for a clear visual look, Margin as Gap Type does do the trick.

You may also like:
How to Reverse Column Order in Magezon Page Builder
How to Create Equal Height Columns in Magezon Page Builder

Wrap It up

Gap Type and Column Gap are two important elements you should know well when designing your own page. Hope this blog post has provided you with a certain amount of knowledge related Padding and Margin in Magezon Page Builder. Have any idea about this topic? Just feel free to share with Magezon in the comment section below. Definitely, we will together have more interesting talks soon after.

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 Nga Dong

Nga Dong
A content writer and marketer in Magezon

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