Nicepage Builder Interface

With Nicepage 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-ribbon-1.jpg

Ribbon

Nicepage Ribbon provides provides quick access to Basic Theme Settings, Controls and Responsive Settings and Page Management, options to Undo/Redo changes and user menu.

upage-ribbon-2.jpg

Basic Theme Settings

The left side section of the Nicepage Ribbon includes basic Page Properties like Page Title and Metadata and general Theme Settings: Colors, Fonts, Typography.

Settings

Page Properties The Page Properties section lets you to specify the page attributes for SEO.

Theme

Colors The Colors section lets you to specify the Color Set for the website and choose desired coloring scheme.
Fonts The Fonts section lets you setup website Fonts scheme.
Typography The Typography section lets you setup website Typography scheme.
Customize Styles The Customize Styles section lets you customize typography and fonts of the Text, Headings and Blockquote elements separately.

Add Controls

The Add Controls section provides a list of available controls that can be added into the Sections.

upage-ribbon-3.jpg

Page Management and Responsive Settings

The right side panel of the Nicepage Ribbon includes basic tools like Undo/Redo, Page Preview and Publish options, Page Responsive Settings and User Menu,

Page Responsive Settings help to customize the appearance of each Section in different responsive modes separately.

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

Right Panel

Displays the styling options of the selected control as well as Grid and Section where the selected control is located.

Section

The Section tab provides available Variants and Coloring Schemes for the selected Section.

upage-ribbon-5.jpg

Grid

The Grid tab appears when you select the control inside Grid layout or the grid cell. Here you can control the styling of the selected grid cell, hide/show this cell in different Responsive Modes and change the whole grid layout if needed.

upage-ribbon-6.jpg

Dynamic Tab with the Settings of the selected Control

This Dynamic tab appears when you click on the control in the Editor Area and provides styling options for this selected control. In Addition to this you can hide this control in the different responsive modes using corresponding settings.

upage-ribbon-7.jpg

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

### Nicepage Builder Interface With **Nicepage 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-ribbon-1.jpg! ### Ribbon **Nicepage Ribbon** provides provides quick access to Basic Theme Settings, Controls and Responsive Settings and Page Management, options to Undo/Redo changes and user menu. !upage-ribbon-2.jpg! #### Basic Theme Settings The left side section of the Nicepage Ribbon includes basic Page Properties like Page Title and Metadata and general Theme Settings: Colors, Fonts, Typography. **Settings** <table class="table table-condensed"> <tr> <td> [Page Properties](page:1122) </td> <td>The Page Properties section lets you to specify the page attributes for SEO.</td> </tr> </table> **Theme** <table class="table table-condensed"> <tr> <tr> <td>[Colors](page:1018)</td> <td>The Colors section lets you to specify the Color Set for the website and choose desired coloring scheme.</td> </tr> <tr> <td>[Fonts](page:1019)</td> <td>The Fonts section lets you setup website Fonts scheme.</td> </tr> <tr> <td>Typography</td> <td>The Typography section lets you setup website Typography scheme.</td> </tr> <tr> <td>Customize Styles</td> <td>The Customize Styles section lets you customize typography and fonts of the Text, Headings and Blockquote elements separately.</td> </tr> </table> #### Add Controls The **Add Controls** section provides a list of available controls that can be added into the Sections. !upage-ribbon-3.jpg! #### Page Management and Responsive Settings The right side panel of the Nicepage Ribbon includes basic tools like Undo/Redo, Page Preview and Publish options, Page Responsive Settings and User Menu, **Page Responsive Settings** help to customize the appearance of each Section in different responsive modes separately. ### 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! ### Right Panel Displays the styling options of the selected control as well as Grid and Section where the selected control is located. #### Section The **Section** tab provides available Variants and Coloring Schemes for the selected Section. !upage-ribbon-5.jpg! #### Grid The **Grid** tab appears when you select the control inside Grid layout or the grid cell. Here you can control the styling of the selected grid cell, hide/show this cell in different Responsive Modes and change the whole grid layout if needed. !upage-ribbon-6.jpg! #### Dynamic Tab with the Settings of the selected Control This Dynamic tab appears when you click on the control in the Editor Area and provides styling options for this selected control. In Addition to this you can hide this control in the different responsive modes using corresponding settings. !upage-ribbon-7.jpg! ### 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!