We are very happy to present you something really amazing... the web design tool that will change your idea of how websites are made.

Watch Video (Recommended)

What is Nicepage Website Builder?

Personal Assistant. There are many website makers, but none of them is simple, easy-to-use, and allows creating websites in minutes. Welcome Nicepage, your new personal design assistant. You upload images and text, and Nicepage designs a website for you. If you can use Microsoft PowerPoint or Apple Keynote, you can use Nicepage.

Availability. Nicepage is available online, as a Windows Application and as a Plugin for WordPress and Joomla. We will demonstrate Nicepage features using the Desktop version, as an example. Note that in this version you can export for WordPress and Joomla. So let’s introduce you to Nicepage, step by step.

Installation. We’ll start with visiting nicepage.com website. Enter a valid email. Click the “Getting Started” button. On the next page download the Windows Application. Install Nicepage for Windows.

download.jpg

Run Nicepage. Activate or continue the Trial. Let’s add a New Page.

Creating a New Page

Website Builder. You can create pages from scratch. Also, you can build using the Powerful Page Builder. We will use free images. You see images selected by default. However, you can select and unselect any number of images to be used for a website.

Auto-Generated Websites. Switch categories. Let’s select “Interior”. Click Next. All those pages are not pre-made and generated on-the-fly automatically by Nicepage Intelligent Design Services. Let’s filter the results by selecting “Split” and “Colored” in the top right. Finally, choose a Page Style.

Designer Made Examples. If you don’t like the generated results, you can always use the pre-designed examples provided by our designer community. We can start with any of these samples, for example, with this one.

User Interface

Top Bar. Let’s start with the basics of the User Interface of Nicepage. Start with the Top Bar containing the Pages, the Website Settings, the Theme Menu, and the Add Menu at the center. To the right, you see the Responsive Modes, the Preview and the Export.

ui-areas.jpg

Navigator. The Website Navigator is located to the left. Here you find website sections, including the Header and the Footer, the Theme Elements.

Theme Settings

Colors. Let’s review the Theme Settings in details. Begin with Colors. Select Theme -> 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 allowing to express any color ideas. Let’s choose this Palette. Now these colors are available for all elements in the web page.

theme-settings.jpg

Fonts. Modify the Fonts. Our Font Schemes are created by picking from the most popular Google Fonts and Combinations. Select the Font Scheme.

Typography. 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 available in the Text Style list.

Headings and Texts. The detailed type tuning for page elements is done in the Headings and Text. Select Theme -> Headings and Text.

Header Settings

Header Styles. Proceed to the Header. Since the Header and the Footer are the part of the Theme, you can reach them in the Theme Menu. However, it is more natural to click the Header thumbnail in the Navigator to the left. Select the Header. Selecting the header, we see its properties shown in the Property Panel to the right. Changing the parameters in the Right Panel modifies the selected element, container or section. Let select a Header Style with the Text Headline.

header-styles.jpg

Overlapping. Many modern websites have a header overlapping the Introduction section, which changes the background to white while scrolling a page. Let’s set this. First we will select the Header Fill, as by default all sections are transparent, thought it is not obvious since the default background color for a page in browsers is white.

header.jpg

Sticky Header. Make the Header “Sticky on Scroll”. Enable “Overlapping”. Enable “Transparent” and “Inverted Text Color” for the Overlapping Mode. Click Preview to see that on scrolling the Header background is still white, as we’ve selected this earlier.

Menu Settings

Menu Editing. Edit the Website Menu. Click the Menu in the Header. Select the “Edit Menu” in the context toolbar of the Menu. In the dialog add two Menu Items. Switch items. Click “Done”. There are now three items in the menu. Make the Menu shorter.

edit-menu.jpg

Off-Canvas Menu. Another modern feature supported in Nicepage is the Off-Canvas Menu. By default the Button Mode is set starting from for Tablets. Let’s change this to starting from the Desktop. Switch to the “Button Popup” tab in the Property Panel.

off-canvas.jpg

Adding Controls to Menu. The Off-Canvas Menu is to the left. You can add various controls to be shown in the Off-Canvas Menu, such are the Logo, the Headline, the Search, the WordPress Widget, the Joomla Position, Social Icons, etc. Let’s add a Headline. Modify the texts, alignment and positions. Add “Social Icons”. Also align this element properly. Switch to the Desktop Mode. Make the cosmetic changes, if necessary. This is it. That simple!

Footer Settings

