USING THE LAYOUTS DRAWER 


In the top left-hand corner of the Page Editor, you will find the 'Layouts' Drawer. When clicking the 'Layouts' button the drawer opens. It can be opened and closed, or flipped to the left and right of the screen, as freely as required.

Layouts are pre-made designs that are stored and easily accessed when editing your Pages. Layouts can be dragged and dropped on to your page offering rapid design flexibility and limitless creativity in your website design. You can Save Layouts as entire Pages or as individual Rows giving you have tremendous power to work quickly and consistently by reusing your favourite layouts as and when you need them.

All Layouts are compatible with each other, this is because as soon as they are dragged and dropped on to a page they instantly pick up your unique website Styles (CSS). Therefore, if there is a particular Layout you like, when you drop it on to the page it will automatically pick up your unique website colours, fonts, and other Styles. So whether your a pro designer, or a business wanting to tweak your pages, MOBLE Layouts offer an incredible way to design your web pages quickly and while maintaining design consistency, long into the future.

There are many Layouts on MOBLE, so it's important to know what they are and how they are categorised:


BASE LAYOUTS
:
 
These are MOBLE's out-of-the-box 'Base' Layouts that come with all MOBLE website. They can be dragged on to any page to get you started from scratch extremely quickly. We frequently update and evolve the Base Layouts to stay on trend with contemporary styles and technological advancements.

MY SITE LAYOUTS:
These are your personalised websites Layouts that you wish to reuse across your website pages. You can save Layouts as aRow, or an entire Page. Layouts and they conveniently live in the 'MY SITE' Layouts tab for easy access and reuse, on any page as and when you need them.

MY TEAMS LAYOUTS:
Website Designers and Website Design Agencies can apply to be a Partner.

Partners can create their own branded website designs and promote them on moble.com to receive a 40% share of monthly plan, for the lifetime of the client. This offers an incredible passive income stream for design partners. Partners don't have to promote all their designs on moble.com, they may protect design IP and create agency specific website templates to be used for rapid design for their own agency clients. Teams work together to tweak and improve their Layouts before adding them to their Team Layouts. When clients log in to the their websites, you can give them access to your designs, so that your agency is branded within the MOBLE Visual Editor. When a client drags your Team Layouts on to their page, the design Layouts will instantly swap from your branding to inherit your clients branding.

If you would like to know more about layouts, you jump ahead to Series 3 and continue reading via the following Episode: https://www.moble.com/understanding-the-layouts-drawer


In this article, we take a look at the key features of the Layouts Drawer:

MOBLE CMS Layouts Drawer
BASE LAYOUTS:

There are hundreds of pre-styled Base Layouts that are included with every MOBLE website.

The Base Layouts are individual rows that can be dragged and dropped on to any page, and you can easily swap and change the position of your Layouts.

Start by using Base Layouts to create entire pages from scratch, or by adding Layouts to existing pages. There is no limit to the combinations that you can create and therefore you have the flexibility to make every page purpose-built to suit your intended content.

Base Layouts are the backbone of the Page Editor and it is highly recommended that you become familiar with them so that you can rapidly produce amazing designs.


COLUMNS:

With so many Base Layouts on offer, it's important that they are catalogued in a way that you can find what you're looking for. When you open the Base Layouts you will notice a 6 column structure (as in the image above).

The Base Layouts are catalogued by the number of columns that they are divisible by. For example, if you are looking for a full-width banner this would fall into the one column Layouts. Similarly, if you were looking to have 4 columns in your Design Layout, then this would fall into the 4 column area.

The structure is very simple, the only thing to keep in mind is when you have, say, 2 columns, where the column widths are divisible by 4. Exploring this example, let's say that you wanted to have a Base Layout that was 1/4 to the left, and 3/4 to the right. Well, this would fall in the 4 column area since it is divisible by 4. That is, even though there are 2 columns, it is the column width that is important to consider when shaping for your optimum design.

This method of structure not only lets you find a huge amount of layouts quickly, it also forces you to consider the alignment of your content between rows. It's often a desirable design practice to have consistent alignment on your pages and this methodology lets you page stay precise without you really having to think about it.

