We are presenting Nicepage, the Website Builder. We going to show how to create a website of any complexity in Nicepage. For demonstration we’ll use the example created in the graphic editor, for example Adobe Photoshop. The idea we see is to the left.

Theme Settings

Theme Settings. Create a new website. Add a new page. We wil start from the Theme Settings. This is very convenient, as we set the Colors, the Fonts, the Font Sizes and the Typography once and for the whole page or even the website.

theme-colors.png

Modifying Colors. We see the gradient in the sample to the left made with two colors. It’s common that colors are used throughout the whole page, therefore it is convenient to copy color values and add those to the Website Palette. Copy the first color value using the Color picker and add this value to the Website Palette. Copy the second color value and also add its value to the Palette.

theme-colors-1.png

Modifying Fonts. Customize the Fonts used in Website’s Headings and Texts. Looking at the sample to the left, we see approximately what sizes and weights of he Heading we need. Set the Font values. Lately, while adding these text elements to blocks, we will get the desired results at once. Nicepage HTML Website Builder saves time a lot. Set the Headings, the Text and the Hyperlinks.

texts.png

We have finished with the Theme Settings for our website. Now we are proceeding to designing the blocks.

Grid Block

Using a Rectangle. We start with the Introduction block. Increase the block Height. Add rectangle to the block background. Select Rectangle from the top menu Add->Rectangle or use the “R” hotkey. Resize the rectangle so it covers a half of the block’s height. Change the Color Fill to Gradient Fill, as we see in the sample to the left.

rectangle.png

Adding the Grid. Now we need to place a picture and a text inside the block. Visually, we can divide the content into two parts, therefore, for that we need containers. The most simple way is to use a grid with two equal cells. Select Add->Grid, and then the grid with two cells.

grid-1.png

Grids for Mobile Views. The grid also simplifies the setting of the Responsive Modes, as in the narrow screens the cells are reordered one under another automatically.

Modifying the Image. Resize the Grid. Select the left cell and press the DELETE key. Select the second cell. Collapse the image. Resize the image. Replace a picture by dragging it from the desktop or your local folder. Place it over the default image and release the mouse button. Enable the Shadow in the Right Panel. Change the Shadow’s Settings. Change the Color, the Blur and the Transparency.

image-1.png

Adding the Content. Add the Content to the Left Cell. Any element can be added from the Add menu at the top or using the hotkeys. Add the Line. Change the Line Weight and the Width. The Control Resize is done easily by pulling the control markers. It works the same way as in the Microsoft Powerpoint or the Apple Keynote. This is the most natural way. Add a Title. Change the Title Text. Make it two lines. Add a Text. Now, let’s add the List to the right. Add the first line.

text-1.png

Copying Cells. Copy the other ones by holding the CTRL key and dragging the copied control, or use the context menu. Placing of controls is made simple, also by dragging.

copy-1.png

Proceed to the next block.

Overlapping Block

Using the Grid. Add a new block. We will also use the Grid. You can place controls without a grid, if you want. At that for the Responsive Modes you will need to make placement adjustments manually for each mode, which is not convenient. Increase the Block’s Height. Resize the Grid. Align the Grid using the Magnets.

grid-2.png

Modifying the Content. Let’s add controls to the Grid. In the right cell, change Image Fill to the Color Fill for the background. Add a Line. Modify the Line. Add Heading 2. Modify the Heading. And Text. Change the Alignment to Middle Right. Proceed to the Left Cell. Collapse the Image on the background. Replace the default image by dragging the needed one from the folder.

Adding Rectangle 1. We will place two rectangles under the picture. Add a Rectangle. Resize the Rectangle. Change the Fill Color to Light Gray. Arrange the image above the rectangle by using the Arrange option in the toolbar.

Modyfying the Image. We see that the rectangle partially overlaps the neighbour cell and not fully visible. Switch off the Fill of the right cell. Resize the image. Enable the Shadow. Set the Shadow Properties: Offsets, Blur, and Transparency.

image-2.png

Adding Rectangle 2. Add another Rectangle. Move the rectangle below the image with the Arrange option. This block is also complete. That’s simple!

Block with Images

