Feature Highlight

User Experience Improvements to the Page Builder (App Drawers)

We recently made some changes to the Page Builder to make it easier and quicker to use. Learn more about what has changed inside this post.

Author Avatar

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!

You need to Login or Register to comment.


New Carousel Component

We have been working hard to add new content to Portal CMS, one of the recent components we have added is a new Carousel Component.

Release News

Portal CMS 1.2 - Development Updates

We are hard at work making the next version of Portal CMS, learn more about what we are changing in this major release.

Release News

Portal CMS 1.1 Released

We just released the latest version of Portal CMS on our GitHub pages, this is a big release that improves Portal CMS in a whole host of ways.

Feature Highlight

Navigation Improvements in Portal CMS

We have recently developed some awesome new ways to manage the navigation in your Portal CMS website. Check out what is new in this post.

Feature Highlight

Portal CMS - Developing the Theme Manager

This post takes a look at the development so far on a major feature for Portal CMS. The abilty to theme your websites easily to make them even more unique.

Release News

Portal CMS - Release 1.0

The first stable release of Portal CMS is now available, so its a great time to start using Portal CMS for your own website or blog.

Feature Highlight

New Features Added to Portal CMS Including Resource Bundling, Font Awesome, Role Driven Sections and more

We have recently deployed some really cool new features to make Portal CMS even better. Read this post to find out more.

Feature Highlight

Editor Support Added to Portal CMS

Often you want to setup a website for somebody but you want to limit how much they can affect it without you, maybe you want to be responsible for the site, but they want to create content. Now you can in Portal CMS.


Portal CMS Demo Website Now Available

We wanted to make it as easy as possible to try out Portal CMS. So we setup a demo website you can login to and try it out!


Welcome to Portal CMS

Welcome to Portal CMS, and thank you for visiting. This post covers what Portal CMS is, and can do for you.