Footer Styles. Let’s modify the Footer. Select Footer in the Web Page Navigator to the left or from Theme -> Footer. Click the “Change Style” button in the Property Panel. Select a style.

footer-styles.jpg

Copying the Menu. Let’s add a menu. Select the Header. Copy the Menu from the Header. Select the Footer. Paste the Menu into the Footer. Finalize the Footer making cosmetic changes.

Blog Template

Blog Styles. The Blog and the Post Templates are important parts of the Theme. Select the Blog Template from the Theme Menu. Select Theme -> Blog Template. Select a preset for the Blog in the Right Panel.

blog-template.jpg

Blog Elements. Modify the Post Header. Select the Metadata. Add the Author. Remove the Category. Modify the type and the color for the Metadata. Select the Post Image. Enable the Shadow. Add the Shadow effect to the Post Image.

Support of SCR Set. Please note that the Blog and the Post Templates support the SCR SET feature used in WordPress, for example, to show different images for different responsive modes.

Post Template

Post Styles. Select the Post template in the Theme Menu. Select Theme -> Post Template. Select a Post preset in the Property Panel. Change the Post Header font size. Remove the Category. Modify the type and the color of the Post Metadata.

post-styles.jpg

Sidebar. Enable The Right Sidebar clicking the icon in the Property Panel. Change the Sidebar Width pulling the marker. Add gaps between the blocks. Add the fill for the Block Header. Add Spacings for both the Block Header and the Block Content. Switch to the Pages. Select a page in the Page Menu in the Top Bar.

Ready-Made Sections

New Section Dialog. 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. 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 see the most appropriate ones. Select a Section Style.

quick-builder-start.png

Selecting Styles. If you change your mind, or you don’t like what you have just selected, you can easily choose another one. Click the “Section Style” button in the Right Panel. Select a category. Select another Section Style. In addition, we can add more Spacing between cells.

ready-sections.jpg

Web Page Navigator

Edit Page Name. Back to the Left Navigator. It makes it easy to select and to operate sections. At the very top of the Web Page Navigator there is a Page Name. Click the Page name to change it. Type a new name, then click the Save button or press the ENTER key.

Section Menu. Each section has a menu. The DUPLICATE operation copies the current section. Drag sections in the Navigator to switch the section order easily. If you want to delete a section, choose the DELETE option in the Section Menu.

section-menu.jpg

Functional Sections

Assume, that you need a functional section, let’s say with a Contact Form, an Address and a Map. Add a new section by clicking the Plus in the Section Ruler. Select the Contact Form category in the dialog. Add the section with a form and a map. After adding the section, click the map or the form control to see available properties in the Right Panel.

Section Editor

The Section Editor is the central part 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. In addition, in the Panel, you can switch tabs to navigate to a Container or a Section.

section-editor.jpg

Section Builder

Builder Dialog. Let’s add sections using the Builder. 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.

quick-start-section-builder.jpg

Uploading Images. Drag images from your local folder. Select images for the section. Select required texts for the section. Select a style from the auto-generated variants. Finally, click “Done” to add this section to the page.

Using Nicepage is very simple. It’s similar to working in the Microsoft PowerPoint or the Apple KeyNote. At that, you get the clean code and the fully responsive HTML in the output.

Using Section Editor

Blank Section. Let’s assume that you don’t like generated variants, and the pre-designed ideas are not enough. There is a section mock-up drawn in a graphic editor, for example, Adobe Photoshop. Let’s use this section as an example. Add a blank section. Change the section height.

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

Working with Cells

Uploading Images. 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.

Using Grids. 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. Replace the images by dragging from your local folder. Add Spacing to separate cells visually.

adding-grid.jpg

Working with Images. Select the cell to the left. Change the cell background from Image Fill to Color Fill. Collapse the image to make it a part of the content, and expand image back to the cell background. Select another cell. Change the Crop of the background image. Switch cells by dragging one cell over another.

Highlighting. 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 press the DELETE key.

copy-cell.jpg

Adding Controls

Adding Icon. Enable the Cell Fill in the Panel, change the Fill Color to Light Gray. Add 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 needed, undo the changes by selecting the default text style from the list in the Panel. The styles in this list are set in Theme -> Headings and Text. 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.

editing-text.jpg

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

Cell Alignment. 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 the upper tips clarifying the control placing. Auto-align the content.

magnetic-guides.jpg

You see, the results are achieved easier and quicker, even than drawing this section mock-up a graphic editor like Photoshop. We have finished adding sections.

