LAYOUTS DRAWER

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:

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 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.

MY LAYOUTS: 
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 >>

DESIGN MODE

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

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.

• The inner Frame lets you add and edit content components such a text, images, and buttons.
• The outer Row lets you change elements such as background colours, images and videos. It is also useful to adjust padding and alignment.

_{Content Mode. Hover over Content such as Text to edit. Click on the Pencil Icon to edit background colours, images, and videos.}

DESIGN MODE

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.

What does CMS stand for?

CMS = Content Management System

DEVICE VIEWPORTS

The Device Viewports conveniently allow you preview how your pages appears at the smallest width for each device.

The breakpoints are:

• Mobile: 320px
• Tablet: 768px
• Desktop: 1080px
  
  

UNDO AND REDO

This is fairly self-explanatory. You can Undo and Redo changes within your session time.

SAVE

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.

PAGE SETTINGS

In the Page Settings area you can control:

• General page settings like the Page Title and URL.
• Widget preferences such as the text and icons that will appear in feeds such as News Widgets or Events Widgets.
• Page SEO content from the Page Settings area.

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.

ELLIPSIS

The Ellipsis presents the actions of what you can do when you're finished editing. 

SAVE AND VIEW

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.

• Hard Refresh on a PC is 'Ctrl +F5.
• Hard Refresh on a Mac is 'Shift' + 'Command' + 'R' in Chrome, and 'Command' + 'R' in Safari.
  
  

Save and Exit will complete your session and take you back to the main Pages area.