In later tutorials, we'll talk more about padding and alignment, as this is a key design feature to master to set you on your way to becoming a content management pro. For now, all you need to do is find the Design Layouts that will work best for your content and drag them onto the page canvas.

GRIDS:

Grids can be used for where you wish to go beyond a standard column design layout and spice up your page with a stylish look and feel.

For each grid your may wish to:

  • Use the Outer Row to change the Background Image or Background Colour
  • Use the Inner Row to change the content component. To do this use the '+' icon on the inner Frame and select any component such as Text, Images, Videos etc.


MOBLE CMS Layouts Grids


PAGES:

Pages are collections of fully made pages. They are premade combination of Base Layouts that are intended to inspire you for the more typical types of pages e.g. Home, Contact or Landing Pages.

You certainly do not have to use Page Layouts, though you might find them useful to get you started, then drag in additional Layouts, or remove the rows that you do not require.


SAVING LAYOUTS:

SAVING PAGES
Once you're happy with a Page Layout it is important to consider that you may save the layout for future use. Use the [ SAVE] button in the Layouts Drawer to save the Entire Page as a Layout. Once you have saved your page it will appear on your 'Site Layouts' tab.


MOBLE CMS Layouts Save Page


SAVING ROWS
As well as saving an entire Page as a Layout, that you can also save an individual Row as a Layout too. In 'ROW' mode, simply click the Check Icon.


MOBLE CMS Layouts Save Row


When you save either a Page or a Row as a Layout, they will be saved to the 'Site Layouts' Tab.


SECTIONS:

Sections are incredibly useful to have at your disposal within the Page Editor. Examples of sections are things like your Footer, or if you are using a slide in full page 'Menu Section', or a slide in 'Action Section' in your Header. Here you have options for this essential content that again can simply be dragged on to your page.

Please note that you can access your Section Pages from various locations around MOBLE, these are:

  • In the 'Styles' area there is a tab for accessing key Sections
  • In the 'Navigation' area there are links for accessing key Sections
  • In the 'Pages' area you can search for any section simply by highlighting 'Section' (and you might also highlight 'Hidden'), then clicking search. 


MOBLE CMS Layouts Footer
WIREFRAME MODE:

It is possible to Toggle to Wireframe mode from the visual design mode. 

In Wireframe mode the text, images, and other components are replaced to show placeholders that denote where the future content will appear.

Wireframes are often used by Website Designers to create a Prototype during the design process. These Wireframes can be discussed with the client for revision and approval.

Since the Layouts on MOBLE automatically pull your brands colour scheme from the Styles area, Wireframes are in most cases now redundant design practice.

The traditional rationale for designing wireframes was to quickly draft mocks before committing to more time consuming visual design and coding.

Though since the Visual Design on MOBLE is automatically coded, and instantly responsive there is simply no need to waste time with Wireframes, or HTML.

With MOBLE your Layouts have instantly pick up your brands Styles (CSS) to create your visual design, and the HTML writes itself automatically, meaning the time-consuming processes of Wireframing, Photoshop Design Mocks and Coding are not required, they all happen instantly in one rapid process using MOBLE Layouts, saving phenomenal amounts of design time.

Nevertheless, there still can be requirements for using wireframes. For example, Prototypes area created by the sales team, marketing team or content team, as a brief before being passed over to the visual design team.

Rather than being an essential tool, Wireframes have become a cool feature to have in your toolkit, should you even need them. Please also note that in main global Settings area you can even flip the entire website into Wireframe mode, and of course just like visual design layouts, wireframes are fully responsive to showcase to your team and clients directly in the browser

MOBLE CMS Layouts Wireframes
BUILD - COMPONENTS:

Content Components can also be dragged onto the page canvas from the Layouts Drawer. It is also important to note that in the Frames Tools you can also add Content Components using the '+' icon.

The Content Components allow you to add a wide variety of content to your page and there is a specific tutorial section for each content component.

The following Content Components are available as standard:

  • Text
  • Image
  • Video
  • Map
  • List
  • Button
  • Form
  • Menus
  • Social
  • Code
  • Frame
MOBLE CMS Layouts Build

LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES