Summary

  • Overview
  • Video Tutorial
  • Dashboard
  • User Interface
  • Theme Settings
  • Add Panel
  • Use Grids
  • Responsive Modes
  • Preview And Publish

Overview

The Nicepage Online Editor allows the creation of any website in minutes. Nicepage is also available for Desktop, WordPress, and Joomla 3 and 4.

Video Tutorial (v.1)

NOTE: The following video tutorial was made with one of the previous versions. We are working on updating the videos.

Dashboard

You can run Online Editor in a new browser window for convenience.

  1. If you have opened the Editor, click on the Sites link at the top.
  2. On the Dashboard, you can add and manage your Websites and Pages.
  3. Create a new site by clicking the New Website button.

dashboard.png

We recommend you start with the predesigned examples made by professionals. You can filter the design samples by topics, scroll through the thumbnail previews, and start with any design.

website-designs.png

User Interface

Let's review the essential parts of the User Interface of the Nicepage HTML Website Builder. The Nicepage's User Interface consists of the following areas.

  1. Top Bar
  2. Quick Access
  3. Page Navigator
  4. Page Editor
  5. Property Panel

nicepage-ui.png

Top Bar

On the Top Bar are the Sites link to the Dashboard, Current Page, Find Everything Search to the left, the Editor and Responsive Modes at the center, and service icons, including Save, Preview, Publish and Export, Settings, and Profile to the right.

Page Navigator

The Page Navigator is located to the left. It makes it easy to select and manage Blocks. You can also find the Header and Footer on all website pages here.

block-options.png

Manage Blocks

In the Page Navigator, you can quickly move Blocks, changing their order on a web page. Click on the Options Icon to open the list with the available operations for a Block.

NOTE: You cannot move the Header and Footer.

Design Editor

In the Design Editor in the central area, you can add, move, align, and edit Blocks, Containers, and Elements.

design-editor.png

Edit Properties

Choose any Element in the Editor, and go to the Property Panel to the right to edit all supported properties. At the top of the Property Panel are Tabs, allowing you to switch between the Element, Container, and Block properties.

property-panel.png

Theme Settings

All modern websites and themes have the Global Settings for Colors, Fonts, and Typography. You can edit in the Theme Settings of your website project.

theme-settings.png

Edit Colors

Start with the Colors. In reality, not many websites use more than five colors. Therefore, you can use the Color Presets to apply colors to all Website Elements.

Edit Fonts

You can also use the Font Scheme. The Font combinations use the most popular Google Fonts. You can customize Font Schemes.

Headings & Text

You can stylize the Elements, including Headings, Texts, Lists, Buttons, etc. that will be used on your website.

Add Panel

To add Blocks and Elements, click the blue Add icon on the Quick Access Pane to open the Add Panel. Start by adding Blocks to build your web design.

add-panel.png

You can also click the New Block button to open the Add Panel. You can start with the Block Presets Block Designs or start from the Blank Block, building from scratch.

new-block-button.png

Block Presets

You can add Block Presets, like the Text on the Image, Features, Contact Form, Map, etc. You can select Blocks by Category and Style. After adding a Block Preset, you can see its properties in the Property Panel to the right.

Block Designs

Add a New Block. Click on the 10000+ Designs link in the Add Panel. There are over a thousand predesigned Blocks, and we add more with each update.

Click on the Category link at the top of the Designs and filter the list by a Category if needed.

Blank Block

If you do not find suitable premade Blocks, you can start from scratch by adding a Blank Block.

  1. Click the New Block button.
  2. Click on the Block link in the Add Panel
  3. Select the Blank Block.
  4. If needed, Change the Height by dragging the Block markers.

Use Grids

Add the Grid Element to which you can add Text and Images.

  1. Add a New Block.
  2. Click on the "Grid" link, and
  3. Select the Grid with Different Columns
  4. Resize the Grid.
  5. Also, align the Grid using the magnetic guides.
  6. See the Sizes in the red boxes.

add-grid.png

Edit Grid Cells

You can select and modify the Grid Cell.

  1. Select a Grid Cell.
  2. Go to the Property Panel to the right.
  3. Click on the Image Background Icon to enable it for the Cell.
  4. Click on the Image icon and change the image for the Cell Background.
  5. Change the Image Fit for the Cell Background.
  6. Add Spacing by changing the Between Cells property.

You can click on the Collapse icon to make the image a part of the content and the Expand icon to make it the Image Background again.

collapse-image.png

Switch Cells by clicking and dragging the Move icon on the small bar on the Cell's left top. While dragging, you see the blue highlight border for the destination Cell.

To replace the Cell, drag the source Cell while holding the ALT or CTRL key. To delete an Element or entire Cell, press the DELETE key.

Select the empty Cell. Click the Fill icon and choose the Color for the Cell.

Add Icon

