Tuesday , May 21 2024
Home > Magezon Extensions > Magezon Page Builder Tutorials > Live Preview Mode in Magezon Page Builder: All You Need to Know

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

What you should know about the live preview mode in Magezon Page Builder

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.

live preview function

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
preview empty layout in CMS Page Builder
  • 1 column: Your page view is set within a column, including header and footer but not full-width.
preview one column layout in CMS Page Builder
  • 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 left bar live preview in Magezon Page Builder
  • 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.
2 columns with right bar live preview
  • 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.
3 columns live preview in Magezon Page Builder
  • 1 column full width: your content will be one column full-width.
1 column full width live preview

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.

scroll down your page in the back-end

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

choose your desired layout

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.

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 Laura Cao

Laura Cao
Laura graduated from Foreign Trade University with a bachelor’s degree in Business English and is currently serving as a content marketer at Magezon. She indulges in reading and writing everything about Magento. In her spare time, gardening and hanging out with friends are her area of interest.

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