We are very happy to present you our new product, Nicepage Website Builder, which allows creating any website design in minutes. The product is available online, there are also versions for desktop, WordPress, and Joomla!

Creating a Web 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.

quick-start-builder.jpg

Website 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.

User Interface

ui-areas.jpg

Let’s review the basic elements of the Nicepage’s UI.

Top Bar. There is a Top panel containing the Page List, the Website Settings, the Theme Settings, the Add Menu at the top center. To the right, there are Responsive Modes, the Preview and the Publish.

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. You can easily switch sections and change their ordering in the Navigator, except the Header and the Footer. Operations with section are performed easily, the same way it is done in the Microsoft PowerPoint or Apple KeyNote. If you want to delete a section, choose the Delete from the Section Menu. At the very top of the Website Navigator there is a Page Name. Click the Page name to change it. Type a new name, then Save. That’s simple!

Editor. The central part of the Nicepage is the Section Editor. Here you can add, move, position and align various controls. Working with the Editor is simple, again it is as easy as to work with Microsoft PowerPoint or Apple KeyNote. At that, you get the clean code and the responsive HTML in the output.

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 there are Tabs allowing to reach the properties of the container, or the Section.

Theme Settings

theme-settings.jpg

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. In the reality, there are not that many websites that use more than five colors, therefore, our palettes are created in a manner that the color variety would allow realizing of any color ideas. Let’s choose this palette. Now these colors are available for all elements of the website.

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

Typography. Finally, we will define the Typography. The Typography Sets change the text appearance in a page or a website. The selected settings will be used for all texts by default, in addition, these typography elements are selected in the Text Style list. More detailed settings are made in the Heading and Texts.

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. You can also create sections with the Website Builder.

quick-builder-start.png

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. There is the Section Style list to the left. Switching those styles you see the set of sections is changing. If you change your mind, or you don’t like the style you have just selected, you can easily choose another style for your section. Now we select another section styles, and seeing that the section has been changed. In addition, we can modify Spacing between cells.

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. Let’s add a new section, in the dialog select a category and then add a section with the form and the map. After adding the section, if you click the map or the form control you see all available properties in the Panel to the right.

Section Builder. Let’s add a section using the Builder. We are adding a new section, and selecting the Builder. For the section you can search images online, use images from any social accounts or your local folder. Let’s add images from a local folder. Select images for the section. Select needed texts for the section. Then select a style from the generated variants. And, finally, add this section to your page.

quick-start-section-builder.jpg

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. This is the section we would like to add to our site. Let’s add a blank section. If needed, we can change the section height. All added controls are located in the Add Menu to the top. In the Add Menu we see Containers, Basic Controls and Functional Controls.

Using Grids. To create this section we need to add a grid to which we will add the texts and images. Select “Grid” and add it to the section. Shrink the height and the width of this grid. Also we change the location and position of the grid. As you see, all is done very easily, as there are guides, and the sizes in the red boxes that help to align. Let’s replace the images. Images are changed by dragging and dropping an image from the folder or the desktop into the section.

adding-grid.jpg

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. 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. To change the position of the cells, simply drag one cell over another. While dragging a destination container, a cell and a section are highlighted with the border, and there is a tip above the container. Therefore, it is always clear where the control is placed.

copy-cell.jpg

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. Start with an Icon, which is the most commonly used element in the text group design. Let’s add an icon to the cell. Click “Add”, and select “Icon”. In the open dialog, type “Idea” into the search field. We see tabs filtering icon by styles. Select “All” and choose the Lightbulb icon. For the Icon there are the most popular presets, we select the one with the circle. Change the color. Colors used in the Presets are from the palette selected earlier.

adding-icon.jpg

Working with 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 selecting the Heading default from the list. Add Text. Select a part of the text and make it Bold and Italic. Select another part of the text and add a Hyperlink.

editing-text.jpg

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. Change the Button Text, make all letters in the uppercase, make letters smaller, change spacing between the letters and, finally, change the colors. Colors in the presets are used from the selected palette.

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. You can move the Heading, Icon, Text — any element, into the Section above the Grid and into another Cell.

magnetic-guides.jpg

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.

Page Responsiveness

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. The page made with Nicepage is displayed correctly on all modern devices and it is convenient for reading.

responsive.jpg

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 see that working in Nicepage is as simple as in Microsoft PowerPoint or Apple KeyNote, and in the results are the clean code and the fully responsive HTML.

We hope you have enjoyed this introduction to Nicepage.

Please subscribe to Nicepage channel.
Watch more Video Tutorials.

