UI Bakery Interface: Builder Tool

This tool helps you to create application prototype in WYSIWYG (what you see is what you get) mode. Here you can add spaces, delete or correct components and widgets, change their properties (size, status, text, height, etc.) Builder Tool consists of:

  • page management panel;
  • working area;
  • configuration panel;
  • toolbar.

Let’s see components of Builder Tool in details.

Page management panel

The panel where you can manage the pages of your application. Page management panel consists of two tabs: tab “Pages” and tab “Layout”. In the tab “Pages” you can search, add, delete and edit a page of your application. If you need to change the top navigation and sidebar or manage navigation elements of the pages - use tab “Layout”. You can change the navigation for all pages at a time in “General” tab or just for one current page in the tab “Current page”.

Work area

An area where you can build your application prototype using a WYSIWYG approach. The best way to create an application page is to create a layout of the whole page. For this reason, we open a page management panel to choose the proper layout (as illustrated above). After the layout is chosen we can add some spaces by clicking on the orange icon “+”. Once we finished with adding spaces we can put some elements inside spaces by clicking on grey icon “+” situated at the centre of a space.

Configuration panel    

A panel where you can change the properties (size, status, text, height, etc.) of a selected component or widget. Most properties and configurations of the elements within your project are located here. For example, we put inside the space an icon (singular component) to show where it’s properties are reflected.

Toolbar

An action bar that is placed at the top of the page where you can undo/redo the previous action, preview the project, generate and download code and share the project via accessible URL. Also, you can open Page management panel by clicking on the icon “pages” at the top left corner of your screen or go to UI Bakery’s Dashboard by clicking on the button “dashboard” (is placed near button “pages).