We are very happy to present you our new product, Nicepage, which allows creating any website design in minutes. Nicepage is available online, for Window OS, and as a plugin for WordPress and Joomla. We will demonstrate Nicepage’s features using the WordPress plugin as an example.

So let’s introduce you to Nicepage, step by step.

Installation

Downloading. We’ll start with visiting nicepage.com website. Download the Nicepage plugin for WordPress. Open WordPress Admin. The plugin is installed as usually for plugins, as a zipped package.

wp-install.png

Installing. Go to the Admin panel -> Plugins -> Add New... Upload the plugin, selecting the downloaded zip from your local folder. Install it. Then activate. After activation, the Nicepage Tab appears in the WordPress panel.

Adding Pages

Blank Page. Add a new page from the WordPress menu to the left. Add a new page. First, you can create pages from scratch.

Page Builder. Second, you can build using the Page Builder. Upload images for the builder by simply dragging images from the local folder. Select images for sections, then choose a Style. All those pages are not pre-made and generated on-the-fly automatically.

Pre-Designed Samples. Finally, you can always use the pre-designed examples made by designers. We can start with any of these samples.

User Interface

Let’s start with a review the basic elements of the Nicepage’s UI.

Top Bar. There is a Top panel containing the list of Wordpress Pages, the Website Settings, the Theme Properties, the Add Menu at the top center. To the right, there are the Responsive Modes, the Preview and the WordPress Update. After pressing the Update the page is saved as a draft in the WordPress pages.

ui-areas.jpg

Operations with Sections. The Web Page Navigator is located to the left. It makes it easy to select and to operate sections. Each section has a menu, we will use the Duplicate operation copies the current section. You can easily switch sections and change their ordering in the Navigator.

Changing Page Name. 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 option from the Section Menu. At the very top of the Navigator there is a Page Name. Click the Page name to change it. Type a new name, then Save.

Section Editor

Editor overview. 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.

Selecting Elements. While choosing elements in the Editor, the 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

Global Settings. All modern websites and themes have the Global Settings including the Color settings, the Font settings, and the Typography. Let’s review the Theme Settings in details. We will start with the Colors setting the Palette.

theme-settings.jpg

Colors. In the reality, there are not that many websites that use more than five colors. Therefore, our Palettes are created to cover the need for the color variety, which allows realizing of any color ideas. Let’s choose this Palette. Now these colors are available for all elements of the web page.

Fonts. Now modify the Fonts. Our Font Schemes are created by picking from the most popular Google Fonts and Combinations. Now we select the Font Scheme.

Typography. Next, we will define the Typography. The Typography Sets change the text presentation on the page.
The selected settings will be used for all texts by default. In addition, these typography elements are selected in the Text Style list.

Headings and Text. The detailed font tuning for a page element is made in the Headings and Text.

Working with Sections

Section Overview. Proceeding to the page design. Today, web pages are mostly made of sections, the main building blocks of the modern web design. Nicepage allows using the pre-designed sections, as well as building sections using the Builder and from scratch.

adding-sections.png

Adding Sections. Let’s Add a New Section. There are over a thousand of pre-designed sections available, and each of those sections has a unique design and a layout.

Ready Sections. There is the Section Style list to the left, and Thematic Categories at the top. Selecting styles and categories you narrow down the number of offered sections allowing you to select the most appropriate one.

Changing a Style. 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 add more 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. Add a new section. In the dialog select the Contact Form category. Select and 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.

quick-start-section-builder.jpg

Section Builder. Let’s add sections using the Builders. In the Add Section dialog click the Builder. For the section you can search images online, use images from any social accounts or your local folder. Drag images from your local folder. Select images for the section. Select required texts for the section. Then select a style from the generated variants. And, finally, add this section to your page.

CMS Sections

Post Sections. The same way, we will add sections auto-generated from the WordPress Posts. In the New Section Builder select the “Social and Web” Tab. Switch to Posts tab. Select Post images and Texts. Select a design.