We are very happy to present you our new product, Nicepage Website Builder, which allows creating any website design in minutes. The product is available online, there are also versions for desktop, WordPress, and Joomla! <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/vs9XOGeoQzA?rel=0" frameborder="0" allowfullscreen></iframe></div> ## Creating a Web 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. !quick-start-builder.jpg! **Website 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. ## User Interface ## !ui-areas.jpg! Let’s review the basic elements of the Nicepage’s UI. **Top Bar**. There is a Top panel containing the Page List, the Website Settings, the Theme Settings, the Add Menu at the top center. To the right, there are Responsive Modes, the Preview and the Publish. **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. You can easily switch sections and change their ordering in the Navigator, except the Header and the Footer. Operations with section are performed easily, the same way it is done in the Microsoft PowerPoint or Apple KeyNote. If you want to delete a section, choose the Delete from the Section Menu. At the very top of the Website Navigator there is a Page Name. Click the Page name to change it. Type a new name, then Save. That’s simple! **Editor**. The central part of the Nicepage is the Section Editor. Here you can add, move, position and align various controls. Working with the Editor is simple, again it is as easy as to work with Microsoft PowerPoint or Apple KeyNote. At that, you get the clean code and the responsive HTML in the output. **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 there are Tabs allowing to reach the properties of the container, or the Section. ## Theme Settings ## !theme-settings.jpg! 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. In the reality, there are not that many websites that use more than five colors, therefore, our palettes are created in a manner that the color variety would allow realizing of any color ideas. Let’s choose this palette. Now these colors are available for all elements of the website. **Fonts**. Now let’s select Fonts. For our Font Schemes we have picked the most popular Google Fonts and Combinations. Now we select the Font Scheme. **Typography**. Finally, we will define the Typography. The Typography Sets change the text appearance in a page or a website. The selected settings will be used for all texts by default, in addition, these typography elements are selected in the Text Style list. More detailed settings are made in the Heading and Texts. ## 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. You can also create sections with the Website Builder. !quick-builder-start.png! **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. There is the Section Style list to the left. Switching those styles you see the set of sections is changing. If you change your mind, or you don’t like the style you have just selected, you can easily choose another style for your section. Now we select another section styles, and seeing that the section has been changed. In addition, we can modify Spacing between cells. **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. Let’s add a new section, in the dialog select a category and then add a section with the form and the map. After adding the section, if you click the map or the form control you see all available properties in the Panel to the right. **Section Builder**. Let’s add a section using the Builder. We are adding a new section, and selecting the Builder. For the section you can search images online, use images from any social accounts or your local folder. Let’s add images from a local folder. Select images for the section. Select needed texts for the section. Then select a style from the generated variants. And, finally, add this section to your page. !quick-start-section-builder.jpg! ## 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. This is the section we would like to add to our site. Let’s add a blank section. If needed, we can change the section height. All added controls are located in the Add Menu to the top. In the Add Menu we see Containers, Basic Controls and Functional Controls. **Using Grids**. To create this section we need to add a grid to which we will add the texts and images. Select “Grid” and add it to the section. Shrink the height and the width of this grid. Also we change the location and position of the grid. As you see, all is done very easily, as there are guides, and the sizes in the red boxes that help to align. Let’s replace the images. Images are changed by dragging and dropping an image from the folder or the desktop into the section. !adding-grid.jpg! **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. 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. To change the position of the cells, simply drag one cell over another. While dragging a destination container, a cell and a section are highlighted with the border, and there is a tip above the container. Therefore, it is always clear where the control is placed. !copy-cell.jpg! 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. Start with an Icon, which is the most commonly used element in the text group design. Let’s add an icon to the cell. Click “Add”, and select “Icon”. In the open dialog, type “Idea” into the search field. We see tabs filtering icon by styles. Select “All” and choose the Lightbulb icon. For the Icon there are the most popular presets, we select the one with the circle. Change the color. Colors used in the Presets are from the palette selected earlier. !adding-icon.jpg! **Working with 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 selecting the Heading default from the list. Add Text. Select a part of the text and make it Bold and Italic. Select another part of the text and add a Hyperlink. !editing-text.jpg! **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. Change the Button Text, make all letters in the uppercase, make letters smaller, change spacing between the letters and, finally, change the colors. Colors in the presets are used from the selected palette. ## 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. You can move the Heading, Icon, Text — any element, into the Section above the Grid and into another Cell. !magnetic-guides.jpg! **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. ## Page Responsiveness ## **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. The page made with Nicepage is displayed correctly on all modern devices and it is convenient for reading. !responsive.jpg! **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 see that working in Nicepage is as simple as in Microsoft PowerPoint or Apple KeyNote, and in the results are the clean code and the fully responsive HTML. We hope you have enjoyed this introduction to Nicepage. Please subscribe to [Nicepage channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh). Watch more [Video Tutorials](/doc/article/1318/video-tutorials).