This is my final installment in a four-part series about one of the best web builders: Nicepage. It's not an instructional set of videos. Still, instead, I'm focusing on some of the fantastic features that make this builder a standout for me.
- In video number one, I discuss why Nicepage, subscription plans, and the accompanying desktop app are so effective in helping you design both offline and online. It's one of the features that has made it my go-to choice for all of my web development projects.
- In video two, you'll witness the fantastic design features that Nicepage offers, many of which are exclusive to this platform.
- Then in the previous video, I presented the diverse publishing choices that come along with a Nicepage desktop app. These include WordPress, HTML, and Joomla. Publishing directly to the Nicepage servers is another choice.
- In this final video, we'll be exploring Nicepage within WordPress. I will show you how to use the plugin that comes with it to get your website up and running in no time. And as a bonus, I'll also share tips on customizing your site online and offline. So let's get started.
Installing the Nicepage Theme
In the last video, I demonstrated the installation of the Nicepage website design in WordPress that was created in the desktop app. It is installed in the same way any other WordPress theme is installed.
We exported the website design from the desktop app to a WordPress zip file. Then, going to WordPress, we select “Appearance” in the menu and “Themes.” We then click on “Add New” followed by clicking on “Upload Theme.” We locate and install the zip file we exported from our desktop app. Once installed, we need to activate our theme and customize it. Now, notice in the main menu on the left the addition of the Nicepage plugin.
Using Nicepage Editor
Now, let's go to “Pages” from the main menu. Hover over the page you want to edit and click “Edit with Nicepage.”
The first thing I want to point out in the editor is that you can do everything within the page editor without leaving it. This includes:
- Switching to another page
- Creating a new page
- Editing the menu
In the image, arrows point out “Pages” and “Menu Items.” It can all be done right here.
Also, if you don't use an SEO plugin, you can add meta information from the page editor. Notice the image highlighting page settings. I decided to use SEO plugins because they have additional features not included with Nicepage.
You can view all these features demonstrated in the video further down the page.
Browser View of Page
- Animation – View the page and notice the animation in the first two blocks of the page. These two instances are triggered by scrolling. Animation can also be triggered by hovering. In either case, there are numerous animations from which to select.
- Grid – A grid in Nicepage is similar to a table in which multiple cells can be created. Each cell can contain images, text, or any other type of content. A significant advantage of the grid is to tie content units together as the page responds to various devices. Otherwise, as a responsive page adjusts for multiple devices (desktop, laptop, tablet, phone), the content can become unstable in its positioning.
- Modal – A modal is a popup that overlays the page. It can have a transparent background that allows the page to show through. Any content can be created in a modal. I like to use image slide shows. A single image or button can be used as a hyperlink to launch the modal, which then displays other images.
Modals can be triggered, as mentioned, with a link, timed to launch after the page has loaded, or set to launch when a view shows intent to leave the page.
- Accordion – An accordion is a series of labels with content that ‘accordions' out when the label is clicked. (View the page)
- Tabs – Tabs are similar to accordions. Whereas accordion labels are vertical, tab labels are horizontal, revealing additional content when clicked. (View the page)
Resizing images is simple on Nicepage. Drag any side or corner of the image and drag it; the image will respond while keeping its aspect ratio. This is probably true in any web builder. However, occasionally I will need help sizing an image to fit a particular spot without losing portions of the image I want. I can often get around this problem by using HTML.
To use the HTML image tag for an image, I insert an HTML element in the cell or box where I want the picture. I enter a simple image tag in the HTML code, including the image file's location and the width I want. I do not include the height. By doing this, the browser will automatically use the correct height to keep the aspect ratio. The same effect will work by using only the height. I use a percentage rather than a fixed width. In this way, the image will be responsive for different devices. In this way, the image will be in full view.
Editing Between Online and Offline
You may wonder why I want to edit offline when I can do everything I need online. This is true. I can do everything online. But once I have published a page, every change I save will be public. If I make a significant change to a page, I may save the changes at several stages, so I don't lose them should something go wrong. My incomplete work will be publicly displayed each time I make a save. Not a very positive image to portray!
Instead, I will make sure the desktop app has the current version of the page and will make my changes in the app. Once the changes are complete, I will export them from the app and import them online. So how do I do that?
Notice where the cursor is in the nearby image and the popup menu next to it. This is a menu related to the selected block with a blue border. The popup menu lists “Export Block.” Select this and export that particular block to your computer. Then go to the desktop app and open the same page. Select a block and click on the three dots on the left side of the block. Choose to import block and locate the block you just exported from online.
You will need to do this for each block in the desktop app that is not up-to-date. If the same block was already present on the desktop but is outdated, you will need to delete the obsolete version.
There may be several applications you can make to this feature. Another application would be when you have a block of information on a website page that needs to be removed temporarily. Using this feature, you could store it on the desktop and then move it back online when you want to display it again.
This concludes this article and this series. Please use the comment box below if you have questions or comments. Is there a topic you would like me to address in a future article? Share that in the comments.
Be sure to download a free copy of Nicepage and try out these features yourself.