Editing the Content. Add a blank block. Resize the block. For this block we will also use the Grid with two cells. Resize the Grid. Replace a picture on the background of the right cell. Shrink the left cell by dragging the middle border.

Copying the Content. Select the left cell and press the DELETE key. Add the list the same way it was done earlier. Copy the controls by holding the CTRL key and dragging them to the destination positions. Modify the Hyperlinks. Lastly, add a Text. This block is also ready.

text-3.png

Pre-designed Blocks. Add a blank block We see that there is an Image Gallery in this block. The Nicepage provides over 1500 (fifteen hundred) unique layouts, and now we will search and use one of those. You can filter the results with the required number of images and/or texts. This speeds up the process greatly. Also we can filter by the Thematic Categories. Select a similarly looking block. Change the block’s height. Change the Heading Container Width and the Height. Delete the Default Content.

image-section.png

Modifying the Content. Add a Line. Change the line width. Make the line thicker. Add Heading 2. Modify the Heading 2. Make it in two lines. Align Top Left. Select the block. Change the Color Fill to the Gradient Fill for this block. Change the Gradient Colors. Resize the Grid. Move the Heading above the grid. Make the Line and the Heading white. Replace images by dragging the needed ones from the local folder.

Block Presets. Modify the Footer. Select the Footer style from the list. Change the content in columns. Align the column top right.

footer.png

Working with Cells. Copy the Second Cell by holding the CTRL key to the Third and the Fourth Ones. Change the Content of those cells. Replace the image in the first column dragging the logo from the local folder. Add Heading 4 for the Logo Text.

Preview in Mobile Views

Preview the page in the Responsive Modes. Desktop. Laptop. Tablet. Phone Landscape. Phone Portrait.

responsive.png

See Also

Get Started With Nicepage

