EPISODE:
1

  

GETTING AROUND THE VISUAL PAGE EDITOR


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

Series 3: Episode 1: Getting Around the Visual Page Editor


Layouts

The Layouts tab opens a drawer containing the Dynamic Layouts. The drawer opens from the Left and allows you to drag and drop layouts onto your page. Notice that when you drag a Layout on to the Page that the draw will automatically close allowing you to start editing the layout. If you would like to drag in multi layouts at once, you can throw the draw across to the right of the page and it will remain open until you close it.

In the next Episode, we'll have a look at each category of Layouts in detail. These are:

  • Custom - Layouts that you create and save for later use.
  • Inspire - The best Layouts of the month as made by the MOBLE community, You can keep track of all of the latest and greatest Design layouts, and you can view these on MOBLE.com on the Inspire page. It's important to remember that Layouts are not Themes, so you could drag a Layout from June 2017 and mix and match it with a Layout from August 2017. When the Layouts are dropped on to your page they will instantly pick up your CSS colours, fonts and styles, ensuring the layout will instantly take on your brands look and feel no matter who designed them. This is truly a unique feature of MOBLE and we hope you enjoy such a community led source of inspiration to help you to design great things long into the future.
  • Page - The base full Page Layouts made by the MOBLE team to help you get started quickly
  • Designs - The base Design (single rows) made by the MOBLE team to you get started quickly
  • Blocks - The basic frames used to build Layouts from scratch
  • Content Components - Content types that you can drag and drop on to your Layout, you can also add Content Components directly into each Frame using the '+' icon on each Frame. A nice tip is if you hold 'alt' then the content and click, the content will be placed at the top, if you don't it will go to the bottom. Of course, you can drag and drop content into any place on the page when you are in Block mode.


Content

The content mode allows you to click on any piece of content, a pop up editor will then appear allowing you to make your changes.


Row

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


Block

Block mode enables you to control some of the inner frames. For developers out there, these are effectively the divs. Here you can control the properties of each Frame, again by clicking on the Pencil icon. The block is useful for padding and alignment, though you can also experiment with different background images and colours in exactly the same way as Row mode. In Episode 7, we will look at some of the effects such a 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 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.


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