Author: Tom McClean
Updated: 18 Sep 2016 10:59
The Page Builder is an ambitious part of this project, and one that is central to making Portal CMS better than its competition in the CMS world. Anybody regardless of whether they are a developer or a butcher should be able to use the Page Builder to create web pages that they are proud of.
The short demonstration video below shows you how the new functionality works, so check that out and then read on to learn more about it.
In order to make the experience using the Page Builder as simple, hassle free and quick as possible we made big changes to the way you use it, we have also made some small changes to the interface in response to some user testing we have completed.
Previously when you wanted to add a section or a component to a page, you would need to click an icon in a specific location on the page and then select what you want to add from a pop up menu. This worked functionally but was not ideal for the user in some cases as it was some times unclear how to use the functionality.
In order to remedy this we have changed the way you add sections and components so that there are only two buttons on the page that allow you to add content; one to add a component and one to add a section, both buttons are labelled with text and an icon.
When you click on one of the buttons, for example to add a section, you are no longer faced with a pop up which covers most of the page. Portal CMS now uses something similar to an App Drawer in the Android Mobile Operating System. A menu that contains all of the section options is displayed on screen immediately (no loading times to wait for). When it appears it takes up very little real estate; meaning you can still see 90 percent of your page.
If you find that the 10 percent you wanted to see is hidden behind the menu, you can simply move or hide the menu and when you find a section that you want to add, you simply click it and it gets added to the bottom of your page.
A very similar approach has been made for components, but this has gone one step further to allow the user to drag a component out of the app drawer and onto the page in the section or container they want it to be in. This means that you can add multiple components incredibly easily and without having to continuously scroll up and down your page until you find the right buttons to click.
The tricky element in adding this functionality was trying to continue to support mobile devices fully for page editing, this was a particular challenge as there is so little space on a mobile phone. This is why some large website builders like Wix still don't support mobile device editing to this day.
For Portal CMS editing on a mobile device is very important to us, so when you use this device type you can do everything that you could do on a large device. When using the functionality the app drawer naturally takes up most of the screen real estate on offer, but when you start to drag a component onto your page the app drawer hides itself away automatically, allowing you to drag and let go of the component in the exact place you wanted it to be.
If you ever wanted to be able to edit your website while waiting for the kettle to brew or sitting on a train, download Portal CMS and see what it can do for you.
Let us know what you think about this new functionality by adding a comment on this post, or download the source code and try it out for yourself!