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 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.
MOBLE CMS Business Mode

Business Mode showing the two inner Frames on hover. The inner Frame is most used for adding content. The Frame around it is useful for adding Padding and Alignment.


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
MOBLE CMS Design Mode

Design Mode showing all Frames (Div Blocks) in one neat view, allowing Designers to create web page rapidiy and manage all web page properties without requiring any code.


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 Drawer, 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 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 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 Tools indicates that the Frames Drawer is open for this Frame. 
    • In the Frames Drawer, notice we're in the 'Frame' tab.
    • The 'Frame' tab creates 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 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.

Frames Masterclass Block Design Mode

The Frame Tools open the Frames Drawer.

Frames Masterclass Outer Block

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.

Frames Masterclass Fixed Width

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.
Frames Masterclass Frame Width

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.
Frames Masterclass Height

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.

LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES