In the Header Bar, in the Page Editor of MOBLE CMS, are 4 distinct ways to view and edit your content.

Here we look at how the MOBLE CMS User Interface offers great flexibility at all depths of the code and presents it in a way that anybody can understand.

If you are a web designer or developer the intention is that you can work much quicker with MOBLE CMS. If you are anybody else, the idea is that you don't need to be a designer or know code, to build beautiful web pages.

MOBLE CMS Header Bar

In Content View, there a no frames, a near true view of what you see on the front-end is presented. 

Simply click on any piece of content and a pop up will appear, enabling you to edit it.


In Row View, a mustard colour Frame appears around the outside of the row, with the Frame Tools located in the top left-hand corner of the frame.

Row View typically enables you to edit the background of the row. The key aspects that you should edit in Row View are:

  • Background Colour, Image or Video.
  • Background Overlay.
  • Padding typically set to a Wrap or a Container.


In Block View, one or two blue Frames identify the Frames that can be edited. Typically the inner Frames will be highlighted.

The Middle Frame is mostly used for:

  • Set Fixed Width 'On'  to set the reading pane to 960px on desktop.
  • Use Background overlay to enhance text legibility.
  • Set padding, typically set to either a Wrap or a Container.

The innermost Frame is mostly used to:

  • Click the plus [+] sign to add a content component.
  • Add content (e.g Text or an Image)
  • Set padding typically set to a Wrap or a Container.

The Frame directly outside the innermost frame is mostly used for:

  • To add a Background image of colour to the block.
  • To set a Container.
  • To make the clock Full Height to align with other blocks in the same Row.


Advanced View shows all Frames and enables you to edit any frame from one view. You can also add as many new Frames as you like or even remove Frames if they are not required.


MOBLE is a Web Builder for Designer and a CMS for Business. The Visual Editor can be toggled into Design Mode allowing Web Designers granular control of Frames, to design and build Layouts and drag components around the page. When the Designer has finished creating they might choose to Save their custom work to the 'Site Layouts', in the Layouts Drawer, then toggle off Design Mode. 

Design Mode is toggled 'Off' as Standard, offering an easy to use CMS for editing text content, images, and components. The dragging of components is locked when Design Mode is 'Off', making a perfect environment for non-designers to write copy and edit the page content, without having to worry about accidentally editing the page structure and design.

On mobile devices, Design Mode is also 'Off', again this stops the dragging of components, so you can freely edit on your mobile phone without worry that, when you scroll on your phone, you might accidentally drag content into the wrong spots.

We advise non-designers to leave design mode 'Off', though do consider toggling Design Mode 'On' occasionally for basic things like moving text below images, or adding a touch of padding.

In Series 3, we look at the features of Design Mode, we highly recommend this Series even if you're not a designer you will feel comfortable with all of the design tools at your fingertips.

What does CMS stand for?
CMS = Content Management System

Please bear in mind that the above information is just a guide. All functionality is available in Frames, so if you're feeling creative, don't let best practice stop you. Go build something new and beautiful and use MOBLE CMS in any way that you like.


 202, 56 Bowman Street Pyrmont NSW 2009
© Copyright 2018 MOBLE Pty Ltd
Home | Terms | Privacy