Live Preview Mode in Magezon Page Builder: All You Need to Know

Seeing what you’ve built right from the back-end has never been this easy with the help of live preview mode in Magezon Page Builder. In this blog, I’m eager to reveal all about this amazing function in our Magento CMS Page Builder. And then teach you how to configure the desired view layout for your page.

No more further ado, let’s get started!

What is the Live Preview Mode in Magezon Page Builder?

Live preview is a function that allows web designers to see what they’ve done right from the back-end of Magento CMS Page Builder. In other words, the feature enables you to view your page as if it appears in any type of view layouts without truly setting these layouts. So whenever you make changes on your page, you can take control of how it looks on the front-end immediately. No hitting save button needed.

How Many Types of Live Preview Layout in Magezon Page Builder?

There are 6 layout types of the live preview mode in Magezon Page Builder, I’ll explain what they are right below:

• Empty: Choosing the empty layout means that your page view will not contain header and footer

• 1 column: Your page view is set within a column, including header and footer but not full-width.

• 2 columns with left bar: the page view will be divided into 2 columns. One is your content, the other is a bar on your left-hand side.

• 2 columns with right bar: the page view will be divided into 2 columns, one is your content, the other is a bar on your right-hand side.

• 3 columns:  the page view will be divided into 3 columns, one in the center is your content, the others are bars on your left-hand side and right-hand side.

• 1 column full width: your content will be one column full-width.

You may also be interested: Get to Know CSS Icon Box in Magento 2 Page Builder Open Source Full Height Page With Magezon Page Builder: Sample and Instructions How to Overlap Elements in Magezon Page Builder

How to Configure the View Layout in Magezon Page Builder

After previewing and selecting your most suitable layout (or you can config it before building your page), you probably want to set this layout for your page, right?

In the back-end, scroll down till the end of your page.

Span “design” and choose your desired layout in the “layout” field.

Wrap It up

We hope that this tutorial has brought to you some more valuable information about Magezon Page Builder. If you have any questions, please feel free to comment in the comment section below. Read more about our Magezon Page Builder tutorial to explore millions of tricks for building a stunning website.