Introducing the BEST Opencart Page Builder

Web development changes everyday and its becoming more flexible but simpler for user. Everything becomes visual to make sure any user can master it and that leads us to create Page Builder for Opencart.

In short, Page Builder is to help you create page and layout easier just in minutes with drag and drop feature. The intuitive interface shows you how your page will look like in front page. The page builder supports a lot of widgets so that you can build page your ways.

Simple steps to create layout with Opencart Page Builder

  • Create new block
  • Add columns in the block, drag to re-size it, you can enable Grid to make Bootstrap grid visible to resize columns properly.
  • Assign the widget for the column, once you select the widget, you can configure it your way.
  • Configure the column, adding class, padding, etc.
  • Configure the block: add class, make it full-width or not, etc
  • Replicate the process once you have the layout as expected.

Live Demo or Try it for free – admin/admin

Opencart Page Builder core features

In this blog post, we just show the core features of the Opencart Page Builder, there are a lot of other great features waiting for you to explore.

Intuitive Drag and drop user interface

The best drag and drop Opencart Page Builder comes with intuitive and friendly Admin panel, the visual layout helps you build layout your ways in some simple clicks. You DON’T need to know code. All core features are built in the builder panel. The layout structure in back-end loads your front-page structure but cleaner and simpler.

intuitive back-end

Number of widget types supported

The most important thing in a page is its content. Once we have good layout, we need to add content to each column, block in the layout. Using widgets are the best choice as it’s easy to setup with friendly configuration panel. We support many widget types to help you build rich content page: Static, Image, Gallery, Slideshow, Product List, etc. You can install new widgets and add to the builder layout.

widget support

Bootstrap Grid system

The Page Builder supports Bootstrap 3 so it uses the Bootstrap grid system, if you are new to Bootstrap, check out more info about Bootstrap grid →.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Bootstrap grid

During building, customizing layout, you always need to resize width of columns, now it becomes never easier, just drag the column you want to resize, you can use Bootstrap grid option to have better view.

Responsiveness configuration

The page builder will help you create responsive page/layout. Moreover, you can configure the responsiveness. Find the “Design In” toolbar, you will see list of supported responsive layouts, basically we have Large, Desktop, Tablet and Mobile. Select the responsive layout and configure the blocks in the layout.

responsiveness configuration

Specific configuration for Block and Column

Each bock, column has it own settings to so that you can configure to display the blocks and columns differently. In the Page Builder panel, hit the EDIT button of block or column and you would see the following configuration:

column setting

Add style for each page

In one site, you could have many pages so in case you want the pages have different style, you can add class for each page, add style rule for the class and in front-page, you will have the pages displayed with different styles.

add style for page

Add as many pages as you want

You can create as many pages as you want, hit the Add New button in the top toolbar and add block column, assign widget and configure as you expect for the new page.

add new page


We hope the builder will be helpful for your next projects. If you guy have any suggestion for the builder, please share with us in the comment box below, we are willing to listen and update to make the builder as perfect as possible.

Share this: