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

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

Dashboard

For convenience, you can run Online Editor in a new browser window.

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. Click the New Website button to create a new site.

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.

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

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.

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 a block's icon list of available operations.

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.

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.

Theme Settings

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

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 used on your website, including Headings, Texts, Lists, Buttons, etc.

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.

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

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. Change the Height by dragging the Block markers if needed.

Use Grids

Add the Grid Element, which you can use to 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.

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.

Switch Cells by clicking and dragging the Move icon on the small bar on the Cell's 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 tIconolor for the Cell.

Add Icon

Click on thIconue 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.

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 Iconton* Element.
2. Choose any of the Button presets.
3. Edit the Button Text.
4. Make all letters in Uppercase.

Additionally, you can choose properties in the Property Panel, such as 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.

You can move the heading, icon, and 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.

Responsive Modes

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

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

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.

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