Responsive Modes

Viewports. No modern design is considered complete if it’s not responsive for various viewports. He’s the Magic! Clicking the Responsive Mode icons you see the whole page looks NICE in all modes. It was all done automatically! Amazing, isn’t it?!

responsive-modes.jpg

Editing. Note that all editing features are supported in all Responsive Modes. Change the Сrop of the image. Modify the Heading size. You may hide any cell, let’s say, for the Phone Landscape. Then show it back in one click.

Preview and Export

Website Settings. After you’ve made your changes, click the Preview to see the page. In addition, you can check the Website Settings, for example, for the SEO.

Export Options. Click the Export in the Top Bar. You can Export to HTML, WordPress and Joomla, and save the Theme Screenshot. Let’s use the export to WordPress, as an example.

export.jpg

Export Dialog. In the dialog select “WordPress”, the destination folder and the “Theme & Content” option. Click the “Export” button.

Uploading Theme

WordPress Admin. Upload your Theme to WordPress. Open WordPress Admin. The theme is installed as usually, as a zipped package. Go to the Admin panel -> Appearance -> Themes -> Add New. Click the “Upload Theme” button. Select the downloaded zip from your local folder.

Theme Installation. Install the Theme. Activate the Theme. After activation, the Nicepage Tab appears in the WordPress Menu. Click “Pages”. Import the Content. The Home page have appeared in the Page List. Open the Home page.

Edit in WordPress. We see the “Edit with Nicepage” button. The Nicepage Plugin is also installed with the Theme into the WordPress. Note that Nicepage WordPress Plugin supports all editing features. Click the “Edit with Nicepage” button to open the Nicepage Editor inside the WordPress. Click the Preview to see the page.

edit-nicepage.jpg

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 Windows Application.

Please subscribe to Nicepage channel.
Watch more Video Tutorials.

