Visit our website: www.nicepage.com
Read more at nicepage.com/d...
Subscribe to find more information:
/ nicepage
/ nicepagecom
/ nicepageapp
We will demonstrate Nicepage Website Builder as a WordPress plugin.
Installation
We’ll start with visiting nicepage.com website. Download the Nicepage plugin for WordPress. Install the plugin.
Add Pages
First, you can create pages from scratch. Second, you can build using the Page Builder. Finally, you can always use the pre-designed examples made by designers. We can start with any of these samples.
User Interface
Top Bar. There is a Top panel containing the list of WordPress Pages, the Website Settings, the Theme Properties, the Add Menu at the top center.
The Web Page Navigator is located to the left.
Section Editor
Editor overview. The central part of the Nicepage is the Section Editor. Here you can add, move, position and align various controls.
Selecting Elements. While choosing elements in the Editor, the Central part, we see the Properties shown in the Property Panel to the right.
Theme Settings
Global Settings. All modern websites and themes have the Global Settings including the Color settings, the Font settings, and the Typography.
Colors. In the reality, there are not that many websites that use more than five colors.
Select the Font Scheme.
Typography. Next, we will define the Typography. The Typography Sets change the text presentation on the page.
Headings and Text. The detailed font tuning for a page element is made in the Headings and Text.
Working with Sections
Section Overview. Proceeding to the page design. Today, web pages are mostly made of sections, the main building blocks of the modern web design.
Adding Sections. There is the Section Style list to the left, and Thematic Categories at the top.
Changing a Style. If you change your mind, or you don’t like the style you have just selected, you can easily choose another style for your section.
Functional Sections. Assume, that you need a functional section, such as contact form, or address with a map. It is very easy to add such section.
Section Builder. Let’s add sections using the Builders. In the Add Section dialog click the Builder.
CMS Sections
Post Sections. The same way, we will add sections auto-generated from the WordPress Posts. In the New Section Builder select the “Social and Web” Tab. Switch to Posts tab. Select Post images and Texts. Select a design.
Same with Product Sections.
Working with the Editor
Adding Blank Section. This is the section we would like to add to our site. Let’s add a blank section.
Adding Controls. In the Add Menu we see Containers, Basic Controls and Functional Controls. To create this section we need to add a grid to which we will add the texts and images.
Using Grids. Select “Grid” and add it to the section. Shrink the height and the width of this grid. Also, we change the location and position of the grid.
Working with Cells
Cell Background. Let’s replace the images. Images are changed by dragging and dropping an image from the folder or the desktop into the section.
Moving Cells. To change the position of the cells, simply drag one cell over another.
To copy a cell or a control, drag the source a cell or a control while holding the CTRL key. To remove the control or the whole cell content, select the cell, then press the DELETE key.
Add an Icon. Add Texts.
Adding a Button. Add Button using the alternative way, by clicking the Plus to the right of the cell container. The Button also has presets. Let’s keep the bordered one.
Cell Alignment. Click the Update to pre-save the page. Moving controls we see guides and sizes in the red boxes, which help to follow those principles.
Highligting. Containers are highlighted with borders and labeled with hints, therefore it is always clear in which container controls will be placed. Shortcodes and Widgets
Adding a Shortcode. We will add another black section to illustrate the work with the WordPress widgets and shortcodes. Add a grid with two cells. Delete the default content in the cells pressing the DELETE key.
Adding a Widget. Select the Left Cell. Click the Add menu - WordPress Widget - Calendar Widget. Expand the widget area to the cell. Select the Red Cell. Click the Add menu - Shortcode. Enter the code in the Shortcode Area in the Right Panel. Expand the widget area to the cell. The red guides are very helpful for resizing and aligning.
Preview.
Selecting a template
Switch to WordPress. Open the Pages. Open your newly created Page. You can select any other theme template and click the Publish. Now the previously pre-saved page is finally published.
We hope you have enjoyed this presentation of Nicepage Website Builder for WordPress.
14 окт 2024
