From an image mock-up to a real website. Business website with Nicepage Website Builder. HD

06.06.2018
Please visit our website: https://www.nicepage.com Follow us on Facebook: https://www.facebook.com/nicepageapp/ Watch more tutorials: https://nicepage.com/doc/article/1318/video-tutorials Also, subscribe to this channel. 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. Theme Settings Run Nicepage. 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. Select Theme - Colors. We will modify the current Palette. 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. 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. 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. Setting Headings and Text styles help to apply the right styles in one click. It makes the page look solid, consistent and beautiful. Introduction Section The first section was added by default with the page. 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. For the texts we’ll use a container. To add a container select Add - Container. Later, you can use the “C” hotkey to add a сontainers much faster. 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. Adding Grid 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. Make the Grid Sheet-wide. Increase spacing between the cells. While moving and aligning you see the red lines. 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. Replace t

Похожие видео

Показать еще