We would like to tell you about something that will change your idea of how websites are made. Imagine software that creates websites in seconds. Nicepage works just like a real designer. You provide images and text, and Nicepage designs a website. If you can use Microsoft PowerPoint or Apple Keynote, you can use Nicepage.

Overview

Nicepage is available online, as a Windows Application and as a Plugin for WordPress or Joomla. In the Windows version you can export for WordPress and Joomla.

Using the Page Builder

Building with Image Search. Building From Images You can start with a blank website, or use almost any source. For example, start with the Image Search. Enter or select a keyword. Choose any auto-generated design.

image-search.jpg

Building with Instagram. Another example, you have an Instagram account with your favorite photos. Login to your account. You see there are some nice pictures here. Select images. And now, let Nicepage do the magic! Do you recognize those photos? Nicepage Intelligent Design Service used the Instagram posts and turned them into sections. It's easy-to-use, fast and each newly built design is unique. It saves time and, therefore, money!

Building with Facebook. Let’s use Facebook. Select post images. Select a design. Voila! What if you have images on your local folder. Run Builder. Upload images by dragging them into the Nicepage Builder. Click Next.

Building from Uploaded Images. You will see designs built from the uploaded images. The designs you see are not pre-made templates, everything is created on-the-fly in seconds. Unbelievable, isn’t it? Select a page design, then click Next.

upload-images.jpg

Cusomizing the Generated Page. Select Colors for a page. Hovering Color Palettes and Coloring allows to preview changes immediately. Select a Font Scheme and a Typography. Click Done to add a page to the website.

applying-colors.jpg

User Interface

Working Area. Let’s briefly review the user interface of Nicepage. There is a Top Bar containing Page List, Website Settings, Theme Settings, Add Menu at the center, Responsive Modes, Preview and Publish to the right.

ui-areas.jpg

Let’s add another page. Open Pages -> Add Page. Besides Builders, there many pre-made examples provided by our designer community.

Theme Settings. In the Theme Setting to the top select Color Palette. Select a Font Scheme. The font were selected based on statistics for the most Popular Google Fonts and combinations. Select a Typography. The fine tuning is done in the Headings and Texts.

theme-settings.jpg

Website Navigator. The Website Navigator to the left allows to operate sections. Sections are the building blocks of modern web design. Click any section to select.

Section Menu. Each section has a menu. Select Duplicate to copy the current section. Move this section by dragging it under another one. If you don’t need this section, select the Delete from the section menu.

section-menu.jpg

To work with section in the Navigator is similar to work with slides in Microsoft Powerpoint or Apple Keynote.

Working with Sections

Adding Sections. Now let’s add several sections. Nicepage allows building sections from scratch, using pre-designed sections, or generating sections with the Builders.

quick-builder-start.png

Using the Section Builder. Add a New Section. Select Builder. For the section, again you can search images online, use images from social accounts or your local folder. Let’s add images from a local folder. Select images for the section. Select texts. Then select a style from auto-generated variants. Finally, add this section to your web page.

quick-start-section-builder.jpg

Pre-designed Sections. Add a New Section. There are over a thousand of pre-designed sections available, and all those sections have a unique design and a layout. Select a Thematic Category at the top. Then choose a Section Style to the left. Categories and styles filter the output results. Click “Done” to apply. If you change your mind, or you don’t like the style you have just selected, you can easily choose another one.

Editor

Selecting Elements. The Section Editor is the center of Nicepage. Here you can add, move, position and align various controls. Clicking elements in the Editor, we see the Properties change in the Panel to the right. Altering the parameters modifies a selected element. Add more “Spacing”.

Panel Tabs. In the Panel, you can switch tabs to navigate to a Container or a Section. Again, using Nicepage is very simple, it’s similar to working in Microsoft PowerPoint or Apple KeyNote. At that, you get the clean code and the responsive HTML in the output.

panel-tabs.jpg

Creating a Section