We are very happy to present you something really amazing... the web design tool that will change your idea of how websites are made. ## Watch Video (Recommended) ## <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/8iHl--K4XPs?rel=0" frameborder="0" allowfullscreen></iframe></div> ##What is Nicepage Website Builder?## **Personal Assistant**. There are many website makers, but none of them is simple, easy-to-use, and allows creating websites in minutes. Welcome Nicepage, your new personal design assistant. You upload images and text, and Nicepage designs a website for you. If you can use Microsoft PowerPoint or Apple Keynote, you can use Nicepage. **Availability**. Nicepage is available online, as a Windows Application and as a Plugin for WordPress and Joomla. We will demonstrate Nicepage features using the Desktop version, as an example. Note that in this version you can export for WordPress and Joomla. So let’s introduce you to Nicepage, step by step. **Installation**. We’ll start with visiting nicepage.com website. Enter a valid email. Click the “Getting Started” button. On the next page download the Windows Application. Install Nicepage for Windows. !download.jpg! Run Nicepage. Activate or continue the Trial. Let’s add a New Page. ## Creating a New Page ## **Website Builder**. You can create pages from scratch. Also, you can build using the Powerful Page Builder. We will use free images. You see images selected by default. However, you can select and unselect any number of images to be used for a website. **Auto-Generated Websites**. Switch categories. Let’s select “Interior”. Click Next. All those pages are not pre-made and generated on-the-fly automatically by Nicepage Intelligent Design Services. Let’s filter the results by selecting “Split” and “Colored” in the top right. Finally, choose a Page Style. **Designer Made Examples**. If you don’t like the generated results, you can always use the pre-designed examples provided by our designer community. We can start with any of these samples, for example, with this one. ## User Interface ## **Top Bar**. Let’s start with the basics of the User Interface of Nicepage. Start with the Top Bar containing the Pages, the Website Settings, the Theme Menu, and the Add Menu at the center. To the right, you see the Responsive Modes, the Preview and the Export. !ui-areas.jpg! **Navigator**. The Website Navigator is located to the left. Here you find website sections, including the Header and the Footer, the Theme Elements. ## Theme Settings ## **Colors**. Let’s review the Theme Settings in details. Begin with Colors. Select Theme -> 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 allowing to express any color ideas. Let’s choose this Palette. Now these colors are available for all elements in the web page. !theme-settings.jpg! **Fonts**. Modify the Fonts. Our Font Schemes are created by picking from the most popular Google Fonts and Combinations. Select the Font Scheme. **Typography**. 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 available in the Text Style list. **Headings and Texts**. The detailed type tuning for page elements is done in the Headings and Text. Select Theme -> Headings and Text. ## Header Settings ## **Header Styles**. Proceed to the Header. Since the Header and the Footer are the part of the Theme, you can reach them in the Theme Menu. However, it is more natural to click the Header thumbnail in the Navigator to the left. Select the Header. Selecting the header, we see its properties shown in the Property Panel to the right. Changing the parameters in the Right Panel modifies the selected element, container or section. Let select a Header Style with the Text Headline. !header-styles.jpg! **Overlapping**. Many modern websites have a header overlapping the Introduction section, which changes the background to white while scrolling a page. Let’s set this. First we will select the Header Fill, as by default all sections are transparent, thought it is not obvious since the default background color for a page in browsers is white. !header.jpg! **Sticky Header**. Make the Header “Sticky on Scroll”. Enable “Overlapping”. Enable “Transparent” and “Inverted Text Color” for the Overlapping Mode. Click Preview to see that on scrolling the Header background is still white, as we’ve selected this earlier. ## Menu Settings ## **Menu Editing**. Edit the Website Menu. Click the Menu in the Header. Select the “Edit Menu” in the context toolbar of the Menu. In the dialog add two Menu Items. Switch items. Click “Done”. There are now three items in the menu. Make the Menu shorter. !edit-menu.jpg! **Off-Canvas Menu**. Another modern feature supported in Nicepage is the Off-Canvas Menu. By default the Button Mode is set starting from for Tablets. Let’s change this to starting from the Desktop. Switch to the “Button Popup” tab in the Property Panel. !off-canvas.jpg! **Adding Controls to Menu**. The Off-Canvas Menu is to the left. You can add various controls to be shown in the Off-Canvas Menu, such are the Logo, the Headline, the Search, the WordPress Widget, the Joomla Position, Social Icons, etc. Let’s add a Headline. Modify the texts, alignment and positions. Add “Social Icons”. Also align this element properly. Switch to the Desktop Mode. Make the cosmetic changes, if necessary. This is it. That simple! ## Footer Settings ## **Footer Styles**. Let’s modify the Footer. Select Footer in the Web Page Navigator to the left or from Theme -> Footer. Click the “Change Style” button in the Property Panel. Select a style. !footer-styles.jpg! **Copying the Menu**. Let’s add a menu. Select the Header. Copy the Menu from the Header. Select the Footer. Paste the Menu into the Footer. Finalize the Footer making cosmetic changes. ## Blog Template ## **Blog Styles**. The Blog and the Post Templates are important parts of the Theme. Select the Blog Template from the Theme Menu. Select Theme -> Blog Template. Select a preset for the Blog in the Right Panel. !blog-template.jpg! **Blog Elements**. Modify the Post Header. Select the Metadata. Add the Author. Remove the Category. Modify the type and the color for the Metadata. Select the Post Image. Enable the Shadow. Add the Shadow effect to the Post Image. **Support of SCR Set**. Please note that the Blog and the Post Templates support the SCR SET feature used in WordPress, for example, to show different images for different responsive modes. ## Post Template ## **Post Styles**. Select the Post template in the Theme Menu. Select Theme -> Post Template. Select a Post preset in the Property Panel. Change the Post Header font size. Remove the Category. Modify the type and the color of the Post Metadata. !post-styles.jpg! **Sidebar**. Enable The Right Sidebar clicking the icon in the Property Panel. Change the Sidebar Width pulling the marker. Add gaps between the blocks. Add the fill for the Block Header. Add Spacings for both the Block Header and the Block Content. Switch to the Pages. Select a page in the Page Menu in the Top Bar. ##Ready-Made Sections## **New Section Dialog**. 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. 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 see the most appropriate ones. Select a Section Style. !quick-builder-start.png! **Selecting Styles**. If you change your mind, or you don’t like what you have just selected, you can easily choose another one. Click the “Section Style” button in the Right Panel. Select a category. Select another Section Style. In addition, we can add more Spacing between cells. !ready-sections.jpg! ## Web Page Navigator ## **Edit Page Name**. Back to the Left Navigator. It makes it easy to select and to operate sections. At the very top of the Web Page Navigator there is a Page Name. Click the Page name to change it. Type a new name, then click the Save button or press the ENTER key. **Section Menu**. Each section has a menu. The DUPLICATE operation copies the current section. Drag sections in the Navigator to switch the section order easily. If you want to delete a section, choose the DELETE option in the Section Menu. !section-menu.jpg! ## Functional Sections ## Assume, that you need a functional section, let’s say with a Contact Form, an Address and a Map. Add a new section by clicking the Plus in the Section Ruler. Select the Contact Form category in the dialog. Add the section with a form and a map. After adding the section, click the map or the form control to see available properties in the Right Panel. ## Section Editor ## The Section Editor is the central part 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. In addition, in the Panel, you can switch tabs to navigate to a Container or a Section. !section-editor.jpg! ## Section Builder ## **Builder Dialog**. Let’s add sections using the Builder. 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. !quick-start-section-builder.jpg! **Uploading Images**. Drag images from your local folder. Select images for the section. Select required texts for the section. Select a style from the auto-generated variants. Finally, click “Done” to add this section to the page. Using Nicepage is very simple. It’s similar to working in the Microsoft PowerPoint or the Apple KeyNote. At that, you get the clean code and the fully responsive HTML in the output. ## Using Section Editor ## **Blank Section**. Let’s assume that you don’t like generated variants, and the pre-designed ideas are not enough. There is a section mock-up drawn in a graphic editor, for example, Adobe Photoshop. Let’s use this section as an example. Add a blank section. Change the section height. **Sheet**. 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. ## Working with Cells ## **Uploading Images**. 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. **Using Grids**. 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. Replace the images by dragging from your local folder. Add Spacing to separate cells visually. !adding-grid.jpg! **Working with Images**. Select the cell to the left. Change the cell background from Image Fill to Color Fill. Collapse the image to make it a part of the content, and expand image back to the cell background. Select another cell. Change the Crop of the background image. Switch cells by dragging one cell over another. **Highlighting**. 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 press the DELETE key. !copy-cell.jpg! ## Adding Controls ## **Adding Icon**. Enable the Cell Fill in the Panel, change the Fill Color to Light Gray. Add 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 needed, undo the changes by selecting the default text style from the list in the Panel. The styles in this list are set in Theme -> Headings and Text. 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. !editing-text.jpg! **Adding Buttons**. Add a button alternatively, click the small plus at the top right at the cell corner. Buttons also have presets. We will use the bordered one. Colors used in the presets are set in Theme -> Colors. Make all letters in the uppercase, smaller and bold. Modify the Button Text. **Cell Alignment**. 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 the upper tips clarifying the control placing. Auto-align the content. !magnetic-guides.jpg! You see, the results are achieved easier and quicker, even than drawing this section mock-up a graphic editor like Photoshop. We have finished adding sections. ## Responsive Modes ## **Viewports**. No modern design is considered complete if it’s not responsive for various viewports. He’s the Magic! Clicking the Responsive Mode icons you see the whole page looks NICE in all modes. It was all done automatically! Amazing, isn’t it?! !responsive-modes.jpg! **Editing**. Note that all editing features are supported in all Responsive Modes. Change the Сrop of the image. Modify the Heading size. You may hide any cell, let’s say, for the Phone Landscape. Then show it back in one click. ## Preview and Export ## **Website Settings**. After you’ve made your changes, click the Preview to see the page. In addition, you can check the Website Settings, for example, for the SEO. **Export Options**. Click the Export in the Top Bar. You can Export to HTML, WordPress and Joomla, and save the Theme Screenshot. Let’s use the export to WordPress, as an example. !export.jpg! **Export Dialog**. In the dialog select “WordPress”, the destination folder and the “Theme & Content” option. Click the “Export” button. ## Uploading Theme ## **WordPress Admin**. Upload your Theme to WordPress. Open WordPress Admin. The theme is installed as usually, as a zipped package. Go to the Admin panel -> Appearance -> Themes -> Add New. Click the “Upload Theme” button. Select the downloaded zip from your local folder. **Theme Installation**. Install the Theme. Activate the Theme. After activation, the Nicepage Tab appears in the WordPress Menu. Click “Pages”. Import the Content. The Home page have appeared in the Page List. Open the Home page. **Edit in WordPress**. We see the “Edit with Nicepage” button. The Nicepage Plugin is also installed with the Theme into the WordPress. Note that Nicepage WordPress Plugin supports all editing features. Click the “Edit with Nicepage” button to open the Nicepage Editor inside the WordPress. Click the Preview to see the page. !edit-nicepage.jpg! 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 Windows Application. Please subscribe to [Nicepage channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh). Watch more [Video Tutorials](/doc/article/1318/video-tutorials).