How to start with Nicepage Online Editor
Visit our website: https://www.nicepage.com.
Read this article: https://nicepage.com/doc/article/1318....
Subscribe to find more information:
/ nicepage
/ nicepagecom
/ nicepageapp
Overview
We are delighted to present our new product, Nicepage Website Builder, which allows creating any website design in minutes. The product is available online, and there are also versions for desktop, WordPress, and Joomla!
Create a New Page
Let's start introducing Nicepage, open the dashboard with websites and pages, and add a new website. You can create pages from scratch.
Run Online Builder
You can build using the Powerful Website Builder. All those pages are not pre-made and generated on-the-fly automatically. You can always use the pre-designed examples made by designers. We can start with any of these samples. Let's choose this one.
Editor Interface
Let's review the essential UI elements of Nicepage HTML Website Builder.
create-new-site.png
Top Bar
A Top panel contains the Page List, the Website Settings, the Theme Settings, and the Add Menu at the top center. There are Responsive Modes, the Preview, and then Publish to the right.
Page Navigator
The Website Navigator is located to the left. It makes it easy to select and operate blocks. The Header and the Footer are also placed in the Navigation, shown on all website pages.
Edit Blocks
The central part of the Nicepage is the Block Editor. Here you can add, move, position, and align various elements. Working with the Editor is simple. Again, it is easy to work with Microsoft PowerPoint or Apple Keynote. You get the clean code and the responsive HTML in the output.
Modify Properties
While choosing elements in the Editor, central part, we see the Properties shown in the Property Panel to the right. Changing the parameters changes the selected element. Also, in the panels, Tabs can reach the Box or the Block properties.
Theme Settings
Modern websites and themes have the Global Settings for Colors, Fonts, and Typography.
Edit Colors
Let's review the Theme Settings in detail and start with the Colors. In reality, not many websites use more than five colors. Therefore, our palettes are created in a manner that the color variety would allow realizing any color ideas. Let's choose this palette. Now, these colors are available for all elements of the website.
Add More Blocks
Blocks are the main building blocks of modern web design. Nicepage allows using pre-designed blocks, as well as building blocks from scratch. You can also create blocks with the Website Builder.
Use Block Designs
Let's Add a New Block. There is the Block Style list to the left. Switching those styles, you see the set of blocks is changing.
Functional Blocks
Assume that you need a functional block, such as a contact form or address with a map. It is effortless to add such a block. Let's add a new block.
Create a New Block
Add Grid
To create this Block, we need to add a grid to which we will add the texts and images. Select "Grid" and add it to the Block. Shrink the height and width of this grid. Also, we change the location and position of the grid.
Edit Grid Cells
Changing the cell background from Image Fill to Color Fill is simple. We also can change the crop of the background image. Let's add Spacing to separate cells visually. Collapse an image to make it a part of the content, and expand to make it background again.
Adding Elements
Add An Element
Now, we will change the fill color of the empty cell. Next, we will be adding the content to the cell. Start with an Icon, the most commonly used element in the text group design. Let's add an icon to the cell. Click "Add" and select "Icon."
Edit Texts
Add the Heading. Change the Heading. Change the text size and the Spacing between letters. If you do not like the results or you have changed your mind, you can undo changes by selecting the Heading default from the list. Add Text.
Align Elements
Alignment and Consistency are important design principles. Moving elements, we see guides and sizes in the red boxes, which help follow those principles. You can move the Heading, Icon, Text — any element, into the Block above the Grid and another Cell.
Edit In Mobile Views
No modern design is considered complete if shown incorrectly on all modern devices, including mobile ones. In Nicepage, all this is taken into account.
Preview And Publish
Click "Publish." After the publication, you open the finished web page. Working in Nicepage is as simple as in Microsoft PowerPoint or Apple Keynote, and the results are clean code and fully responsive HTML.
We hope you have enjoyed this introduction to Nicepage.