Dynamic Layouts are a core feature of MOBLE. They are essential to the MOBLE methodology and make building websites a whole lot of fun. This Episode explains the different types of Layouts in more detail before we move on to the 'How To' in later sessions.

So let's dive in...

Series 3: Episode 2: Five Dynamic Layouts


When you save a Layout it is added to the Custom Layouts area. There are two ways to save a Layout.

Save a Row

To save a row, click into Row mode. You will see a tick in the Frame Tools. Click the tick icon to Save the Row as a Layout. Notice that a screen shot is taken for easy reference and this can be used to drag the layout on to your page at any time in the future, from any page.

Save a Page

You can also save an entire Page as a Layout. In the Layouts Draw, at the top of the Custom category, you can give your Page Layout a name and Save it. This will instantly save the page and take a screen shot that can be used to drag and drop the Page into any new page in the future. This is a great option if you have designed a page layout that you will use over and again, such as an Event page or a Case Studies page.

Editing your Custom Layouts

Once you have saved a Custom Layout you may wish to edit and tweak what you have initially created. To edit your Custom Layouts go to the 'Styles' area (via the Main Menu) and click 'Layouts'. Here you will see all of you Custom Layouts. You can click the 'Edit' button to edit the page. The 'Settings' icon will let you update your screen shot, and even move the layout into another category. This can be super useful for Design Agencies who might be creating many Layouts for their larger clients.


The Inspire category is a whole heap of design fun and inspiration. Each month MOBLE will upload the best Layouts designed by the community, these will be available here for all to use. Each month we'll email you when the new layouts are available. From time to time we'll interview the designer and hopefully, they'll receive a nice bit of publicity for their creative efforts.

You can keep track of all of the Design layouts here, but also of course via the front end of MOBLE.com in the Inspire tab.

It's important to remember that Layouts are not Themes, all layouts can be mixed and matched in any way. You could drag a Layout from June 2017 to combine it with a Layout from August 2017 whatever is right for your website it will just work. When Layouts are dropped on to your page, they'll instantly pick up your CSS colours, fonts and styles, so they'll instantly adopt your brands look and feel no matter who designed them. This is truly a unique feature of MOBLE, we hope you enjoy such a community led source of inspiration, we hope it helps you to design great things long into the future.


Page Layouts are complete pages that can be dragged on dropped onto a page. Typically you would use a Page Layout when you first create a Page, therefore they are categorised by the general types of pages, such as Contact Us, Grids, Galleries etc.

MOBLE will always add new Layouts to this area, and as we grow we'll introduce new features to help you search all Layouts rapidly. Stay tuned for emails announcing when new batches are available. Also, feel free to notify us of Pages that you would like to share with the community, we'll review them and if they have value to the wider community we'll release them for all to use. We'll also aim to give you credit and publicity for your contribution. Do also look out for our forthcoming app store where you will be able to sell your Layouts in the future.


Design Layouts are perhaps the most useful of all, certainly, they are the most widely used on MOBLE.

Design Layouts are individual rows that can be dragged and dropped in any order, you can also move them up and down with the arrows in Row mode.

Notice that when you drag a layout onto a page that the Layout Draw closes, this allows you to view your page in all its glory. However, if you are building a page and are playing with the order of different Layouts, you might like to leave the Layout Draw open. If so simply click and hold on the draw and throw it over to the right of the page. Now when you drag in new layouts the drawer will stay open saving you a few clicks along the way.


Ok for serious users you can use blocks to build new Layouts from scratch or add new Blocks into existing Layouts.


When you drag in a block make sure you are in 'Advanced' mode. This will allow you to see all of the Frames and know exactly where you are going to drop your new block.

Adding a Block to layouts gives you an extra dimension to editing a page since there is absolutely no restriction of what you can create within the MOBLE framework. 

Later in this Series, we are going to get stuck into advanced design and editing, most importantly will be Episode 4, where we discuss our 5 Frames Principle; and Episode 8 where we use the Padding and Alignment tools to evolve you into an absolute Website Design Pro.

Looking forward to it and see you in the next one!