We will show how to design this web page in minutes the new way. It may become your personal secret to be steps ahead in the industry. You will be able to present stories, products and services fast, in minutes.

Researches show, there are only 8 seconds to impress visitors with the design. We will demonstrate this using the example. The classic way you see to the left, it’s a mockup drawn in Adobe Photoshop. We’ll show you the new way!

Theme Settings

Adding New Website. Add a new website with a new page. We start with the Theme Settings. Theme Settings are used to customize Colors, Fonts, Typography for the whole website. These styles will be used for all text elements on the web page. It’s is very convenient and looks nice!

Chooosing Colors. In the mockup we see that two colors, besides black and white, used throughout the page. We will add those colors to the Palette. Select Theme -> Colors. We will modify the current Pallete. Use the color picker to select the color. Copy the Color value. Paste this value into the Color 1 field. Add the second Color similarly. Use Color picker. Copy the value. Paste this value into the Color 2 field.

colors.png

Chooosing Fonts. Proceed to the Fonts. We will use the Font Scheme and the Typography set by default and will do the fine-tuning. Select Theme -> Headings and Texts. Modify the Headings, Text and Hyperlink. Later, adding these elements to sections, the styles you set will be applied automatically.

Modifying Hyperlinks. For the Hyperlink there is an orange underline. Set the width and the color of this line. The orange used for the line has been added in Colors earlier. Note, this Hyperlink style will be used for all hyperlinks on this web page.

Headings and Text. Setting Headings and Text styles help to apply the right styles in one click. It makes the page look solid, consistent and beautiful. And it saves time a lot!

headings.png

We have finished with the Theme. Now we are proceeding to Sections, the main building blocks of the Modern Web Design.

Introduction Section

Replacing images. The first section was added by default with the page. We will use it for the Introduction. Let’s start. Increase the Section Height. In the Right Panel change the Color Fill to Image Fill for the section. Replace the image for the background dragging another from your local folder.

Using Containers. For the texts we’ll use a container. Containers help to group, to move and to align all nested elements at once. Also, if need, the group can have a common background for all elements. To add a container select Add -> Container. Later, you can use the “C” hotkey to add a сontainers much faster.

container.png

Adding Texts. Move the container left. Increase the width. Add a Title, select Add-> Text -> Title. Add a Line, select Add -> Line. Make the Title white. Modify the Title text. Please note, the style applied to the Title has been set previously in the Theme -> Headings and Texts.

intro-1.png

Modifying the Line. As you see in the mockup, the Line should be orange. Also make the line thicker and shorter. As a reminder, the orange was set in Theme -> Colors. Align the whole block bottom. We see feature icons with texts below the Title.

Adding Grid

Modifying the Grid. The easiest way to add a row of similar text blocks is to use a Grid. Select Add -> Grid. There over a hundred of grid layouts available. Select a Grid with four cells. In addition, grids are very useful for the responsive modes, as, for smaller screens, cells are reorganized automatically. Shrink the Grid Height. Align the Grid Left.

grid.png

Guidelines. Make the Grid Sheet-wide. Increase spacing between the cells. While moving and aligning you see the red lines. Those are the guides that help to snap controls to containers, sections, and to each other.

Editing the Content. Delete the cell content. Select the first cell, and press the Delete key. Add an Icon. Press the “I” hotkey to open the dialog. In the dialog type “Phone” in the search field. Select a Linear Phone icon. Press the “T” hotkey to add a text. Delete last two lines of the text added by default. Now we will copy the cell to make all cells consistent. To copy drag the cell over another holding the the CTRL key.

copy.png

Working with Icons. Replace the icon in the second sell. Search for a “Graph” icon. For the third cell replace with the “Idea” icon, select a Light Bulb. For the fourth use “Alarm” keyword, and select a Linear Bell. The first Introduction Section is ready. Isn’t that simple?

icons.png

Split Section

Adding the Grid. Let’s add the second section. Add a blank section. Increase the Section Height. We see that visually the content of this section is divided into two parts. The best in this case is also to use a grid. Select Add -> Grid. Add a Grid with 2 cells.

grid-layout.png

Change the height of the Grid. Make the right cell bigger. Fix the Alignment of the Grid. Again, the red lines, the snapping guides are very helpful. Select the right cell. Collapse the image. Resize the image. Guides help to snap to the center.

Modifying the Image. Replace the image by dragging another from your local folder. Enable “Shadow” in the Right Panel. Select a Shadow Preset. Customize the Shadow. Modify Blur and Transparency.

image.png

Adding Texts. Select the left cell. Press the DELETE key to clear the cell. Press “L” to add a line. Press “2” to add Heading 2. Press “T” to add a text, and press “H” to add a Hyperlink. Make the line orange, thicker, and shorter. Modify the Heading. Add more text. Change the Hyperlink text. Align the content in the left cell by pressing the align options in the Right Panel. This section section is also finished.

Section With Overlapping

Mofifying the Cell. Add a Blank section. Change the background color to Color 1 set in the Theme Settings. Increase the Section Height. Add a grid with two cells like for the previous section. Shrink the Grid Height. Make the right cell bigger.

Adding the Content. Replace the image in the right cell by dragging another image from your local folder. Select the left cell, then press the DELETE key. Press “L” to add a line. Press “2” to add Heading 2. Press “T” to add a text. Press “H” to add a Hyperlink. Make the Hyperlink underline orange.

Overlap Making. Make the line above the Heading also orange, thicker, and shorter. Turn the line 90 degrees to the top. You see the line now overlaps the previous sections. To do overlapping has never been easier!

overlapping.png

Mofifying Texts. Modify the Heading Text. Add more text. Lastly, modify the Hyperlink text.

Section with Columns

Adding the Grid. Proceed to the Team section. Despite that there are many pre-designed Team sections, we will do this section also from scratch. Add a Blank section. Increase the Section Height. Add a grid with three cells. Change the Grid height. Move the Grid up. Guides are handy again. Add spacing between the cells.

grid-3.png

Modifying the Image. Select the first cell and collapse the background image. The image became a part of the cell content. Resize the image snapping to the cell’s top, left and right. Leave space below the image for the Name and the text.

Modifying the Content. Enable the Fill for this cell in the right Panel. Change the color to light gray. Press “4” to add Heading 4 for the Name, and “T” for the Text. Remove the extra text. Enter a Name. Move the Name and the Text down. While moving red guides and sizes in boxes help to align.

Copying Cells. Slightly increase the height of the Image. Replace the image with another one from your local folder. To keep cells consistent copy the first cell into other two. Replace the images. Modify names. Now we will add a title for this section above the Grid. In the mockup we see the Heading and the Line.

copy-cells.png

Using Containers. To group these elements we will use a container. We have already used a container to group elements in the first Introduction section.

container-line.png

Press “C” to add a Container. Resize the Container. Press “L” to add a line. Press “2” to add Heading 2 for the section title. Modify the Heading 2. Make the line orange, thicker and shorter. Align the content vertically. The page is ready. Wasn’t that fast?!

Responsive Preview

Mobile Views. Click the Preview to the right of the Top Bar. And now, he’s the Magic! Clicking the Responsive Mode icons you see that the page looks NICE is all modes. It was all done automatically!

responsive.png

Please subscribe to Nicepage channel.
Watch more Video Tutorials.