Click on the blue Add icon to add content to the Cell.

  1. Add the Icon Element.
  2. In the open dialog, search for "idea."
  3. You see the Style Tabs for filtering the search results.
  4. Select the All Tab.
  5. Сhoose the Lightbulb icon.
  6. Go to the Property Panel.
  7. Change the Icon Color.

Add Texts

  1. Open the Add Panel by clicking the Add icon.
  2. Choose Text -> Heading 2.
  3. Modify the Font Size in the Context Toolbar.

You can go to the Property Panel and select the Heading 2 default from the **Styles**to undo.

  1. Add the Text Element from Add Panel -> Text -> Text.
  2. Select a part of the added Text
  3. Make it Bold and Italic with the Context Toolbar.
  4. Select another part of the Text
  5. Add a Hyperlink by clicking on the Link icon.

Add Button

  1. Click the Add Icon to add the Button Element.
  2. Choose any of the Button Preset.
  3. Edit the Button Text.
  4. Make all letters in Uppercase.

Additionally, you can choose properties in the Property Panel, for example, the Letter Spacing.

Align Elements

Alignment and consistency are essential principles of web design. Dragging Elements, you see the Magnetic Guides and Sizes in the red boxes, which help you to follow those principles.

magnetic-guides.png

You can move the Heading, Icon, Text — any element, into the Block above the Grid and another Cell. Containers are marked with borders, and you can see where Elements are placed.

You can click on the Icons in the Alignment section of the Property Panel to align Elements horizontally and vertically.

align-options.png

Responsive Modes

A website made in Nicepage is displayed correctly on all modern devices and is convenient for reading. All Responsive Modes have the same editing features. Therefore, you can customize your website for all mobile views.

responsive-modes.png

You can Hide Elements, Cells, and Blocks for the desired device by clicking the corresponding icons in the Hide on Devices property in the Property Panel.

hide-on-devices.png

Preview And Publish

In the Publish and Export dialog, select the Website option and click the Publish Website button.

  1. You can see the result in the Preview button on the Top Bar.
  2. If you like what you see, click the Publish and Export button to publish your website.

publish-dialog.png

After the publication, click the Open button to open the published web page.

