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

Nga Dong July 9, 2020 Magezon Page Builder Tutorials Leave a comment 1,876 Views

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!

Demo Magezon Page Builder

1. Column Gap
2. Gap Type
Wrap It up

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**

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.