Page Builder

Page Builder is a Javascript script which allows you to quickly create a new page inside your admin.

It's an easy way to customize your admin content.

Go to Page Builder

Choose your sections layouts

Before adding elements such as form, table or portlets, you have to choose your layout.

In layout tab, you can choose between various predefined grid layout: 1, 2, 3 columns...
If you need a more specific layout, click on last option "Custom Layout".

Choose your content elements

To add new element inside your page, you have to choose an element type. There are various types available:

Portlets: basic portlet, with header, footer, header and footer.

Text & Image: here you can add image, various title and a paragraph. If you click on title, you will be able to edit it. If you click on paragraph, a more advanced editor will appear to edit text.

Forms: here all basic form elements are available. If you add an element, you will have to choose your form layout: vertical or horizontal.

Tables: you can choose a title, number of columns and rows that you want and table style: striped, hover, bordered or basic.

Widgets: various widgets are available: todo list, weather, google maps, profil, calendar...

Edit text and icons

If you click on text elements, you will be able to change text.

Titles: with double click, a simple editor will appear with various options: size, font weight, color...

Paragrah: with double click, a more advanced editor will appear with new options such as line height or adding picture.

Reorder / Remove section

Reorder sections: you can reorder each section by clicking on left side of each section and dragging it.

Remove sections: you can remove section by clicking on left side on cross icon.

Export your page template

When you have added all content you want, you are ready to export your page template in order to integrate it in your project.

Just click on button Export Page Template at the bottom of the page.

A modal window will appear and you will be able to choose your file name.

Once you have click on save, your template will be downloaded in the same folder than other html pages.

If you are in your-custom-admin folder, your page will be donwloaded here. If you are in admin/layout1 folder, idem, it will be downloaded in admin/layout1 folder.

Indentation level

If your file is not perfectly indented or if you want to change it, you can use online tool.

To do that, just copy and past your page content into free online tool such as http://www.freeformatter.com/html-formatter.html.

You want new feature or more options? Don't hesitate to send us a message via our Themeforest Page or directly by email at support@themes-lab.com.