## Summary - Overview - Video Tutorial - Dashboard - User Interface - Theme Settings - Add Panel - Use Grids - Responsive Modes - Preview And Publish ## Overview The Nicepage [Online Editor](/Editor/Siteboard/#/dashboard) allows the creation of any website in minutes. Nicepage is also available for [Desktop](/download), [WordPress](/download), and [Joomla](/download) 3 and 4. ## Video Tutorial (v.1) **NOTE:** The following video tutorial was made with one of the previous versions. We are working on updating the videos. ## <iframe width="600" height="340" src="https://www.youtube.com/embed/vs9XOGeoQzA" title="How to start with Online Editor" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Dashboard You can run [Online Editor](/Editor/Siteboard/#/dashboard) in a new browser window for convenience. 1. If you have opened the Editor, click on the **Sites** link at the top. 2. On the **Dashboard**, you can add and manage your **Websites** and **Pages**. 3. Create a new site by clicking the **New Website** button. ## !dashboard.png! We recommend you start with the predesigned examples made by professionals. You can filter the design samples by topics, scroll through the thumbnail previews, and start with any design. !website-designs.png! ## User Interface Let's review the essential parts of the User Interface of the Nicepage [HTML Website Builder](/html). The Nicepage's User Interface consists of the following areas. 1. Top Bar 2. Quick Access 3. Page Navigator 4. Page Editor 5. Property Panel ## !nicepage-ui.png! ### Top Bar On the **Top Bar** are the Sites link to the Dashboard, Current Page, Find Everything Search to the left, the Editor and Responsive Modes at the center, and service icons, including Save, Preview, **Publish and Export**, Settings, and Profile to the right. ### Page Navigator The **Page Navigator** is located to the left. It makes it easy to select and manage **Blocks**. You can also find the Header and Footer on all website pages here. !block-options.png! ### Manage Blocks In the **Page Navigator**, you can quickly move **Blocks**, changing their order on a web page. Click on the **Options** Icon to open the list with the available operations for a **Block**. NOTE: You cannot move the Header and Footer. ### Design Editor In the **Design Editor** in the central area, you can add, move, align, and edit **Blocks**, **Containers**, and **Elements**. !design-editor.png! ### Edit Properties Choose any **Element** in the Editor, and go to the **Property Panel** to the right to edit all supported properties. At the top of the Property Panel are **Tabs**, allowing you to switch between the Element, Container, and Block properties. !property-panel.png! ## Theme Settings All modern websites and themes have the Global Settings for Colors, Fonts, and Typography. You can edit in the **Theme Settings** of your website project. !theme-settings.png! ### Edit Colors Start with the **Colors**. In reality, not many websites use more than five colors. Therefore, you can use the Color Presets to apply colors to all Website Elements. ### Edit Fonts You can also use the **Font Scheme**. The Font combinations use the most popular Google Fonts. You can customize Font Schemes. ### Headings & Text You can stylize the Elements, including **Headings**, **Texts**, **Lists**, **Buttons**, etc. that will be used on your website. ## Add Panel To add Blocks and Elements, click the blue **Add** icon on the Quick Access Pane to open the **Add Panel**. Start by adding Blocks to build your web design. !add-panel.png! You can also click the **New Block** button to open the Add Panel. You can start with the Block Presets Block Designs or start from the Blank Block, building from scratch. !new-block-button.png! ### Block Presets You can add **Block Presets**, like the Text on the Image, Features, Contact Form, Map, etc. You can select Blocks by Category and Style. After adding a Block Preset, you can see its properties in the **Property Panel** to the right. ### Block Designs Add a New Block. Click on the **10000+ Designs** link in the Add Panel. There are over a thousand predesigned Blocks, and we add more with each update. Click on the Category link at the top of the Designs and filter the list by a Category if needed. ### Blank Block If you do not find suitable premade Blocks, you can start from scratch by adding a Blank Block. 1. Click the **New Block** button. 2. Click on the **Block** link in the Add Panel 3. Select the **Blank Block**. 4. If needed, Change the **Height** by dragging the Block markers. ### Use Grids Add the Grid Element to which you can add Text and Images. 1. Add a **New Block**. 2. Click on the "Grid" link, and 3. Select the Grid with Different Columns 4. Resize the Grid. 5. Also, align the Grid using the magnetic guides. 6. See the Sizes in the red boxes. ## !add-grid.png! ### Edit Grid Cells You can select and modify the Grid Cell. 1. Select a Grid Cell. 2. Go to the **Property Panel** to the right. 3. Click on the **Image Background** Icon to enable it for the Cell. 4. Click on the **Image** icon and change the image for the Cell Background. 5. Change the **Image Fit** for the Cell Background. 6. Add Spacing by changing the **Between Cells** property. You can click on the Collapse icon to make the image a part of the content and the Expand icon to make it the Image Background again. !collapse-image.png! Switch Cells by clicking and dragging the Move icon on the small bar on the Cell's left top. While dragging, you see the blue highlight border for the destination Cell. To replace the Cell, drag the source Cell while holding the **ALT** or **CTRL** key. To delete an Element or entire Cell, press the **DELETE** key. Select the empty Cell. Click the **Fill** icon and choose the Color for the Cell. ### Add Icon Click on the blue Add icon to add content to the Cell. 1. Add the **Icon** Element. 2. In the open dialog, search for "*idea.*" 3. You see the Style Tabs for filtering the search results. 4. Select the **All** Tab. 5. Сhoose the Lightbulb icon. 6. Go to the Property Panel. 7. Change the Icon **Color**. ### Add Texts 1. Open the **Add Panel** by clicking the Add icon. 2. Choose **Text** -> **Heading 2**. 3. Modify the **Font Size** in the **Context Toolbar**. You can go to the **Property Panel** and select the Heading 2 default from the **Styles**to undo. 1. Add the Text Element from **Add Panel** -> **Text** -> **Text**. 2. Select a part of the added Text 3. Make it **Bold** and **Italic** with the Context Toolbar. 4. Select another part of the Text 5. Add a Hyperlink by clicking on the **Link** icon. ### Add Button 1. Click the Add Icon to add the **Button** Element. 2. Choose any of the Button Preset. 3. Edit the Button Text. 4. Make all letters in Uppercase. Additionally, you can choose properties in the Property Panel, for example, the **Letter Spacing**. ## Align Elements Alignment and consistency are essential principles of web design. Dragging Elements, you see the **Magnetic Guides** and **Sizes** in the red boxes, which help you to follow those principles. !magnetic-guides.png! You can move the Heading, Icon, Text — any element, into the Block above the Grid and another Cell. Containers are marked with borders, and you can see where Elements are placed. You can click on the Icons in the **Alignment** section of the Property Panel to align Elements horizontally and vertically. !align-options.png! ## Responsive Modes A website made in Nicepage is displayed correctly on all modern devices and is convenient for reading. All Responsive Modes have the same editing features. Therefore, you can customize your website for all mobile views. !responsive-modes.png! You can **Hide** Elements, Cells, and Blocks for the desired device by clicking the corresponding icons in the **Hide on Devices** property in the Property Panel. !hide-on-devices.png! ## Preview And Publish In the **Publish and Export** dialog, select the Website option and click the **Publish Website** button. 1. You can see the result in the **Preview** button on the Top Bar. 2. If you like what you see, click the **Publish and Export** button to publish your website. ## !publish-dialog.png! After the publication, click the **Open** button to open the published web page. ##