Let’s assume that you don’t like variants built with Builders and the pre-designed ideas are not enough. You have your own section that you drew in a graphic editor, for example, Adobe Photoshop. Let’s use this section as an example.

Sheet Area. Add a blank section. Change the section height. The readability is very important for a web page. The Content Area is called “Sheet” and it’s marked with the dashed lines. It is recommended to place the content between these lines.

sheet-area.jpg

Add Menu. All added controls are found in the Add Menu. Open the Add Menu. There are Containers, Basic and Functional Controls.

Using Grids. To create section with cells we need a Grid. Grids are flexible and very useful for the Responsive Modes, as for smaller screens the cells are reorganized one under another automatically. Select “Grid”. Shrink the Grid Height. Move the Grid up. While moving you see the snapping guides and sizes in boxes that help to align.

adding-grid.jpg

Working with Images. Replace the images by dragging from your local folder. Add Spacing to separate cells visually. Select the cell to the left. Change the cell background from Image Fill to Color Fill. Select another cell. Change the Crop of the background image. Collapse the image to make it a part of the content, and expand image back to the cell background. Switch cells by dragging one cell over another.

Working with Cells. The destinations: a cell, a container or a section; are highlighted with the borders. Also there is a tip above the Destination Cell. Copy the cell by dragging while holding the CTRL key. If you change your mind, to clear the content, select the cell, then click the DELETE key. Enable the Cell Fill in the Panel, change the Fill Color to Light Gray.

copy-cell.jpg

Adding Controls

Adding an Icon. Click “Add”, and select “Icon”. In the dialog, enter “Idea” into the search field. Select the linear Lightbulb icon. There are many icon presets. Select the circled one. Note, that the colors used in the presets are from the palette selected in Theme -> Colors.

adding-icon.jpg

Adding Texts. Add Heading 2. Modify the Heading text. Change the text size and the spacing between letters. If need, undo the changes by selecting the default text style from the list in the Panel. The styles in this list are set in Theme -> Heading and Texts. Add a text, click Add-> Text -> Text. Select a part of this text and make it Bold and Italic. Select another part, then add a Hyperlink.

Adding a Button. Add Button alternatively, click the small plus at the top right at the cell corner. Buttons also have presets. We need the bordered one. Colors used in the presets are selected in Theme -> Colors. Make all letters in the uppercase, smaller and bold. Modify the Button Text.

Alignment

Using Guides. Alignment and Consistency are important design principles. Note again, while moving there are guides and sizes helping to follow those principles. Also a reminder, dragging elements there are highlighted cells with above tips clarifying the control placing.

magnetic-guides.jpg

Alignment in Cells. Auto-align the content vertically. You see, the results are achieved easier and quicker, than drawing this section mockup in Adobe Photoshop. We have finished adding sections.

Responsive Modes

No modern design is considered complete if it’s not responsive for modern devices mainly for the mobile ones. Now, he’s the Magic! Clicking the Responsive Mode icons you see the whole page looks NICE is all modes. It was all done automatically! Amazing, isn’t it?!

responsive-modes.jpg

In all Responsive modes all editing features are supported. Let’s change the Сrop of the image, then the Heading size. You may hide any cell, let’s say, for this Phone View, then show it back in one click.

Preview and Publish

Previewing Website. After you’ve made your changes, click Preview to review the page. If you are satisfied with everything, you can Publish your website to show it to a client, or to see it for yourself.

Website Publish. Click "Publish". After the publication, open your website clicking the generated URL.

We see that to use Nicepage is simple, it’s like working in Microsoft PowerPoint or Apple KeyNote. The results are the clean code and the fully responsive HTML. As a reminder, in the desktop version you can export for WordPress and Joomla.

We hope you have enjoyed this introduction to Nicepage.

Please subscribe to Nicepage channel.
Watch more Video Tutorials.

