Paul Davenport |  5 min read |  4 min video

WEB SCHOOL Design Like a Pro S1 E1


Every great software application has its magic moments; those penny-dropping moments when you realise how things work, why they are going to save you time, make you money, and change your life for the better.

This Series is packed full of MOBLE's magic moments. It has been written with self-contained Episodes to complement your website design experience, and allow you to jump ahead to get help when you need it.

In this Episode, we get you off to a flying start by showing you around some of the very best bits of MOBLE, and those shiny new website design tools at your fingertips. Let's do this.


In Series 3, you'll learn about the power of MOBLE's Visual Editor. Your MOBLE website comes pre-loaded with hundreds of Layouts, either designed by MOBLE, or by our community of expert website designers. All you have to do is find the Layouts that are right for you and drop them on to your page. As soon as you drop a Layout it will automatically inherit your brand's Styles, meaning you have hundreds of brand ready layouts waiting for you before you even begin, all of which can be completely customised and made your own.

You can drag and drop layouts in any order, so each and every page can be quickly personalised for your content.

You can add and swap new components such as images and videos, and modify content with a point and a click.

You can change backgrounds, add overlays and gradients. You can even apply popular effects in the UI, such as parallax, shift and reveal on scroll.

When you're happy you can save your customized Layouts either as full pages, or as individuals rows, making it dramatically simple for your content Team to reuse your Design Layouts, and always maintain consistency for your brand.

Layouts Drawer showing the custom Site Layouts we designed for


MOBLE is a Web Builder for Design and a CMS for Business. Now you can toggle from content management mode to Design mode, meaning if you're a website designer, you get full access to design anything you like, in moments, without restriction and without requiring a single line of code.

Once you've finished your designs, you can toggle the Design Mode 'Off', which is a comforting safety lock for your copywriting Team to manage content without having to worry about design considerations like structure, padding and alignment. MOBLE truly is a Web Builder for Design and a CMS for Business.

Designers can flip Design Mode 'On' to design and build anything without code, then flip Design Mode 'Off' to hand back to the team to manage content.


When you drop any Layouts on to your page, it instantly picks up your Brand Styles. You have access to the Styles area to change your Style Sheet (CSS), which is neat to a granular level User Interface for setting your website Fonts, Colours, Components, and Effects.

In Series 2, we'll dive into each feature of the MOBLE Styles area including our all-new MOBLE AI tool that will even try to design your website instantly for you, as soon as you drop your logo on to the page.

Upload a logo, pick your colours, choose your header, your fonts, and effects, and your website is ready in moments with our designer-friendly granular level CSS user interface. 


MOBLE is fast becoming the choice CMS is you need to power large volumes of pages, images, and files. It's a beautiful Visual Editor combined with a powerful engine for pulling feeds of content in truly dynamic ways.

In Series 4 we get to know Widgets. MOBLE can be used to power hundreds of pages, images, videos, files, in moments. You can design and build your own news feeds, galleries, blogs, events, products and document libraries.

Perhaps you want to show both Videos, Images, and Events in the same Gallery? Or perhaps Blogs and Products in the same Feed? On MOBLE, all pages and files can be Tagged into groups and the Widget just looks for those Tags and feeds the content to your page. Simply Tag your content, select the Types of Pages or Files you want to show, and you'll have amazing feeds in moments, that really change the way you think about your designs and rapidly increase the speed at which you work.

They are many types of Widgets from grids, sliders, multi-sliders, masonry, and each can be styled as you like. Bored of a Home Page Slider? Then change the effect, or flip it into a Grid, change the number of columns, and even apply new hover effects to spice up your look and feel.

There is no limit to the number of Widgets you can have on any one page. You can build huge websites with feeds for different types of News, Services, Business or People. Run Products, alongside galleries, news, and events, all at the same time. You can have fun by reinventing web pages from the traditional theme based templates, to compelling content-rich, easy to manage, dynamic pages that inspire your visitors to stick around and keep on coming back.

A Multi-Slider Widget used as a full page carousel on

Here the same Multi-Slider Widget does not have to be a full page. It can run in any area of your page, with any hover effect, height or guttering. Settings can be completely customised in each and every instance. You can even run as many widgets on a page as you like.


In Episode 4, we'll show you MOBLE's process of designing websites, which will save your business, or design agency, days of website design and development. Simply flip your designs to Wireframe mode to share and view your wireframes on any device. Just like your Design Layouts, your Wireframes are fully responsive. No longer do you have to design wireframes for various screen sizes, just flip a switch and you have responsive wireframes waiting for you, saving you hours of needless design time in offline prototyping tools and design programs.

As you work, your designs are instantly coded, so there's simply no need to write HTML to make web pages. It's all done in the Editor as you design. No more wireframing and no more repetitive HTML coding for your page layouts.

Here we see this page toggled to Wireframe Mode via the Layouts Drawer.
For your convenience, Wireframe is never on your domain name. You only ever see it via your


With that said, if you are a frontend developer, MOBLE gives you unrestricted under-the-hood access, to the HTML, CSS, and JS to extend the MOBLE framework and make it your own.

In Series 6, we show you how you can use MOBLE to code your own Headers, Widgets, Hover-Over Effects and JS Animations.

MOBLE provides a universal CSS class directory for uniform coding across all MOBLE websites. We introduce new CSS Classes to our developer community first, right inside the page editor, before we build the most requested classes into the UI tools. 

Our growing ecosystem of developers can now submit new classes to the community and we'll be launching a social network for designers and developers to share creatively in the coming months. Join us at our Web School Live Event to meet new people and help design amazing things in collaborative ways.

Access HTML, CSS, and JS via the Styles Area to get under the hood and extend the MOBLE framework.

IT'S-DIRTY-WORK Created with Sketch.

Developer friendly access allows you to create anything.
Here you can see an embedded JS animation we created for 
You will learn how we made this effect in Series 6.


MOBLE comes complete with a Form Builder that can be used to create an unlimited number of forms. Our Forms can even take One Time and Subscription payments online, giving you the ability really test conversions, and create lead magnets and tripwire sales. We'll cover more on this when we look at Mastering Online Growth in Episode 10.

Form Builder with Drag and Drop Fields and Online Payments


Team Sites is now in Beta. Designers can save their own portfolio of Layouts to use them across different website client projects. Therefore, you can create, save and reuse your design creative, again and again, to save you incredible amounts of time, while letting you create your own personalised design experience.

You can now share your Layouts with your Team and collaborate to build your own Agency Branded websites. Consider this like your very own branded Agency Themes. When your clients sign up they can choose from your selection of pre-made websites, and your clients even have access to your Agency Design Layouts right inside their website page editor. Teams receive a huge 25% of the monthly fee and you take 100% of your design fee with all the maintenance and technical support right out of the box.

With Team Sites, not only do your clients see your branding inside MOBLE, they even see your branded communications on their CMS login screen, so you're always available to your clients for extra work as and when they need you.


The following Episodes dive into your MOBLE design tools and show you how you can design and build your new website. 

If you don't have a MOBLE website yet, be sure to sign up now via the form below. It's free to give it a try, with no credit card required.

What are you waiting for?


Design your website in moments, with or without code. It's free to try for 14 days, with no credit card required.