We will show how to design this web page in minutes the new way. It may become your personal secret to be steps ahead in the industry. You will be able to present stories, products and services fast, in minutes. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/rGBiRF7UAQc?rel=0" frameborder="0" allowfullscreen></iframe></div> Researches show, there are only 8 seconds to impress visitors with the design. We will demonstrate this using the example. The classic way you see to the left, it’s a mockup drawn in Adobe Photoshop. We’ll show you the new way! ##Theme Settings## **Adding New Website**. Add a new website with a new page. We start with the Theme Settings. Theme Settings are used to customize Colors, Fonts, Typography for the whole website. These styles will be used for all text elements on the web page. It’s is very convenient and looks nice! **Chooosing Colors**. In the mockup we see that two colors, besides black and white, used throughout the page. We will add those colors to the Palette. Select Theme -> Colors. We will modify the current Pallete. Use the color picker to select the color. Copy the Color value. Paste this value into the Color 1 field. Add the second Color similarly. Use Color picker. Copy the value. Paste this value into the Color 2 field. !colors.png! **Chooosing Fonts**. Proceed to the Fonts. We will use the Font Scheme and the Typography set by default and will do the fine-tuning. Select Theme -> Headings and Texts. Modify the Headings, Text and Hyperlink. Later, adding these elements to sections, the styles you set will be applied automatically. **Modifying Hyperlinks**. For the Hyperlink there is an orange underline. Set the width and the color of this line. The orange used for the line has been added in Colors earlier. Note, this Hyperlink style will be used for all hyperlinks on this web page. **Headings and Text**. Setting Headings and Text styles help to apply the right styles in one click. It makes the page look solid, consistent and beautiful. And it saves time a lot! !headings.png! We have finished with the Theme. Now we are proceeding to Sections, the main building blocks of the Modern Web Design. ##Introduction Section## **Replacing images**. The first section was added by default with the page. We will use it for the Introduction. Let’s start. Increase the Section Height. In the Right Panel change the Color Fill to Image Fill for the section. Replace the image for the background dragging another from your local folder. **Using Containers**. For the texts we’ll use a container. Containers help to group, to move and to align all nested elements at once. Also, if need, the group can have a common background for all elements. To add a container select Add -> Container. Later, you can use the “C” hotkey to add a сontainers much faster. !container.png! **Adding Texts**. Move the container left. Increase the width. Add a Title, select Add-> Text -> Title. Add a Line, select Add -> Line. Make the Title white. Modify the Title text. Please note, the style applied to the Title has been set previously in the Theme -> Headings and Texts. !intro-1.png! **Modifying the Line**. As you see in the mockup, the Line should be orange. Also make the line thicker and shorter. As a reminder, the orange was set in Theme -> Colors. Align the whole block bottom. We see feature icons with texts below the Title. ##Adding Grid## **Modifying the Grid**. The easiest way to add a row of similar text blocks is to use a Grid. Select Add -> Grid. There over a hundred of grid layouts available. Select a Grid with four cells. In addition, grids are very useful for the responsive modes, as, for smaller screens, cells are reorganized automatically. Shrink the Grid Height. Align the Grid Left. !grid.png! **Guidelines**. Make the Grid Sheet-wide. Increase spacing between the cells. While moving and aligning you see the red lines. Those are the guides that help to snap controls to containers, sections, and to each other. **Editing the Content**. Delete the cell content. Select the first cell, and press the Delete key. Add an Icon. Press the “I” hotkey to open the dialog. In the dialog type “Phone” in the search field. Select a Linear Phone icon. Press the “T” hotkey to add a text. Delete last two lines of the text added by default. Now we will copy the cell to make all cells consistent. To copy drag the cell over another holding the the CTRL key. !copy.png! **Working with Icons**. Replace the icon in the second sell. Search for a “Graph” icon. For the third cell replace with the “Idea” icon, select a Light Bulb. For the fourth use “Alarm” keyword, and select a Linear Bell. The first Introduction Section is ready. Isn’t that simple? !icons.png! ##Split Section## **Adding the Grid**. Let’s add the second section. Add a blank section. Increase the Section Height. We see that visually the content of this section is divided into two parts. The best in this case is also to use a grid. Select Add -> Grid. Add a Grid with 2 cells. !grid-layout.png! Change the height of the Grid. Make the right cell bigger. Fix the Alignment of the Grid. Again, the red lines, the snapping guides are very helpful. Select the right cell. Collapse the image. Resize the image. Guides help to snap to the center. **Modifying the Image**. Replace the image by dragging another from your local folder. Enable “Shadow” in the Right Panel. Select a Shadow Preset. Customize the Shadow. Modify Blur and Transparency. !image.png! **Adding Texts**. Select the left cell. Press the DELETE key to clear the cell. Press “L” to add a line. Press “2” to add Heading 2. Press “T” to add a text, and press “H” to add a Hyperlink. Make the line orange, thicker, and shorter. Modify the Heading. Add more text. Change the Hyperlink text. Align the content in the left cell by pressing the align options in the Right Panel. This section section is also finished. ##Section With Overlapping## **Mofifying the Cell**. Add a Blank section. Change the background color to Color 1 set in the Theme Settings. Increase the Section Height. Add a grid with two cells like for the previous section. Shrink the Grid Height. Make the right cell bigger. **Adding the Content**. Replace the image in the right cell by dragging another image from your local folder. Select the left cell, then press the DELETE key. Press “L” to add a line. Press “2” to add Heading 2. Press “T” to add a text. Press “H” to add a Hyperlink. Make the Hyperlink underline orange. **Overlap Making**. Make the line above the Heading also orange, thicker, and shorter. Turn the line 90 degrees to the top. You see the line now overlaps the previous sections. To do overlapping has never been easier! !overlapping.png! **Mofifying Texts**. Modify the Heading Text. Add more text. Lastly, modify the Hyperlink text. ##Section with Columns## **Adding the Grid**. Proceed to the Team section. Despite that there are many pre-designed Team sections, we will do this section also from scratch. Add a Blank section. Increase the Section Height. Add a grid with three cells. Change the Grid height. Move the Grid up. Guides are handy again. Add spacing between the cells. !grid-3.png! **Modifying the Image**. Select the first cell and collapse the background image. The image became a part of the cell content. Resize the image snapping to the cell’s top, left and right. Leave space below the image for the Name and the text. **Modifying the Content**. Enable the Fill for this cell in the right Panel. Change the color to light gray. Press “4” to add Heading 4 for the Name, and “T” for the Text. Remove the extra text. Enter a Name. Move the Name and the Text down. While moving red guides and sizes in boxes help to align. **Copying Cells**. Slightly increase the height of the Image. Replace the image with another one from your local folder. To keep cells consistent copy the first cell into other two. Replace the images. Modify names. Now we will add a title for this section above the Grid. In the mockup we see the Heading and the Line. !copy-cells.png! **Using Containers**. To group these elements we will use a container. We have already used a container to group elements in the first Introduction section. !container-line.png! Press “C” to add a Container. Resize the Container. Press “L” to add a line. Press “2” to add Heading 2 for the section title. Modify the Heading 2. Make the line orange, thicker and shorter. Align the content vertically. The page is ready. Wasn’t that fast?! ##Responsive Preview## **Mobile Views**. Click the Preview to the right of the Top Bar. And now, he’s the Magic! Clicking the Responsive Mode icons you see that the page looks NICE is all modes. It was all done automatically! !responsive.png! Please subscribe to [Nicepage channel](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh). Watch more [Video Tutorials](/doc/article/1318/video-tutorials).