We are presenting Nicepage, the Website Builder. We going to show how to create a website of any complexity in Nicepage. For demonstration we’ll use the example created in the graphic editor, for example Adobe Photoshop. The idea we see is to the left. <div class="video-container"><iframe width="885" height="500" src="//www.youtube.com/embed/cUGxFKyRsxQ?rel=0" frameborder="0" allowfullscreen></iframe></div> ##Theme Settings## **Theme Settings**. Create a new website. Add a new page. We wil start from the Theme Settings. This is very convenient, as we set the Colors, the Fonts, the Font Sizes and the Typography once and for the whole page or even the website. !theme-colors.png! **Modifying Colors**. We see the gradient in the sample to the left made with two colors. It’s common that colors are used throughout the whole page, therefore it is convenient to copy color values and add those to the Website Palette. Copy the first color value using the Color picker and add this value to the Website Palette. Copy the second color value and also add its value to the Palette. !theme-colors-1.png! **Modifying Fonts**. Customize the Fonts used in Website’s Headings and Texts. Looking at the sample to the left, we see approximately what sizes and weights of he Heading we need. Set the Font values. Lately, while adding these text elements to blocks, we will get the desired results at once. Nicepage [HTML Website Builder](https://nicepage.com/html) saves time a lot. Set the Headings, the Text and the Hyperlinks. !texts.png! We have finished with the Theme Settings for our website. Now we are proceeding to designing the blocks. ##Grid Block## **Using a Rectangle**. We start with the Introduction block. Increase the block Height. Add rectangle to the block background. Select Rectangle from the top menu Add->Rectangle or use the “R” hotkey. Resize the rectangle so it covers a half of the block’s height. Change the Color Fill to Gradient Fill, as we see in the sample to the left. !rectangle.png! **Adding the Grid**. Now we need to place a picture and a text inside the block. Visually, we can divide the content into two parts, therefore, for that we need containers. The most simple way is to use a grid with two equal cells. Select Add->Grid, and then the grid with two cells. !grid-1.png! **Grids for Mobile Views**. The grid also simplifies the setting of the Responsive Modes, as in the narrow screens the cells are reordered one under another automatically. **Modifying the Image**. Resize the Grid. Select the left cell and press the DELETE key. Select the second cell. Collapse the image. Resize the image. Replace a picture by dragging it from the desktop or your local folder. Place it over the default image and release the mouse button. Enable the Shadow in the Right Panel. Change the Shadow’s Settings. Change the Color, the Blur and the Transparency. !image-1.png! **Adding the Content**. Add the Content to the Left Cell. Any element can be added from the Add menu at the top or using the hotkeys. Add the Line. Change the Line Weight and the Width. The Control Resize is done easily by pulling the control markers. It works the same way as in the Microsoft Powerpoint or the Apple Keynote. This is the most natural way. Add a Title. Change the Title Text. Make it two lines. Add a Text. Now, let’s add the List to the right. Add the first line. !text-1.png! **Copying Cells**. Copy the other ones by holding the CTRL key and dragging the copied control, or use the context menu. Placing of controls is made simple, also by dragging. !copy-1.png! Proceed to the next block. ##Overlapping Block## **Using the Grid**. Add a new block. We will also use the Grid. You can place controls without a grid, if you want. At that for the Responsive Modes you will need to make placement adjustments manually for each mode, which is not convenient. Increase the Block’s Height. Resize the Grid. Align the Grid using the Magnets. !grid-2.png! **Modifying the Content**. Let’s add controls to the Grid. In the right cell, change Image Fill to the Color Fill for the background. Add a Line. Modify the Line. Add Heading 2. Modify the Heading. And Text. Change the Alignment to Middle Right. Proceed to the Left Cell. Collapse the Image on the background. Replace the default image by dragging the needed one from the folder. **Adding Rectangle 1**. We will place two rectangles under the picture. Add a Rectangle. Resize the Rectangle. Change the Fill Color to Light Gray. Arrange the image above the rectangle by using the Arrange option in the toolbar. **Modyfying the Image**. We see that the rectangle partially overlaps the neighbour cell and not fully visible. Switch off the Fill of the right cell. Resize the image. Enable the Shadow. Set the Shadow Properties: Offsets, Blur, and Transparency. !image-2.png! **Adding Rectangle 2**. Add another Rectangle. Move the rectangle below the image with the Arrange option. This block is also complete. That’s simple! ##Block with Images## **Editing the Content**. Add a blank block. Resize the block. For this block we will also use the Grid with two cells. Resize the Grid. Replace a picture on the background of the right cell. Shrink the left cell by dragging the middle border. **Copying the Content**. Select the left cell and press the DELETE key. Add the list the same way it was done earlier. Copy the controls by holding the CTRL key and dragging them to the destination positions. Modify the Hyperlinks. Lastly, add a Text. This block is also ready. !text-3.png! ## [Image Gallery Block](page:98179) **Pre-designed Blocks**. Add a blank block We see that there is an [Image Gallery](page:98179) in this block. The Nicepage provides over 1500 (fifteen hundred) unique layouts, and now we will search and use one of those. You can filter the results with the required number of images and/or texts. This speeds up the process greatly. Also we can filter by the Thematic Categories. Select a similarly looking block. Change the block’s height. Change the Heading Container Width and the Height. Delete the Default Content. !image-section.png! **Modifying the Content**. Add a Line. Change the line width. Make the line thicker. Add Heading 2. Modify the Heading 2. Make it in two lines. Align Top Left. Select the block. Change the Color Fill to the Gradient Fill for this block. Change the Gradient Colors. Resize the Grid. Move the Heading above the grid. Make the Line and the Heading white. Replace images by dragging the needed ones from the local folder. ##Working with the Footer## **Block Presets**. Modify the Footer. Select the Footer style from the list. Change the content in columns. Align the column top right. !footer.png! **Working with Cells**. Copy the Second Cell by holding the CTRL key to the Third and the Fourth Ones. Change the Content of those cells. Replace the image in the first column dragging the logo from the local folder. Add Heading 4 for the Logo Text. ##Preview in Mobile Views## Preview the page in the Responsive Modes. Desktop. Laptop. Tablet. Phone Landscape. Phone Portrait. !responsive.png! ##See Also - [Making Business Website](page:1336) - [Nicepage on YouTube](https://www.youtube.com/playlist?list=PLrT1zCpaZbn5Td7n67dcjue4nba8VD9hh) - [Nicepage Video Tutorials](page:1318) ## Get Started With Nicepage - [HTML Website Builder](https://nicepage.com/html)