Product Sections. Add a new section to show Products. Click Builder. Switch to the Products tab. Select Product images. Select Product Descriptions related to those Products. Select a style for the section. Click Done.

Working with the Editor

Adding Blank Section. Let’s assume that you need your own idea for a section, a mock-up 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.

Adding Controls. In the Add Menu we see Containers, Basic Controls and Functional Controls. To create this section we need to add a grid to which we will add the texts and images.

adding-grid.jpg

Using Grids. 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.

Working with Cells

Cell Background. Let’s replace the images. Images are changed by dragging and dropping an image from the folder or the desktop into the section. It is simple to change the cell background from Image Fill to Color

Cell Operations. 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.

Moving Cells. 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

Cell Copy and Delete. 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 an Icon

Add Menu. 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”.

adding-icon.jpg

New Icon Dialog. In the open dialog, type “Idea” into the search field. We see tabs filtering icon by styles. Select “All” and choose the Linear Light Bulb icon. For the Icon there are the most popular presets, we select the one with the circle. You may change colors. Colors used in the Presets are from the palette selected earlier. We will stay with the first color.

Adding Texts

Adding Texts. Add a Heading. Modify the Heading typing a new text. 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, which shows styles defined in the Headings and Texts earlier.

editing-text.jpg

Editing the Text. Add a Text. Select a part of the text and make it Bold and Italic. Select another part of the text and add a Hyperlink. Specify the destination WordPress page in the dialog.

Adding a Button. Add Button using the alternative way, by clicking the Plus to the right of the cell container. The Button also has presets. Let’s keep the bordered one. Make the button rounded. Changed the Button Height. Enter the new text. After fine-tuning, select the WordPress Destination page for the Button.

Cell Alignment. Click the Update to pre-save the page. 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.

cell-alignment.jpg

Highligting. Containers are highlighted with borders and labeled with hints, therefore it is always clear in which container controls will be placed. 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.

Shortcodes and Widgets

Adding a Shortcode. We will add another black section to illustrate the work with the WordPress widgets and shortcodes. Add a grid with two cells. Delete the default content in the cells pressing the DELETE key.

wp-shortcodes.png

Adding a Widget. Select the Left Cell. Click the Add menu -> WordPress Widget -> Calendar Widget. Expand the widget area to the cell. Select the Red Cell. Click the Add menu -> Shortcode. Enter the code in the Shortcode Area in the Right Panel. Expand the widget area to the cell. The red guides are very helpful for resizing and aligning.

Preview

To see the actual data in these sections, click the Preview. We have completed adding sections.

Responsive Modes

Fully responsive. 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 in Nicepage is displayed correctly on all modern devices and it is convenient for reading.

responsive.jpg

Editing in Responsive Modes. 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.

Click the "Update".

WordPress Templates

Admin Pages. Switch to WordPress. Open the Pages. Open your newly created Page. You can select any other theme template and click the Publish. Now the previously pre-saved page is finally published.

Swithing Templates. However, the page sections look differently compared to how they were designed in Nicepage. To fix this, select the Nicepage template with the WordPress Header and the Footer. Update the page. Preview changes. The page sections now look correctly.

wp-template.png

Edit in Nicepage. We see the "Edit in Nicepage" button that opens Nicepage Editor for the WordPress page created in Nicepage. Click the Preview to see the page.

We see that working in Nicepage is as simple as using the Microsoft PowerPoint or the Apple KeyNote. In the output you get the clean code and the fully responsive HTML.

We hope you have enjoyed this presentation of Nicepage Website Builder for WordPress.

Please subscribe to Nicepage channel.
Watch more Video Tutorials.

