We are presenting Nicepage, the Website Builder. We are going to show how to create a website of any complexity in Nicepage. For demonstration, we’ll use the example created in a graphic editor, such as Adobe Photoshop. The idea we see is to the left.
Theme Settings
Theme Settings. Create a new website. Add a new page. We will start from the Theme Settings. This is very convenient, as we set the Colors, Fonts, Font Sizes, and Typography once for the whole page or even the website.
Modifying Colors. We see the gradient in the sample to the left made with two colors. It’s common for colors to be used throughout the page; therefore, it is convenient to copy color values and add them 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 add it to the Palette.
Modifying Fonts. Customize the Fonts used in the website’s headings and Texts. Looking at the sample on the left, we see approximately what sizes and weights the heading needs. Set the Font values. Lately, when adding these text elements to blocks, we have been getting the desired results at once. Nicepage HTML Website Builder saves a lot of time. Set the Headings, the text, and the Hyperlinks.
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 a rectangle to the block background. Select Rectangle from the top menu Add->Rectangle or use the “R” hotkey. Resize the rectangle so it covers half of the block’s height. Change the Color Fill to Gradient Fill, as shown in the sample on the left.
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, we need containers. The simplest way is to use a grid with two equal cells. Select Add->Grid, and then the grid with two cells.
Grids for Mobile Views. The grid also simplifies configuring Responsive Modes, as on narrow screens the cells are automatically reordered one under another.
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.
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 Microsoft PowerPoint or 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.
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.
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. For the Responsive Modes, you will need to make manual placement adjustments for each mode, which is inconvenient. Increase the Block’s Height. Resize the Grid. Align the Grid using the Magnets.
Modifying the Content. Let’s add controls to the Grid. In the right cell, change Image Fill to 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 in 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.
** Modifying the Image**. We see that the rectangle partially overlaps the neighboring cell and is 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.
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.
Pre-designed Blocks. Add a blank block. We see an Image Gallery in this block. 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.
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.
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 by 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.
