A WEBSITE BUILDER FOR DESIGN, A CMS FOR BUSINESS

MOBLE is a website builder for designers and a CMS (Content Management System) for businesses, in one neat user interface. Often CMSs will either focus on supplying features to the designer and are too complicated for the busienss content team, or thay can be easy to use yet far too restrictive.

MOBLE set out to solve this problem with two modes in one neat Visual Editor.

In the Top Bar of the Visual Editor, you will notice Design Mode and Business Mode.

BUSINESS MODE

• You can edit all Content
• You can click any piece of content to open the component and edit. E.g. Click on Text, Images, Buttons, Forms, Maps etc.
• A mustard colour 'Row' defines the outside of a Layout. It will appear when you hover over a Layout. Rows are often used to change Background images, colours etc.
• Blue Frames will appear when you hover over a Frame.
• When you hover over a Frame the two Blue inner Frames will appear, as seen below. This is useful as designers often like to include content in the inner Frame and Padding in the next Frame around it.
  

DESIGN MODE

Design Mode and Business Mode each have their own advantages, depending on what type of user you are or what tasks you are completing. Design Mode is great for setting up the page structure. This is useful for Designers and Front End Developers to see a visual representation of the code. Design Mode is like viewing the source code via a user interface, without requiring any code. Every Div Block (Frame) can be seen and the propoerties and classes within each Frame can be easily managed, offering a rapid and flexible way to design web pages.

• You can see all the Frames in one view
• You can drag and drop both Content Components and Frames
  

SO, WHAT ARE FRAMES?

Frames in the MOBLE visual editor are the 'Divs' in HTML. Therefore, by showing the Frames, the user interface offers a visual representation of the source code. If you're not a Frontend developer, a 'Div' is the Frame that contains properties such a Images, Components, Colours, Backgrounds, Padding and Borders.

On MOBLE you can add as many Frames (Divs) as you like and you can put anything into them, meaning you can design things quickly, without writing code and much quicker than in programs like Photoshop.

Each Frame in MOBLE opens the Frames Drawer with all of the tools that you can apply within a Frame. 

DID YOU KNOW?

In addition, within the 'Pro' tab of the Frames Tools, you can add Classes. Again, if you're not a Frontend developer, consider Classes as the tools that MOBLE doesn't have buttons for yet. MOBLE has a universal directory of Classes that make it very easy for designers to create advanced customisations.

Designers can simply add the word for the Class and this behaves like a button. Notice that there is a dropdown list of all the Classes. The most popular Classes are monitored by the MOBLE team and are introduced as UI tools in each new release.

There are many advantages for Designers and Businesses with this philosophy:

• • Your MOBLE website can be customised, just as if a designer was coding.
  • Your website will always stay up to date with the latest technology and never become obsolete. 
  • A universal Class directory across all MOBLE websites means that all MOBLE websites are consistent. This makes it easy for website maintenance to be automated, plus designers and developers can under each others code.

The next few Episodes cover each tab on the Frames Tools in much more detail. Jump ahead at any time, if you want to get more familiar.

PUT YOUR DESIGN HAT ON

If you're not a designer then you need not be burdened by viewing all the Frames. You can flip to Business Mode and simply focus on writing great copy and choosing great images.

However, if you understand a few basic rules in Design Mode you will have the power to create anything that you like in the UI without code. Let's now look at how a typical Layout is structured, and understand the types of things you apply to each Frame.

In the screenshot below, notice that:

1. We're in Design Mode.
2. The Red Dot in the Frames Icons indicates that the Frames Drawer is open for this Frame.
   • In the Frames Drawer, notice we're in the 'Frame' tab.
   • The 'Frame' tab contains the tools that are responsible for the architecture of the Frame. This is where we'll spend the rest of this Masterclass Episode. Once your Frame is setup you can add colours and images which we'll cover in the next Episode.
   • Padding of 16px has been applied to the Top, Bottom, Left and Right of this Frame.
3. The Outer Frame is dark Blue and the Inner Frame is light Blue.
   In the screenshot below. Notice that there is 16px of Padding around the inside of the Outer Frame. Padding is always applied to the inside of the Frame.
   
   

WHERE ARE WE UP TO?

Ok, so we have learned that:

• The Inner Frame is used to house the Component (E.g. Text, Image, Form, Map, Widget etc).
• The Outer Frame is used to apply padding.

Of course, you can apply Padding or anything you like to any frame. This is simply our advice to get you started - there are no limitations.

• The Next Episodes will cover Background Images, Colours, Videos, Paddings, Alignment, Borders, etc.
  
  

OK, GOT IT, LET'S MOVE ON

In the screenshot below, notice the there are two mustard-coloured Frames. These sit on the very outside. Let's see what they are most often used for.

• Row: This is the dark Mustard outer row.
• Inner Row. This is the light Mustard Inside row

Let's talk about the Inner Row first.

• Notice that the red dot is on for the Inner Row.
• In the Frames Drawer the Fixed Width is 'On', which applies a Fixed Width to the Frame.

On MOBLE, your Fixed Width is 1280px wide on most Laptops and Small Desktops. On very large desktops it is set to 1600px. Fixed Width is an essential design tool since it limits the reading pane of your page. If you don't fix the width then it will make it very hard for people to read your text. 

• You should always consider having Fixed Width 'On' when you have text inside your Layout.
• Fixed Width is only required for one Frame inside a Row. If you toggle this 'On' in another Frame inside the Row, then it will toggle 'Off' the other automatically. I.e. Only one Frame needs to be set at 1280px.

Fixed Width is on the Inner Row since you might wish to put a Background Image or Colour in the main Row. Background images should span the whole width and therefore need not be fixed.

• Inner Row is used for Fixed Width.
• Outer Row is for Background Images and Colours.
  
  

Next to each Field in MOBLE is a Question Mark icon. This opens up our Help Glossary for that field with lots more helpful tips and advice.

Below is an extract from the Help Glossary on Frame Icons.

  EDIT:

The Edit Icon opens up all of the features that you can control for that frame. E.g. Background Colour, Image, Video, Overlay, Padding and Alignment etc.

  CONTENT COMPONENT:

The Plus Icon allows you to add a Content Component to this location of the page. E.g. Text, Image, Video etc.

PRO TIP: 

• HOLD THE ALT KEY and the Content Component will be added to the top of the Frame.
• DO NOT HOLD THE ALT KEY and the Content Component will be added to the bottom of the Frame.

  CLONE:

The Clone Icon duplicates the Frame and copies it directly below. This can be powerful if you are building masonry style blocks or if you would like to repeat your content in lists.

  DELETE:

The Delete Icon deletes the Frame and the Components within it.

ADD NEW FRAME TO THE OUTSIDE:

It is possible to add new Frames to the outside of any Frame. This has many uses for advanced users, such as being able to add many layers of graphics on top of each other and controlling their background position and behaviour.

REMOVE FRAME:

You can remove any Frame. Unlike 'Delete' this removes the Frame but does not delete the components within it.