FRAMES MASTERCLASS 

PRO TIPS AND TRICKS


S03 | E04 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  7 min read |  6 min video

Web School Series 3 Episode 4

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

If there was ever an Episode not to miss, then this is one, whether you're a business looking to design web pages from scratch without code, or whether you're a seasoned Website Design Pro. In this Episode, you will learn the nuts and bolts of the MOBLE Visual Editor, so you can quickly make design changes to Layouts or build any web page from scratch, in moments.


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 be too complicated for the content team or be easy to use and far too restrictive for rapid design.

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 a toggle. This toggles the Design Mode 'On' and 'Off. It functions as follows:

DESIGN MODE 'OFF'
  • CONTENT
    • You can edit all Content.
    • Click any piece of content to open the component and edit. E.g. Click on Text, Images, Buttons, Forms, Maps etc.
    • When you hover over Content the Inner Frame will appear. E.g. change Background Images, colours etc
  • ROW
    • Row is not selectable (it is greyed out).
    • A Row will appear in the Editor when you hover over a Row.
    • Rows are often used to change Background images, colours etc.
  • BLOCK
    • Block is not selectable (it is greyed out).
  • ADVANCED
    • Block is not selectable (it is greyed out).
MOBLE CMS Design Mode Off

Toggle Design Mode Off


DESIGN MODE 'ON'

Design mode shows the power of MOBLE in granular ways that you might never have anticipated. Here we look at the available modes each with their own advantages, depending on what type of users you are or what tasks you are completing.

  • CONTENT
    • Content is selectable as normal.
  • ROW
    • A Row is the outermost Frame of a Layout.
    • You might have many Rows stacked on top of each other and can swap their position up and down.
    • Rows are often used to change Background images, colours etc.
  • BLOCK
    • A Block is made up of the two innermost frames.
    • Block tab allows you to see all Blocks on the Page in one neat view.
    • The inside frame is mostly used for housing components.
      The outside frame is mostly used for adding padding to the block.
    • You might elect to add background colours and images to either frame, depending on your design.
    • You can drag and drop both Components and Blocks in Block mode.
    • You can add and remove more frames should you need to.
    • It is possible to view more than the two most inner Frames. More on this is Episode 8.
  • ADVANCED
    • You can see all the Frames in one view.
    • Since you can see all your Frames you can accurately drag and drop Layouts and Components exactly where you would like them.
    • Notice that the padding and is removed in Advanced, yet you can see Padding and Alignment in all other modes.
MOBLE CMS Design Mode On

Toggle Design Mode On.


WHAT ARE FRAMES?

Frames in the MOBLE visual editor are the 'Divs' in the HTML. Therefore, the user interface is a true representation of the source code. If you're not a Frontend developer, a 'Div' is like a box that the properties such a Images, Backgrounds, Padding and Borders can be put in to.

So, 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 Draw and this is all of the tools that you can apply to the Frame. 

In addition, in the 'Pro' tab you can add Classes. Again if you're not a Frontend developer, consider classes as the tools that we don't have buttons for yet. You can simply add the word for the Class and this behaves like a button. There is a dropdown list of all the Classes. The most popular ones make their way to the Frames tools on our next release.

The next few Episodes cover each tab on the Frames Drawer 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 may well be thankful that you are not burdened by all these frames. You can leave Design Mode 'Off' and only worry about writing great copy and choosing great images. However, once you understand a few basic rules, you will have a considerable amount of power to literally create anything that you, like without code. You will technically be a Website Designer. So, stick with these next few steps, it's not so hard...

Let's now look at how a typical Layout looks, and understand the types of things you apply to each Frame. Once you understand this basic structure, then you'll be a long way down the road to being able to customise your own layouts. 

In the screenshot below, notice that:

  1. Design Mode is 'On'. We have flipped to 'Block'.
  2. The Red Dot in the Frames Tools indicates that the Frames Drawer is open for this Frame.
    In the Frames Drawer, we're in the 'Frame' tab.
    The 'Frame' tab creates the architecture of the Frame and this is where we will spend the rest of this Masterclass Episode. Once your Frame is designed you can add colours and images which we'll cover in the next Episode.
    Padding of 16px has been applied to the Top and the Bottom of this Frame.
  3. The Outer Frame is dark Blue and the Inner Frame is light Blue.
    In the second screenshot below. Notice that there is 16px of Padding around the inside of the Outer Frame. Whenever you apply settings in the Frames Drawer it will always apply your preferences to the Inside of the Frame.

The Frame Tools open the Frames Drawer.

Properties are 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.

Fixed Width is an essential tool to define the Maximum Width of the reading pane.

In the screenshot below the Red Dot indicates that the Frames Draw is open for the Inner Row.

Notice that:

  • The Frame Width is set to 50%.
  • You can slide the width of any Frame.
  • The Frame Width will automatically turn itself 'Off' on mobile, since on mobile you always want to have the full width. Therefore, you can design freely without having to overthink anything. Typically, MOBLE is set with many such considerations that make your design life easier, and we're always looking for such ways to keep making a nicer experience for you.
  • This Frame is 50% Width. It can be positioned so the Frame Alignment can be set to 'Center', 'Left', and Right, for fun and impactful looks.
  • This Frame Alignment is set to 'Center'. Notice also that the Text and Buttons area is also centre aligned. You can override this in the Text, Image and Button Components by setting their alignment. The child alignment always overrides the parent alignment.

Frame Width impacts instantly on the Layout look and feel.

Now we move to the Row. This is a nice segue since in the next two episodes we cover Backgrounds and Background Images. Therefore, for now, we'll keep it on track and focus on the final feature of the Frames Tab.

In the image below, you've already noticed that the Frames Drawer is open for the Row, as indicated by the red dot.

  • You can see the Padding is set to 64px all the way around the Frame. This sets a large amount of Padding inside the Row, which is quite often a nice look.
    If you'd like to know more about Padding and Alignment jump to Episode 8 
  • Notice that there is a Background Image in the Row (Episode 7)
  • Notice that the Height of the Row has been set with a Minimum Height of 500px. You can control the Minimum Height of any frame. In this case, 500px is a nice banner height. Though, it could easily be set to full height for a more dramatic look.
  • Minimum Height is great because if we were to add more text below the Sub-Heading the Frame Height would expand with the text.
  • If we wanted to lock the Height no matter what the text length, we would then use Height and not Minimum Height.
  • Therefore, if we were using Height we would need to set the 'Overflow'.
  • In this case, you could decide to make the text:
    • 'Visible' meaning the Background would be fixed and you could see the text Overflow.
    • 'Visible' meaning the Background would be fixed and you could not see the text Overflow.
    • 'Scroll' meaning the Background would be fixed and you could scroll inside the Frame.

Frame Height is an Essential Tool for Pro Website Designers.

Ok, well that's the end of the Masterclass. You've just learned how to set up a Frame for easy Page Editing.

Thankfully, all MOBLE layouts are set up like this for you as standard. So now all you have to do is be aware of the logic so that you can design wonderful things. Now you are ready to move on and start adding some flare to your Layouts. In the next Episodes you will learn Background Colours, Images, Videos, plus Effects and Padding and Alignment, before we end the series looking specifically at each component.


DID YOU KNOW?

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 for the Help on Frame tools.


WHAT DO THE FRAME TOOLS DO?
MOBLE CMS Frame Tools
  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.