PageBuilder - Layouts

Layouts are exactly what they sound like – the look and layout of a webpage. You can choose from a handful of standard layouts, or you can create your own from a blank page.

On this Page

What's a Layout

At its most basic, a layout is a collection of components on a webpage, that provides a framework for the page you are working on. It's a starting point for new pages that consists of an ordered grouping of components and a snapshot of the content associated with those components at the time the layout was created.

With PageBuilder, you are able to choose from three ready-made layouts, or create your own, from a blank layout, to tailor your webpage to your exact desired look. Previously created layouts offer you a much faster way to create new pages, because you are not starting from scratch.

In PageBuilder, the layout of your page is represented in the Component pane by the physical order of the components within the pane. Dragging a component to a higher or lower location on the page, changes the layout in the Page Preview pane.

Layout

Layouts: In the image above, the colored component on the left, corresponds to the component on the webpage, right.

Choosing a Layout

You choose a layout when you create a new page. For specifics on creating a new page, click here.

Essentially, you want to choose a layout that most closely reflects the desired end result for the page you are creating. For example, if you are creating a new Storefront for a holiday sale, when prompted to choose a layout when creating the new page, you could select the Storefront layout.

Creating a Layout

One of the most powerful aspects of PageBuilder is the ability to copy an existing layout as a starting point for a new layout. In fact, the more you use PageBuilder, and the more layouts you create, the faster it is the next time you create a new page.

To do this, from the Content Management batch list, click the page you want to copy to open it in PageBuilder.

When the page opens, click the more options icon next to the Components title in the Component pane. In the drop down, select Save As New Layout.

pb_layouts_pic_1.png

In the box that opens, give the layout a name and code, then click Save. The layout is saved to the library.

Then, navigate back to the Content Management batch list, then click Create Page.

Give the new page a name, then click Choose Layout. Select the new layout and then click Create Page.

pb_layouts_pic_2.png

Next Section

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.