GET STARTED QUICKLY WITH A FREE DESIGN, THEN COMPLETELY CUSTOMISE IT TO MAKE IT YOUR OWN.
We help you make beautiful websites. Manage websites, little or large, in moments with a powerfully simple Visual Editor.
STYLE 70 MIX 'N MATCH THEMES WITH YOUR BRAND
THE WEB'S LARGEST COLLECTION OF LAYOUTS
ALL THIS FROM ONLY $9 PER MONTH!
TOUR THE CMS & WEBSITE BUILDER
WHAT'S NEW: MERGING INSTORE & ONLINE
BUILD YOUR OWN CUSTOM WEBSITE DESIGN
ON DEMAND LIVE EVENTS
WHAT'S THIS? IT'S A GLOSSARY OF FEATURES
HOW TO MAKE A WEBSITE LIKE A PRO
Web School is an end-to-end, easy to follow series, aimed at both beginners and web design pros.
2020 EVENTS ANNOUNCING SOON
Spend the day at MOBLE offices in Surry Hills and build your own website with the help from our team.
Learn MOBLE as you go with this comprehensive glossary of features and FAQs.
Paul Davenport | 5 min read | 5 min video
NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
Welcome to Series 3, in this Series, we are going to focus entirely on MOBLE's Visual Page Editor and how Dynamic Layouts can be used to create amazing responsive web pages. Let's dive straight in...
From left to right the Top includes Layouts, Row, Block, Advanced, Design Mode Toggle, Undo, Redo, Settings, Save and the ellipsis for Page Actions. Let's make you comfortable with getting around the Page Editor and explain each feature.
Layouts are premade 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.
All Layouts on MOBLE compatible with each other, irrespective of who designed them. This is because as soon as they are dragged and dropped on to a page, they instantly pick up your unique website Styles, that you set up in Series 2. There are hundreds of Layouts in your MOBLE website, and more are being added all the time. This means you have the very latest design styles at your fingertips and you can keep your website up to date over time.
You can quickly customise any Layout with granular controls in a beautiful Visual Page Editor, then save them as entire Pages or as individual Rows to rapidly use again when you need them. This gives you tremendous power to work quickly and consistently with a custom-designed approach that is a far superior method than traditional theme based solutions.
So, whether you're 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.
There are many Layouts on MOBLE, so it's important to know what they are and how they are categorised:
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 involve the Base Design layouts to stay on trend with contemporary styles and technological advancements.
MY SITE LAYOUTS:
These are your personalised websites Layouts that have been made specifically for your brand. You can reuse across your website pages by dragging them into any location. You can save Layouts as a Row, or an entire Page. These Layouts conveniently live in the 'MY SITE' tab.
MY TEAMS LAYOUTS:
Website Designers and Website Design Agencies can sign up for MOBLE's 'Team Sites'. Teams can create their own branded, pre-made websites. When a Team commences a new website project, they may select the most suitable website Team Site to get them off to a flying start. Teams work together to tweak and improve their Layouts, and as they discover the high performing Layouts across their client's website design projects, they may add Layouts to their Team Sites. Often Teams will optimise web page conversion rates for their clients, and with this knowledge they gain an unparalleled design edge, with insights into high performing websites Layouts, offering an outstanding service to their clients.
Website Designers can create Team Sites, but often Website Designers would like to keep their own collection of Layouts. Therefore, Web Designers can save their favourite Layouts to their "My Layouts" tab. When a Designer logs in to any MOBLE website they will see their personal collection of Layouts, in their My Layouts tab. Our Web Designers may have many client websites, and this feature allows them to reuse their work across their projects for absolute convenience and time-saving. It's also nice for Web Designers to showcase a portfolio of their work that they can access and demonstrate to prospective buyers and colleagues at any time. If you're a Website Designer first sign up for 'Team Sites', then add yourself as a Web Designer.
All Team Layouts are compatible with each other, so if you've had your website designed by a Team, you may see all of their Team layouts via this Tab.
For a deeper look at the Layouts Drawer, please jump ahead to the next episode >>
MOBLE is a Web Builder for Designer and a CMS for Business. The Visual Page Editor allows you to toggle Design and Business Mode, depending on if you would like to Design with the Web Builder or simply manage content as a business.
In Design Mode you see all the Frames. In Business Mode you only see Frames when you hover over them.
Business Mode offers an easy-to-use CMS for businesses to edit text content, images, and components.
Notice that when you hover over any content the most inner frame will appear, plus and the most outside Row. This keeps it simple for the content team to edit content.
Content Mode. Hover over Content such as Text to edit. Click on the Pencil Icon to edit background colours, images, and videos.
The most outer Frame is the mustard colour outer row. This is useful for padding, as seen here. Though also commonly used for background colours and images.
Design mode shows all of the Frames. For developers, the Frames are effectively the Div Blocks this lets you to rapidly create the page structure by adding and remove as many Frames as you like, giving you complete control over your page, without any restriction.
Design Mode is also a nice option for dragging around components, such as moving Text or an image from one place to another.
Other features of the Frame Tools are the Clone and Delete buttons which are extremely useful. You can also add and subtract Frames, as we have just discovered.
On mobile devices you are restricted to Business Mode. This stops the dragging of components, so you can freely edit content on your mobile phone without worrying that, when you scroll on your phone, you might accidentally drag content into the wrong spots.
We advise non-designers stay in Business Mode though do consider toggling to Design Mode occasionally for basic things like moving text below images, or adding a touch of padding.
Throughout Series 3, we look at the features of the Design Mode. We highly recommend this Series, even if you're not a designer, as you will feel comfortable with all of the design tools at your fingertips.
Advanced displays all Frames in one neat view, with Frame Tool to edit the properties of each Frame. This view gives you as much control as a frontend developer, yet with a visual representation the page structure, and neat tools for editing properties in the UI without code.
CMS = Content Management System
The Device Viewports conveniently allow you preview how your pages appears at the smallest width for each device.
The breakpoints are:
This is fairly self-explanatory. You can Undo and Redo changes within your session time.
When you have made a change, the Save button will turn to mustard and softly pulse, suggesting to you that you should perhaps Save your changes as you go.
In the Page Settings area you can control:
We encourage you to click the question mark icon to read about each feature in the Page Settings area. Finally, you can Save and Exit or click Save to go back to the Page.
The Ellipsis presents the actions of what you can do when you're finished editing.
Save and View will save your page and let you view your page in a new tab. It's a great idea to have one tab open for the Editor and another tab open for the Page, as you can then easily flip between the two. Remember if you do Save your change, remember to hard refresh so that the browser will pick up the changes.
Save and Exit will complete your session and take you back to the main Pages area.
Design a website in under 3 minutes!
GET A QUOTE
A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.