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.
BUILD YOUR OWN CUSTOM WEBSITE DESIGN
ON DEMAND LIVE EVENTS
WHAT'S THIS? IT'S A GLOSSARY OF FEATURES
ALL FEATURES
ALL FEATURES
ALL FEATURES
ALL FEATURES
ALL 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 | 8 min read | 10 min video
NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
In this, the last Episode of Series 3, we look at the 12 Content Components that can be added to Frames. Having built thousands of website pages, it's safe to say I've picked up a few tricks along the way. To close out the series and make it a little more fun, we'll tackle all 12 with a Top Tip that you can easily apply to supercharge your content editing.
In the Layout drawer, you will have no doubt noticed that you can drag in content components and drop them anywhere on your page.
Over the years we got a little tired of opening and closing the Layouts Drawer then dragging and dropping components via 'Build' tab. The beauty of building your own software is that you can create what you like. So we decided to add a '+' right on the Frame tools saving the action of having to have to drag and drop. When you select a Content Component it will automatically drop to the bottom of the Frame. Though a Top Tip would be to hold the 'alt' key and select the component. It will then drop to the very top of the list. Once on the page, you can drag the component anywhere and even drop it in other frames on other parts of the page.
The Text Component has a range of features that we've modified to suit MOBLE. The Top Tip would be to get to know how we've modified the normal text editor that you might see to suit MOBLE websites.
Responsive design brought new challenges for content editors. How would images work on all devices and how would you be sure that large images on the desktop would be contained and format nicely on mobile?
On MOBLE we have a few tools to manage image size responsively and these are:
Width
You may decide if you what to display your image to actual pixel width or a percentage width of the frame.
Height
You may decide if you want to display your image to actual pixel height or a percentage height of the frame.
Max Width
'Max Width' provides additional functionality that can enhance the look of your images. You can set 'Max Width' if you wish to control the maximum width of an image, even if on a particular device (e.g. desktop) the frame is wider than the image.
EXAMPLE:
Imagine that you have an image that is 900px wide and you do not wish it to stretch beyond 900px (otherwise it will become pixelated or blurry).
You set the (normal) Width (%) to 100% as default on MOBLE CMS.
On a Laptop the screen width is 1440px wide. Therefore by setting the Max Width to 900px the image will not expand further than 900px.
However, on a mobile that is say, 320px wide, the image will render to 100% of the screen width and shrink with the size of the device.
(This is why MOBLE CMS has 'Max Width' not 'Min Width').
'Max Width' can be set to an exact pixel width, like in the example above, or as a percentage of the frame (e.g. only ever display the image to a max of 90% of the frame).
Max Height
'Max Height' can be used to make your image either a maximum % height of the frame or a maximum pixel height.
EXAMPLE:
Imagine that you have an image that is 700px high and you do not wish it to stretch beyond 700px (otherwise it will become pixelated or blurry).
You set the (normal) Width (%) to 100% as default on MOBLE CMS.
On a Laptop the screen width is say, 900px high, therefore by setting the Max Width to 700px the image will not expand further than 700px.
However, on a mobile, that is say, 568px high, the image will render to 100% of the screen width and shrink with the size of the device.
(This is why MOBLE CMS has 'Max Width' not 'Min Width').
Given the nature of vertical scrolling 'Max Height' is infrequently used. Leave this field blank unless for a very specific purpose (e.g. thin portfolio images).
Here, the image is set to 100% of the Frame Width. Since some screens are wider than 1440px, Max Width ensures the image does not stretch more than 1440px, and therefore it will not become pixelated.
The Button Component does some nice things like enabling you to:
All this is quite intuitive and we encourage you to play. At the time of writing MOBLE is also in the development of a new Button Component and a CSS Button Builder in the Dynamic Styles area, so stay tuned for that.
Though the Top Tip has to be Anchors. This is not so intuitive but it is of great value, so definitely worth learning. You'll notice that when you open the Frame Tools, and go to the 'ADV' advanced tab. There is a Frame 'ID'; type any word in here to name the frame. Ideally, no spaces please, but no big deal if there are. Then, when you go back to the button Component you'll no see this word in the Anchor list. Simply select the Frame and click the 'Scroll to' button on. Then, your button will automatically scroll people to that Frame, so its a neat form of navigation.
To apply text link anchors (rather than buttons) open the Text Component, then in the Link tool you can type in your Frame ID in the URL field. You just need to make sure you include a hash in front of it like this: #idname.
Finally, in the class dropdown just select Scroll and you're done.
Customised Buttons with your Primary and Accent Colours. Adjust the shape and Icons.
Click on the Question Mark Icon next to each Field for further information.
We cover Widgets in the next Series. The Top Tip here would be to jump ahead and learn all about it. Widgets are one of the core features on MOBLE enabling you to control large volumes of content in feeds that you can pull on to your page and style the look and feel in a wide variety of ways.
Understand the Widget Component in Series 4.
You can create forms in the Forms area via the Main Menu. Once you create a form you can drop it on to your page here.
A Top Tip would be to drop your form into a Frame, as this will allow you to control the background colour or background image of your form.
You can do this as follows:
Now you have a beautiful form that is ready to start attracting new enquiries.
The Form Component lets you select from the List of your Forms. You can create new Forms in the Forms area.
Menus don't have to be limited to Header and Site Map menus. In the navigation area, you can create menus for any group of pages and then drop them anywhere on your page with the Menu Component.
Consider using menus for related links, even Top Tips! Whatever you can think of, it can be a nice user experience to give your users a choice to browse more of your content. Look at the right-side Menus on this page, they are created in exactly this way.
Just like with a Forms consider dropping your Menu into a Frame, so that you can give it a fresh background colour and the right amount of padding.
The Menu Component lets you select from the List of your Forms. You can create new Menus in the Navigation area.
You can learn how to add Videos to your page from YouTube and Vimeo below.
The Top Tip, however, is not to confuse the Video Component with the Background Video. The Video Component can be used to drop videos on to the page, while you can add background videos in the Frame tools so that they run behind the content.
How to get the Embed code from YouTube:
How to get the Embed code from Vimeo:
To add Social Icons consider using one of the following websites:
You can use the Social Component to drop in the 'embed code' that you are given on these websites. You can, therefore, link to your social media pages from anywhere on your web page.
Simply type in your address and a Google Map will appear on your page.
Again, I would suggest adding a new frame and then adding the Google Map inside it. This will allow you to control padding around the map.
Finally, the code component allows Frontend developers to create code for anything directly into specific parts of the web page. If you can code that will all make sense. If not the Top Tip would be to speak to a Frontend developer if ever you need extra help with design tweaks or coding new things.
Design a website in under 3 minutes!
GETTING AROUND
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.