We are very happy to present you our new product, Nicepage, which allows creating any website design in minutes. Nicepage is available online, for Window OS, and as a plugin for WordPress and Joomla. We will demonstrate Nicepage’s features using the WordPress plugin as an example. So let’s introduce you to Nicepage, step by step. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/zg0ITovj54Y?rel=0" frameborder="0" allowfullscreen></iframe></div> ## Installation ## **Downloading**. We’ll start with visiting nicepage.com website. Download the Nicepage plugin for WordPress. Open WordPress Admin. The plugin is installed as usually for plugins, as a zipped package. !wp-install.png! **Installing**. Go to the Admin panel -> Plugins -> Add New... Upload the plugin, selecting the downloaded zip from your local folder. Install it. Then activate. After activation, the Nicepage Tab appears in the WordPress panel. ## Adding Pages ## **Blank Page**. Add a new page from the WordPress menu to the left. Add a new page. First, you can create pages from scratch. **Page Builder**. Second, you can build using the Page Builder. Upload images for the builder by simply dragging images from the local folder. Select images for sections, then choose a Style. All those pages are not pre-made and generated on-the-fly automatically. **Pre-Designed Samples**. Finally, you can always use the pre-designed examples made by designers. We can start with any of these samples. ## User Interface ## Let’s start with a review the basic elements of the Nicepage’s UI. **Top Bar**. There is a Top panel containing the list of Wordpress Pages, the Website Settings, the Theme Properties, the Add Menu at the top center. To the right, there are the Responsive Modes, the Preview and the WordPress Update. After pressing the Update the page is saved as a draft in the WordPress pages. !ui-areas.jpg! **Operations with Sections**. The Web Page Navigator is located to the left. It makes it easy to select and to operate sections. Each section has a menu, we will use the Duplicate operation copies the current section. You can easily switch sections and change their ordering in the Navigator. **Changing Page Name**. 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 option from the Section Menu. At the very top of the Navigator there is a Page Name. Click the Page name to change it. Type a new name, then Save. ## Section Editor ## **Editor overview**. 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. **Selecting Elements**. While choosing elements in the Editor, the 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 ## **Global Settings**. All modern websites and themes have the Global Settings including the Color settings, the Font settings, and the Typography. Let’s review the Theme Settings in details. We will start with the Colors setting the Palette. !theme-settings.jpg! **Colors**. In the reality, there are not that many websites that use more than five colors. Therefore, our Palettes are created to cover the need for the color variety, which allows realizing of any color ideas. Let’s choose this Palette. Now these colors are available for all elements of the web page. **Fonts**. Now modify the Fonts. Our Font Schemes are created by picking from the most popular Google Fonts and Combinations. Now we select the Font Scheme. **Typography**. Next, we will define the Typography. The Typography Sets change the text presentation on the page. The selected settings will be used for all texts by default. In addition, these typography elements are selected in the Text Style list. **Headings and Text**. The detailed font tuning for a page element is made in the Headings and Text. ## Working with Sections ## **Section Overview**. Proceeding to the page design. Today, web pages are mostly made of sections, the main building blocks of the modern web design. Nicepage allows using the pre-designed sections, as well as building sections using the Builder and from scratch. !adding-sections.png! **Adding Sections**. Let’s Add a New Section. There are over a thousand of pre-designed sections available, and each of those sections has a unique design and a layout. **Ready Sections**. There is the Section Style list to the left, and Thematic Categories at the top. Selecting styles and categories you narrow down the number of offered sections allowing you to select the most appropriate one. **Changing a Style**. 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 add more 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. Add a new section. In the dialog select the Contact Form category. Select and 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. !quick-start-section-builder.jpg! **Section Builder**. Let’s add sections using the Builders. In the Add Section dialog click the Builder. For the section you can search images online, use images from any social accounts or your local folder. Drag images from your local folder. Select images for the section. Select required texts for the section. Then select a style from the generated variants. And, finally, add this section to your page. ## CMS Sections ## **Post Sections**. The same way, we will add sections auto-generated from the WordPress Posts. In the New Section Builder select the “Social and Web” Tab. Switch to Posts tab. Select Post images and Texts. Select a design. **Product Sections**. Add a new section to show Products. Click Builder. Switch to the Products tab. Select Product images. Select Product Descriptions related to those Products. Select a style for the section. Click Done. ## Working with the Editor ## **Adding Blank Section**. Let’s assume that you need your own idea for a section, a mock-up 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. **Adding Controls**. In the Add Menu we see Containers, Basic Controls and Functional Controls. To create this section we need to add a grid to which we will add the texts and images. !adding-grid.jpg! **Using Grids**. 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. ## Working with Cells ## **Cell Background**. Let’s replace the images. Images are changed by dragging and dropping an image from the folder or the desktop into the section. It is simple to change the cell background from Image Fill to Color **Cell Operations**. 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. **Moving Cells**. 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! **Cell Copy and Delete**. 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 an Icon ## **Add Menu**. 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”. !adding-icon.jpg! **New Icon Dialog**. In the open dialog, type “Idea” into the search field. We see tabs filtering icon by styles. Select “All” and choose the Linear Light Bulb icon. For the Icon there are the most popular presets, we select the one with the circle. You may change colors. Colors used in the Presets are from the palette selected earlier. We will stay with the first color. ## Adding Texts ## **Adding Texts**. Add a Heading. Modify the Heading typing a new text. 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, which shows styles defined in the Headings and Texts earlier. !editing-text.jpg! **Editing the Text**. Add a Text. Select a part of the text and make it Bold and Italic. Select another part of the text and add a Hyperlink. Specify the destination WordPress page in the dialog. **Adding a Button**. Add Button using the alternative way, by clicking the Plus to the right of the cell container. The Button also has presets. Let’s keep the bordered one. Make the button rounded. Changed the Button Height. Enter the new text. After fine-tuning, select the WordPress Destination page for the Button. **Cell Alignment**. Click the Update to pre-save the page. 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. !cell-alignment.jpg! **Highligting**. Containers are highlighted with borders and labeled with hints, therefore it is always clear in which container controls will be placed. 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. ## Shortcodes and Widgets ## **Adding a Shortcode**. We will add another black section to illustrate the work with the WordPress widgets and shortcodes. Add a grid with two cells. Delete the default content in the cells pressing the DELETE key. !wp-shortcodes.png! **Adding a Widget**. Select the Left Cell. Click the Add menu -> WordPress Widget -> Calendar Widget. Expand the widget area to the cell. Select the Red Cell. Click the Add menu -> Shortcode. Enter the code in the Shortcode Area in the Right Panel. Expand the widget area to the cell. The red guides are very helpful for resizing and aligning. ## Preview ## To see the actual data in these sections, click the Preview. We have completed adding sections. ## Responsive Modes ## **Fully responsive**. 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 in Nicepage is displayed correctly on all modern devices and it is convenient for reading. !responsive.jpg! **Editing in Responsive Modes**. 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. Click the "Update". ## WordPress Templates ## **Admin Pages**. Switch to WordPress. Open the Pages. Open your newly created Page. You can select any other theme template and click the Publish. Now the previously pre-saved page is finally published. **Swithing Templates**. However, the page sections look differently compared to how they were designed in Nicepage. To fix this, select the Nicepage template with the WordPress Header and the Footer. Update the page. Preview changes. The page sections now look correctly. !wp-template.png! **Edit in Nicepage**. We see the "Edit in Nicepage" button that opens Nicepage Editor for the WordPress page created in Nicepage. Click the Preview to see the page. We see that working in Nicepage is as simple as using the Microsoft PowerPoint or the Apple KeyNote. In the output you get the clean code and the fully responsive HTML. We hope you have enjoyed this presentation of Nicepage Website Builder for WordPress. Please subscribe to [Nicepage channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh). Watch more [Video Tutorials](/doc/article/1318/video-tutorials).