GETTING AROUND THE VISUAL PAGE EDITOR


S03 | E01 | HOW TO MAKE A WEBSITE LIKE A PRO

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.

MOBLE Layouts Drawer

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.

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

TEAM LAYOUTS:
Website Designers and Website Design Agencies can sign up for MOBLE's 'Teams Sites'. Teams can create their own branded, premade 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 Mode 'On' and 'Off' depending on if you would like to Design with the Web Builder or simply manage content as a business.

Notice the toggle switch in the Header.

When you toggle Design Mode 'On' Web Designers have granular control of Frames. They can design and build Layouts and drag components around the page. When the Designer has finished creating they might choose to Save their custom work to the 'Site Layouts', in the Layouts Drawer, then when they are finished toggle Design Mode 'Off'. 

Design Mode is toggled 'Off' as standard. Notice that when the toggle is set to 'Off' the 'Content' tab is highlighted, with the other tab 'greyed out', indicating that you are in Content Mode. Content Mode offers an easy-to-use CMS for businesses to edit text content, images, and components. The dragging of components is locked when Design Mode is 'Off', making a perfect environment for businesses and non-designers to write copy and edit the page content, without having to worry about accidentally editing the page structure and design.

On mobile devices, Design Mode is also 'Off'. Again, this stops the dragging of components, so you can freely edit 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 to leave Design Mode 'Off', though do consider toggling Design Mode 'On' 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.

With Design Mode 'On' you see Frames. With Design Mode "Off' you only see Frames when you hover over them.


CONTENT

Content mode is intended for editing content.

Notice that when you hover over and content you also see the most inner frame and the most outside Row. This keeps it simple for the content team.

  • The inner Frame lets you add and edit content components such a text, images, and buttons.
  • The out Row lets you change background colours, images and videos; without having to worry about things like 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.


ROW

Notice that when Design Mode is 'On' you can select Row to see only the Row.

Row mode allows you to control the most outside frame of your Layout. Notice that a mustard border appears around the Layouts while the Frame Tools is in the top left. If you click on the Pencil icon the Frame Tools will open from the right. The Row is often used to control the background image, background video, background colour, and overlays. It is also useful to adjust padding and alignment.

MOBLE Row

Row hightlight the most out Frame. This is useful for padding, as seen here. Though also commonly for background colours and images.


BLOCK

When Design Mode is 'On' you can select Block.

Block mode enables you to see and control the two inner frames of every block in one neat view. This allows you to rapidly edit many frames at the same time and have a nice visual working experience.

For developers out there, the Frames are effectively the divs. Block mode is a nice option to control the properties of each Frame, again by clicking on the Pencil icon. The block is useful to view and edit padding and alignment, though you can also experiment with different background images and colours in exactly the same way as Row mode.

Block mode is also a nice option for dragging around components, such as moving Text or an image from one place to another.

In Episode 7, we will look at some of the effects such as Parallax that you can apply to blocks, allowing you to bring a level of animation to your web pages.


ADVANCED

The Advanced mode shows all of the Frames. This is much like viewing all of the divs in the source code. You can add and remove as many Frames as you like, giving you complete control over your page, without any restriction. You really can develop custom layouts at lightning speeds without requiring a single line of code.

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.

MOBLE Advanced

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.

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

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