uPage Builder Interface

With uPage Builder you can customize each section on the page: edit content, change layout, colors and fonts, make adjustments for different responsive modes.
The Builder comprises Ribbon with various styling options, Left and Right Panels, Page Management options and main Editor Area.

upage-doc-15.png

Page Management Panel

upage-doc-20.png

Page Management Panel includes the option to Preview and Publish Page, make responsive adjustment to the page elements by switching between Responsive modes, Undo/Redo changes and go back to the Dashboard by clicking on the "Pages" option.
In addition to this Page Management Panel includes user login/profile and UI Language menus.

Ribbon

uPage Ribbon provides provides quick access to Basic Page Settings, Controls and Sections Settings and Section Variants and Colors.

image-2017-11-03-16-34-14.png

Basic Page Settings include Page Design options, Color Palettes, Fonts and Typography configuration and Page Properties.

Page Design The Page Design section lets you to easily change the the whole page style in just a few clicks.
Palettes The Palettes section lets you to specify the Color Set for the page and choose desired coloring scheme.
Fonts The Fonts section lets you setup page Typography and Fonts scheme of the page.
Page Properties The Page Properties section lets you to specify the page attributes for SEO.

Controls and Sections Settings include option to Add new Controls, configure Section grid layout and styles. Additionally this section of Ribbon includes dynamic tab which appears after you click on any control in Editor area. The new tab displays the Toolbar with styling options available for the selected control.

upage-doc-17.png

Add The Add option lets you to add new controls like Text, Image, Button into the Section.
Grid With the Grid option you can change and adjust the grid layout of the Section in just a few clicks.
Section Section option provides basic Section settings like top and bottom spacing and fill color and also lets you to flip, duplicate or remove Section.
Dynamic tab
see the "Text" tab on the screenshot above.
Once you click on the control in the Editor area the corresponding tab will appear on Ribbon. This tab indicates what control is currently selected and displays Toolbar with available style settings.

Section Variants and Colors. These two tabs let you to change the Style and Color scheme of the selected Section separately from other section. The available color schemes and layout variations will be displayed in the Right Panel (see below).

Right Panel

Right Panel displays the available Variants and Coloring Schemes for the selected Section.

upage-doc-19.png

Left Panel

The Left Panel displays all Sections available on the page.
Here you can Remove or Duplicate existing Section. Add New Section or change the order of Section by simply dragging sections in the panel.

upage-doc-18.png

Editor

Editor is the main area where you can see and adjust page sections. In this area you can add or remove new controls and sections, move existing controls using various rules which will help you to position controls properly and many other things.
Use Zoom control to zoom in and out Sections for more convenience in work.

Move controls using various rules:

upage-doc-21.png

Hode/Show Group controls in just one click:

upage-doc-22.png

### uPage Builder Interface With **uPage Builder** you can customize each section on the page: edit content, change layout, colors and fonts, make adjustments for different responsive modes. The Builder comprises Ribbon with various styling options, Left and Right Panels, Page Management options and main Editor Area. !upage-doc-15.png! ### Page Management Panel !upage-doc-20.png! **Page Management Panel** includes the option to Preview and Publish Page, make responsive adjustment to the page elements by switching between Responsive modes, Undo/Redo changes and go back to the Dashboard by clicking on the "Pages" option. In addition to this Page Management Panel includes user login/profile and UI Language menus. ### Ribbon **uPage Ribbon** provides provides quick access to Basic Page Settings, Controls and Sections Settings and Section Variants and Colors. !image-2017-11-03-16-34-14.png! **Basic Page Settings** include Page Design options, Color Palettes, Fonts and Typography configuration and Page Properties. <table class="table table-condensed"> <tr> <td> [Page Design](page:1015)</td> <td>The Page Design section lets you to easily change the the whole page style in just a few clicks.</td> </tr> <tr> <td>[Palettes](page:1018)</td> <td>The Palettes section lets you to specify the Color Set for the page and choose desired coloring scheme.</td> </tr> <tr> <td>[Fonts](page:1019)</td> <td>The Fonts section lets you setup page Typography and Fonts scheme of the page.</td> </tr> <tr> <td> [Page Properties](page:1122) </td> <td>The Page Properties section lets you to specify the page attributes for SEO.</td> </tr> </table> **Controls and Sections Settings** include option to Add new Controls, configure Section grid layout and styles. Additionally this section of Ribbon includes dynamic tab which appears after you click on any control in Editor area. The new tab displays the **Toolbar** with styling options available for the selected control. !upage-doc-17.png! <table class="table table-condensed"> </tr> <tr> <td>Add</td> <td>The Add option lets you to add new controls like Text, Image, Button into the Section.</td> </tr> <tr> <td>Grid</td> <td>With the Grid option you can change and adjust the grid layout of the Section in just a few clicks.</td> </tr> <tr> <td>Section</td> <td>Section option provides basic Section settings like top and bottom spacing and fill color and also lets you to flip, duplicate or remove Section.</td> </tr> <tr> <td>Dynamic tab <br> <i style="font-size: 12px;">see the "Text" tab on the screenshot above.</i> </td> <td>Once you click on the control in the Editor area the corresponding tab will appear on Ribbon. This tab indicates what control is currently selected and displays Toolbar with available style settings.</td> </tr> </table> **Section Variants and Colors**. These two tabs let you to change the Style and Color scheme of the selected Section separately from other section. The available color schemes and layout variations will be displayed in the **Right Panel** (see below). ### Right Panel Right Panel displays the available Variants and Coloring Schemes for the selected Section. !upage-doc-19.png! ### Left Panel The Left Panel displays all Sections available on the page. Here you can Remove or Duplicate existing Section. Add New Section or change the order of Section by simply dragging sections in the panel. !upage-doc-18.png! ### Editor Editor is the main area where you can see and adjust page sections. In this area you can add or remove new controls and sections, move existing controls using various rules which will help you to position controls properly and many other things. Use **Zoom** control to zoom in and out Sections for more convenience in work. *Move controls* using various rules: !upage-doc-21.png! *Hode/Show Group controls* in just one click: !upage-doc-22.png!