User Interface

With Nicepage Website Builder, you can customize each Block on the page, including the content editing, layout changing, modifying 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.png

Top Bar

The Top Bar provides quick access to Basic Theme Settings, Controls, Responsive Settings, Page Management, Undo and 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 Elements

The Add Elements section provides a list of available controls that you can add into Blocks.

upage-ribbon-3.jpg

Page and Responsive Settings

The right side panel of the Nicepage Ribbon includes essential 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 Block in different responsive modes separately.

Page Navigator

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

upage-doc-18.png

Property Panel

The Property Panel has the styling options of the selected Element, Grid, and Block.

Block Tab

The Block Tab provides available Variants and Coloring Schemes for the selected Block.

upage-ribbon-5.jpg

Grid Tab

The Grid tab appears when selecting the control inside the 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

Selected Element Tab

You will see the tab for the Selected Element that appears dynamically when you click on the Element in the Editor Area. It contains the styling options for the selected Element. In Addition, you can hide this control in the different responsive modes using corresponding settings.

upage-ribbon-7.jpg

Block Editor

The Editor is the main area where you can see and adjust page Blocks. In this area, you can add or remove new controls and sections, move existing controls using various rules to help you position controls properly, and many other things.

Zoom

Use Zoom control to zoom in and out Sections for more convenience in work.

Moving Elements

You can move Elements using various rules:

upage-doc-21.png

Hiding Elements

You can also hide and show Elements in just one click:

upage-doc-22.png

## User Interface With **Nicepage Website Builder**, you can customize each Block on the page, including the content editing, layout changing, modifying 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.png! ## Top Bar The **Top Bar** provides quick access to Basic Theme Settings, Controls, Responsive Settings, Page Management, Undo and 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:4579) </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 Elements The **Add Elements** section provides a list of available controls that you can add into Blocks. !upage-ribbon-3.jpg! ## Page and Responsive Settings The right side panel of the Nicepage Ribbon includes essential 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 Block in different responsive modes separately. ## Page Navigator The Left Panel displays all Blocks available on the page. Here you can Remove or Duplicate the existing Block. Add New Block or change the order of Block by simply dragging Blocks in the panel. !upage-doc-18.png! ## Property Panel The Property Panel has the styling options of the selected Element, Grid, and Block. ### Block Tab The **Block Tab** provides available Variants and Coloring Schemes for the selected Block. !upage-ribbon-5.jpg! ### Grid Tab The **Grid** tab appears when selecting the control inside the 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! ### Selected Element Tab You will see the tab for the Selected Element that appears dynamically when you click on the Element in the Editor Area. It contains the styling options for the selected Element. In Addition, you can hide this control in the different responsive modes using corresponding settings. !upage-ribbon-7.jpg! ## Block Editor The Editor is the main area where you can see and adjust page Blocks. In this area, you can add or remove new controls and sections, move existing controls using various rules to help you position controls properly, and many other things. ### Zoom Use **Zoom** control to zoom in and out Sections for more convenience in work. ### Moving Elements You can move Elements using various rules: !upage-doc-21.png! ### Hiding Elements You can also hide and show Elements in just one click: !upage-doc-22.png! ##