: remaining for test
Magezon Page Builder

Rows and Columns

Build Magento 2 page structure with responsive Rows and Columns.

How Rows and Columns Work

Build any layout with Magezon Page Builder according to our Bootstrap principles. Start by adding rows and columns, then add any desired content inside.

Site structures are set up to give you more convenience with up to 12 columns within a line. Plus, it’s able to add more columns and stack them together within a row. You can even set rows to be at full width or full height and set columns to be at equal height. 

Another thing that should be noted is that all the rows and columns created by Magezon Page Builder are 100% responsive. You can even adjust column width to fit each screen size.

In the following row, we configured it into 3 equal columns as well as added some designs to make them more attractive. We have Design Options tab that allows customizing margin and padding, border, adding image and video background with parallax effects and more.

Gaps Between Columns

The gaps between columns can be set within the row editor. By default, all the gaps are set 0 at the beginning. However, these numbers can be changed as you want without limit.

Intuitive Design Options

Be an artist creating your own artworks using the Design Options tab. It is available to any Magezon Page Builder elements with full configurations that let you set up size (margins, paddings, borders, etc), colors or background images.

Set Columns In Equal Height

In order to keep the blocks at the same height without the effect of long contents, columns inside are set equally. With this function, columns are positioned in equal height which makes it more eye-catching to look at.

Full Width Section Rows

Defining a full-width section row means you let the row to spread out over the whole screen. This example demonstrates a simple full-width row with parallax background. Especially, no code is needed to generate this stunning layout. Just with some simple clicks, the parameters of the row are changed and converted into such breathtaking section.

Multiple Background Options

Define how your background looks using images, video or colors. Full colored palette gives you space for creation, paint your own beautiful section. Set its position and decide whether to use advanced parallax effect or not. Plus, mouse parallax is also considered a smart way to keep your visitors excited while surfing around your site.

Margins, Paddings and Borders

No more tiring coding HTML, format the Margins, Paddings and Borders within the easy intuitive Magezon Page Builder interface. Fast and handy editor of Design Options tab lets adjust configurations instantly. Enter the exact number to define the space between items.

Equal Column Options

Equal Height columns allows creating rows with columns positioned in equal height. With equal height columns you can build blocks that will not be affected by amount of content and align to the biggest column.

Layout Options

Thanks for intuitive interface it is possible to quickly change row layout in terms of number of columns available. And the best part that you won’t loose your content as it will be automatically transferred from one column to another.

4 Row Types Supported

The row appearance can be easily shaped using 4 following types: Contained, Full Width Row, Full Width Row and Content, Full Width Row and Content (No paddings)
As each type serve specific kind of page, select one that fits your landing page's style most.
When you turn on the full height row mode for a row, it turns to be the spotlight of your shop. The content inside (image, video, heading, etc) can spread to the whole screen and grab the visitors' attention at a glance.

Contained

Full Width Row

Full Width Row and Content

Full Width Row and Content (No paddings)

100% Responsive - Mobile Ready

Magezon Page Builder offers 16 existing column sizes which let configure any page layout from basic to advanced. Need something more intuitive? Adjust the sizes at ease with drag and drop interface. Whenever you drag your mouse on adjusting a column's width, the others' are automatically changed based on the overall width of the site.
Set your columns perfectly responsive in 5 popular devices: Desktop, Tablet Landscape, Tablet Portrait, Mobile Landscape, Mobile Portrait. Wanna hide these columns on specific ones? Just put a tick on the desired devices.

16 Column Sizes

Magezon Page Builder offers 16 existing column sizes which let configure any page layout from basic to advanced. Need something more intuitive? Adjust the sizes at ease with drag and drop interface. Whenever you drag your mouse on adjusting a column's width, the others' are automatically changed based on the overall width of the site.

Set your columns perfectly responsive in 5 popular devices. Wanna hide these columns on specific ones? Just put a tick on the desired devices.

One Full

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed tincidunt magna ac arcu consequat, et bibendum tortor tristique. Aenean sed erat scelerisque nunc sodales cursus ac et orci. Phasellus tempor nunc non nibh dapibus facilisis. In ullamcorper purus purus, vitae tincidunt enim.

One Half

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna.

One Half

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna.

One Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

Two Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

Three Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

One Fourth

Lorem ipsum dolor sit amet consectetur.

Four Fifth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex.

One Fifth

Lorem ipsum dolor sit.

Two Fifth

Lorem ipsum dolor sit amet, consectetur adipicing elit sed do eiusmod tempor.

Three Fifth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

One Sixth

Lorem ipsum dolor sit

Five Sixth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Design Options

Design options are always ready with every Magezon Page Builder' element, like no others. Take full control over rows & columns' look with a full-colored palette and design functions. Select the device to set the configuration for each mode. Size of border, padding, and margin can be set easily by entering the exact numbers. Choose your favorite background's type then set its color, images. Last, add any effect you like to make your layout stunning.

Customize The Background Color & Opacity

TAKE CONTROL OF YOUR WEBSITE

Add Background Images

TAKE CONTROL OF YOUR WEBSITE

Dashed Border Style

TAKE CONTROL OF YOUR WEBSITE

Solid Border Style

TAKE CONTROL OF YOUR WEBSITE

Dotted Border Style

TAKE CONTROL OF YOUR WEBSITE

Single Border Top

TAKE CONTROL OF YOUR WEBSITE

Single Border Right

TAKE CONTROL OF YOUR WEBSITE

Single Border Bottom

TAKE CONTROL OF YOUR WEBSITE

Single Border Left

TAKE CONTROL OF YOUR WEBSITE

Borders On All Sides

TAKE CONTROL OF YOUR WEBSITE

Border Radius

TAKE CONTROL OF YOUR WEBSITE

Full Control of Border Radius

TAKE CONTROL OF YOUR WEBSITE

Columns Offer Both Padding & Margin Controls In Any Valid CSS Unit

25px Padding

Columns Offer Both Padding & Margin Controls In Any Valid CSS Unit

50px Padding

Columns Offer Both Padding & Margin Controls In Any Valid CSS Unit

100px Padding

Animation Options

Tons of CSS animation effects supported from basic to advanced promise to give your site a unique look. Set the duration and delay settings as you need and make them move your way!

Bounce

Zoom In Down

Bounce In Right

Zoom In Left

Appear from center

Fadein Down

Why Everyone Loves Magezon Page Builder?

Fast and Easy

Intuitive Interface

No Coding Skills

Mobile Ready

SEO Friendly

Magento WYSIWYG Integration

50+ Elements

Best Support

BUY MAGEZON PAGE BUILDER FOR JUST $169

Copyright © 2013-present Magento, Inc. All rights reserved.