We would like to tell you about something that will change your idea of how websites are made. Imagine software that creates websites in seconds. Nicepage works just like a real designer. You provide images and text, and Nicepage designs a website. If you can use Microsoft PowerPoint or Apple Keynote, you can use Nicepage. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/xTeJf3tqcGQ?rel=0" frameborder="0" allowfullscreen></iframe></div> ##Overview## Nicepage is available online, as a Windows Application and as a Plugin for WordPress or Joomla. In the Windows version you can export for WordPress and Joomla. ##Using the Page Builder## **Building with Image Search**. Building From Images You can start with a blank website, or use almost any source. For example, start with the Image Search. Enter or select a keyword. Choose any auto-generated design. !image-search.jpg! **Building with Instagram**. Another example, you have an Instagram account with your favorite photos. Login to your account. You see there are some nice pictures here. Select images. And now, let Nicepage do the magic! Do you recognize those photos? Nicepage Intelligent Design Service used the Instagram posts and turned them into sections. It's easy-to-use, fast and each newly built design is unique. It saves time and, therefore, money! **Building with Facebook**. Let’s use Facebook. Select post images. Select a design. Voila! What if you have images on your local folder. Run Builder. Upload images by dragging them into the Nicepage Builder. Click Next. **Building from Uploaded Images**. You will see designs built from the uploaded images. The designs you see are not pre-made templates, everything is created on-the-fly in seconds. Unbelievable, isn’t it? Select a page design, then click Next. !upload-images.jpg! **Cusomizing the Generated Page**. Select Colors for a page. Hovering Color Palettes and Coloring allows to preview changes immediately. Select a Font Scheme and a Typography. Click Done to add a page to the website. !applying-colors.jpg! ##User Interface## **Working Area**. Let’s briefly review the user interface of Nicepage. There is a Top Bar containing Page List, Website Settings, Theme Settings, Add Menu at the center, Responsive Modes, Preview and Publish to the right. !ui-areas.jpg! Let’s add another page. Open Pages -> Add Page. Besides Builders, there many pre-made examples provided by our designer community. **Theme Settings**. In the Theme Setting to the top select Color Palette. Select a Font Scheme. The font were selected based on statistics for the most Popular Google Fonts and combinations. Select a Typography. The fine tuning is done in the Headings and Texts. !theme-settings.jpg! **Website Navigator**. The Website Navigator to the left allows to operate sections. Sections are the building blocks of modern web design. Click any section to select. **Section Menu**. Each section has a menu. Select Duplicate to copy the current section. Move this section by dragging it under another one. If you don’t need this section, select the Delete from the section menu. !section-menu.jpg! To work with section in the Navigator is similar to work with slides in Microsoft Powerpoint or Apple Keynote. ##Working with Sections## **Adding Sections**. Now let’s add several sections. Nicepage allows building sections from scratch, using pre-designed sections, or generating sections with the Builders. !quick-builder-start.png! **Using the Section Builder**. Add a New Section. Select Builder. For the section, again you can search images online, use images from social accounts or your local folder. Let’s add images from a local folder. Select images for the section. Select texts. Then select a style from auto-generated variants. Finally, add this section to your web page. !quick-start-section-builder.jpg! **Pre-designed Sections**. Add a New Section. There are over a thousand of pre-designed sections available, and all those sections have a unique design and a layout. Select a Thematic Category at the top. Then choose a Section Style to the left. Categories and styles filter the output results. Click “Done” to apply. If you change your mind, or you don’t like the style you have just selected, you can easily choose another one. ##Editor## **Selecting Elements**. The Section Editor is the center of Nicepage. Here you can add, move, position and align various controls. Clicking elements in the Editor, we see the Properties change in the Panel to the right. Altering the parameters modifies a selected element. Add more “Spacing”. **Panel Tabs**. In the Panel, you can switch tabs to navigate to a Container or a Section. Again, using Nicepage is very simple, it’s similar to working in Microsoft PowerPoint or Apple KeyNote. At that, you get the clean code and the responsive HTML in the output. !panel-tabs.jpg! ##Creating a Section## Let’s assume that you don’t like variants built with Builders and the pre-designed ideas are not enough. You have your own section that you drew in a graphic editor, for example, Adobe Photoshop. Let’s use this section as an example. **Sheet Area**. Add a blank section. Change the section height. The readability is very important for a web page. The Content Area is called “Sheet” and it’s marked with the dashed lines. It is recommended to place the content between these lines. !sheet-area.jpg! **Add Menu**. All added controls are found in the Add Menu. Open the Add Menu. There are Containers, Basic and Functional Controls. **Using Grids**. To create section with cells we need a Grid. Grids are flexible and very useful for the Responsive Modes, as for smaller screens the cells are reorganized one under another automatically. Select “Grid”. Shrink the Grid Height. Move the Grid up. While moving you see the snapping guides and sizes in boxes that help to align. !adding-grid.jpg! **Working with Images**. Replace the images by dragging from your local folder. Add Spacing to separate cells visually. Select the cell to the left. Change the cell background from Image Fill to Color Fill. Select another cell. Change the Crop of the background image. Collapse the image to make it a part of the content, and expand image back to the cell background. Switch cells by dragging one cell over another. **Working with Cells**. The destinations: a cell, a container or a section; are highlighted with the borders. Also there is a tip above the Destination Cell. Copy the cell by dragging while holding the CTRL key. If you change your mind, to clear the content, select the cell, then click the DELETE key. Enable the Cell Fill in the Panel, change the Fill Color to Light Gray. !copy-cell.jpg! ##Adding Controls## **Adding an Icon**. Click “Add”, and select “Icon”. In the dialog, enter “Idea” into the search field. Select the linear Lightbulb icon. There are many icon presets. Select the circled one. Note, that the colors used in the presets are from the palette selected in Theme -> Colors. !adding-icon.jpg! **Adding Texts**. Add Heading 2. Modify the Heading text. Change the text size and the spacing between letters. If need, undo the changes by selecting the default text style from the list in the Panel. The styles in this list are set in Theme -> Heading and Texts. Add a text, click Add-> Text -> Text. Select a part of this text and make it Bold and Italic. Select another part, then add a Hyperlink. **Adding a Button**. Add Button alternatively, click the small plus at the top right at the cell corner. Buttons also have presets. We need the bordered one. Colors used in the presets are selected in Theme -> Colors. Make all letters in the uppercase, smaller and bold. Modify the Button Text. ##Alignment## **Using Guides**. Alignment and Consistency are important design principles. Note again, while moving there are guides and sizes helping to follow those principles. Also a reminder, dragging elements there are highlighted cells with above tips clarifying the control placing. !magnetic-guides.jpg! **Alignment in Cells**. Auto-align the content vertically. You see, the results are achieved easier and quicker, than drawing this section mockup in Adobe Photoshop. We have finished adding sections. ##Responsive Modes## No modern design is considered complete if it’s not responsive for modern devices mainly for the mobile ones. Now, he’s the Magic! Clicking the Responsive Mode icons you see the whole page looks NICE is all modes. It was all done automatically! Amazing, isn’t it?! !responsive-modes.jpg! In all Responsive modes all editing features are supported. Let’s change the Сrop of the image, then the Heading size. You may hide any cell, let’s say, for this Phone View, then show it back in one click. ##Preview and Publish## **Previewing Website**. After you’ve made your changes, click Preview to review the page. If you are satisfied with everything, you can Publish your website to show it to a client, or to see it for yourself. **Website Publish**. Click "Publish". After the publication, open your website clicking the generated URL. We see that to use Nicepage is simple, it’s like working in Microsoft PowerPoint or Apple KeyNote. The results are the clean code and the fully responsive HTML. As a reminder, in the desktop version you can export for WordPress and Joomla. 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).