Thu. Nov 7th, 2019

Host your Website

Read and learn

FatCow Plan for $3.15/mo. only

How to create a website in Nicepage Website Builder pnline

4 min read

Visit our website:
Read this article:

Subscribe to find more information:

Nicepage Website Builder allows creating any website design in minutes. The product is available online, there are also versions for desktop, WordPress, and Joomla!

Creating a Page

Let’s start the introduction to Nicepage, open the dashboard with websites and pages, and add a new website. You can create pages from scratch.

Website Builder. You can build using the Powerful Website Builder. All those pages are not pre-made and generated on-the-fly automatically.

User Interface

Top Bar. There is a Top panel containing the Page List, the Website Settings, the Theme Settings, the Add Menu at the top center.

Navigator. The Website Navigator is located to the left. It makes it easy to select and to operate sections. The Header and the Footer, shown on all website pages, are also placed in the Navigation.

Section Operations. Each section has a menu, in which the Duplicate operation copies the current section.

Editor. The central part of the Nicepage is the Section Editor. Here you can add, move, position and align various controls.

Properties. While choosing elements in the Editor, central part, we see the Properties shown in the Property Panel to the right.

Theme Settings

All modern websites and themes have the Global Settings for Colors, Fonts, and Typography.

Colors. Let’s review the Theme Settings in details, and start with the Colors.

Fonts. Now let’s select Fonts. For our Font Schemes we have picked the most popular Google Fonts and Combinations.

Typography. Finally, we will define the Typography. The Typography Sets change the text appearance in a page or a website.

Adding Sections

Sections are the main building blocks of the modern web design. Nicepage allows using pre-designed sections, as well as building sections from scratch.

Pre-Designed Sections. Let’s Add a New Section. There are over thousand of pre-designed sections to be used, and each of those sections has a unique design and a layout.

Functional Sections. Assume, that you need a functional section, such as contact form, or address with a map. It is very easy to add such section.

Section Builder. Let’s add a section using the Builder. We are adding a new section, and selecting the Builder.

Creating a Section

Add Menu. Let’s assume that you don’t like any of the offered variants, and you have a page or a section that you drew in any graphic editor, for example, Adobe Photoshop.

Using Grids. To create this section we need to add a grid to which we will add the texts and images.

Working with Cells. It is simple to change the cell background from Image Fill to Color Fill. We also can change the crop of the background image.

To copy a cell or a control, drag the source a cell or a control while holding the CTRL key. To remove the control or the whole cell content, select the cell, then press the DELETE key.

Adding Controls to a Cell

Adding Controls. Now, we will change the fill color of the empty cell. Next, we will be adding the content to the cell.

Working with Texts. Add the Heading. Change the Heading. Change the text size and the spacing between letters.

Alternative Adding. Add Button using an alternative way, clicking the plus to the right of the cell container. The Button also has presets. Let’s select one of the presets.

Align in Cells
Guiding Magnets. Alignment and Consistency are important design principles. Moving controls we see guides, and sizes in the red boxes, which help to follow those principles.

Container Highlighting. Containers are highlighted with borders, therefore it is always clear in which container controls are located. The content in the cell may be auto-aligned horizontally and vertically.

You see, the result is achieved maybe easier and quicker, even than drawing the same section, let’s say, in Adobe Photoshop. We have completed adding sections.


Responsive Modes. No modern design is considered complete if it is shown incorrectly on all types of modern devices, including mobile ones. In Nicepage, all this is taken into account.

Editing Support. In addition, for all Responsive modes all editing features are supported. For example, you can change the cropping of the image and change the Heading size, Hide / show any control, a cell, any element for a desired device.

Preview and Publish

Previewing. You can see the result in the “Preview”. If you are satisfied with everything, you can Publish your website. Before publishing, you can check the Website Settings, for example, for the SEO.

Publishing. Click “Publish”. After the publication, you open the finished web page.

We hope you have enjoyed this introduction to Nicepage.

Copyright © All rights reserved. | Newsphere by AF themes.