Portal CMS

User Experience Improvements to the Portal CMS Page Builder

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

Author Avatar

Author: Tom McClean

Updated: 25 Aug 2016 21:54

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.

Tom McClean at 25 Aug 2016 21:50

Learn more about Portal CMS on its official website: http://portalcms.online


New Project: XContext

Find out how I decided to cut down my SQL Azure costs on Microsoft Azure.


Introducing LogBook

I recently wanted to add some basic logging into an MVC Web Project, but all of the big offerings like Elmah and Log4Net are too bloated, so I decided to write a minimalistic logging tool of my own.

Tips and Tricks

Implementing Effort into a C# MVC Website to allow Unit Testing

I recently wanted to have the ability to write Unit Tests for a personal project, I picked Effort.EF6 to help. This post goes through the setup for "Effort" and why you should choose it.

Portal CMS

Portal CMS Demo Website Now Available

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


Summer Holiday in Thassos, Greece

I just returned from a holiday in Thassos in Greece, so I wanted to post up some photo's to show what I got up too!


What is SendGrid?

As somebody who develops quite a lot of websites, I find that most of the time I tend to use a lot of the same technologies and services. A lesser known service which I have come to love is called SendGrid, heres why I love it.

Portal CMS

Inline Editing in Portal CMS

I recently releasd a huge change to the Portal CMS technology I have been working on. The ability to change content just like you do offline in Microsoft Office. No need to save changed, nor wait for changes to be made.

Tips and Tricks

How to setup a Web App on Microsoft Azure

A how to guide to creating a Web App on Microsoft Azure, deploying it using Continuous Deployment and hooking it up to a database.

Portal CMS

Portal CMS - Promotional Website

I decided to make a standalone website for Portal CMS; the technology I wrote to sit behind this website and many others. Why not take a look and see what its about?


Website Relaunch

Welcome to my personal website. I am just in the process of relaunching it under my new technology called Portal CMS.

Tips and Tricks

Cost Effective Email Hosting for Custom Domains (Migrated)

This article takes a look at options for setting up multiple email accounts for multiple custom domains.

Portal CMS

Portal CMS - Page Builder Demo

Portal CMS is my latest technology, this article shows a video demonstration of the new technology in action.


Windows 10 - Initial Reaction (Migrated)

This article covers my initial reaction to Windows 10 after using it on my main computer for a few days.


Windows 10 - Coming soon (Migrated)

A brief look at the upcoming Windows 10 release and a look at the new features in the update.