Concept

The Pavilion Page Builder replaces the default OpenCart module/layout functionality with an advanced system which allows you to control the entire page content and style. The concept is similar to Visual Composer for WordPress.

Technically, the code is based on a extended responsive Bootstrap-like CSS grid system. Every page on the frontend is divided into areas and you can insert custom content for each area.

OpenCart uses layouts to define on which pages to show your module. Pavilion uses much more flexible technique called ‘scopes‘. A scope represents a page, or a group of pages on which a single area is displayed. For example the home page is a ‘single page scope’ and ‘All categories’ scope is responsible for every product category.

page_builder_legend

1Page Builder Menu

2Page Builder Areas – each tab holds the content of an area in the frontend. You can check the layout scheme here

3Scopes dropdown – choose the page (or group of pages) that you will modify the content for

4Theme blocks – theme built-in custom blocks

5Module blocksOpenCart modules exported to be used in Page Builder

6System blocks – default OpenCart functionality (OpenCart page fragments)

7Row actions – From left to right: edit / custom column ratio / duplicate / delete

8Block actions – From left to right: edit / duplicate / delete

Proceed to the next page to learn more about the website areas.


Page Builder Areas

The OpenCart system defines 4 positions to put your modules – Content Top, Content Bottom, Column Right and Column Left.

Page Builder Areas are placeholders for dynamically generated content from the Page Builder tool similar to OpenCart positions. There are 5 areas in Pavilion where you can place custom blocks – intro, content, left column, right column and footer.

builder_areas

Each Page Builder Area is organized into rows and columns (do not confuse the row columns with the sidebars of the site), where you can insert content blocks.

Before you assign content (rows and blocks) to a given area, you must decide where to display it. The combo box (scopes dropdown) in the upper right corner of each area in the page builder contains all of the possible pages you can attach content to. A single rows and blocks configuration can be shown on multiple pages – it depends on the scope (combo box option) you choose. The scopes represent easy and powerful inheritance rules which can save you time when building content.


Rows

Rows are used to divide your page into logical regions. Each row can have up to 6 columns. Columns are centered inside the row and span up to the maximum website width. They are invisible elements and are only used to store content blocks.

[Control panel]  ->  [Live website]


Content Blocks

Content blocks stand for styled boxes that are placed within the site’s grid. They are like an extended version of the OpenCart modules enriched with advanced styling and position options. Each block can have unique settings depending on its type.

There are three types of blocks you can use:

  • Theme Blocks – custom blocks that come packed with the Page Builder. Some of them are similar to default OpenCart modules (featured products, latest products, bestsellers, specials) but with far more features and customization options.
  • Module blocksthese are are actually OpenCart modules that can be used in the Page Builder just like the theme blocks. In order to use default or third party OpenCart module in Pavilion page builder, you need first to import it.
  • System blockssystem blocks are parts of default OpenCart functionality and depend on the page type.