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 | 3 min read | 3 min video
NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
In this Episode, we take a look at the Frame Tools Background tab as shown in the image below. Sprucing up your backgrounds is perhaps one of the easiest things you can do to bring your web pages to life in moments. Here we share some helpful tips and tricks to get you started quickly and manage your design like a true website design pro. Following on in the next Episode we look at managing Background Images.
The Background Tab of The Frame Tools Drawer showing the functionality that we'll cover below
MOBLE gives you control to change the background colours of every Frame, offering you full control to colour your web page however you like it.
As we learned in Series 2, you can update your colour swatches in the Styles area. When you are adding Primary, Accent and Supporting colours to the Styles area they will be made available to you here.
Notice that in addition to your brand colour swatches, there is also a colour picker for you to add new colours to the page. This could perhaps be useful for pages where you want to showcase colours of another organisation, such as a Case Studies page or a testimonial, where you decide to use their Brand's colours in a background on your page. Much like the MOBLE.com Stories pages and testimonials.
However, instances like this are rare and special cases. Do consider that if you add new colours to your page, they will be isolated to this single instance and therefore not part of your global website CSS. It's much better you add colours to the Styles area, then if you need to redesign your website in the future, you can simply swap the colours and they will update sitewide. Therefore, it's best practice not to use the colour picker at all, and stick to your predefined colour swatches.
Gradients, love them or hate them, are an absolutely essential part of our design ecosystem and no web page editor is complete without a gradient tool.
This really is a feature for those with a design eye, and I encourage you to play.
PRO TIP
A great tip for gradients is to combine a background colour with a gradients colour. This way you are combining the colours of your brand, and if used in the right way, it can make for a pleasing effect to showcase featured content. You can even apply a gradient colour and modify the opacity to really start to mix things up. Use gradients as you need them, though try not to go overboard and always respect your brand.
Background Overlay is a tool that you will use time and time again.
Have you ever been to websites where you can barely read the text that sits on top of an image? We'll imagine if the website had an overlay tool, you're rarely ever going to run into legibility issues as you can apply a background overlay at various opacity strength. Simply apply an overlay to any frame and use the slide control to find the right opacity.
What's more, on MOBLE you can even apply overlays the other colours in your CSS, giving you both fun ways to style content, and confidence to ensure you stay true to your brand.
In Background Height, 'Full' is most commonly used to evenly align the height of your grids. In the example below, we have three columns where all blocks should all have the same height; however, notice column Three has more text. If background height is set to 'Contain', three will be taller than column one and two.
All MOBLE Layouts are set up in this way as standard, to make your life easy.
As standard, on mobile devices, three columns will automatically stack into one column. However, if you would like to preserve all three columns, with no stacking, then simply apply 'unwarp' to the parent block.
Three has more text, but all columns have the same height.
A three column Grid with every Frame in the Grid set to 'Full'. The Parent Block has Match Height on, ensuring that all Columns have the same height, even though Column 3 has more text.
'Contain' is the default setting on Frames that are not in columns. Therefore, as standard apply:
The most common exception to this rule is when you are manually making masonry grids. For Masonry Grid, you would set Background Height to 'Contain' for all Frames. This will ensure the Height of each frame expands to suit the size of the content within it, creating a masonry grid effect, like we see below.
This block has more content.
This block has more content.
This block has more content.
A Masonry Block with all Frames set to 'Contain'. Therefore, all Blocks expand to their natural height.
Everybody loves a background Video when used in a thoughtful and compelling way.
Here you can embed code from YouTube or Vimeo and it will automatically add your video to the background of your frame. You can also elect to autoplay your video, mute the sound, which is often recommended for videos used in the background, and you can loop it so that it will always play.
As standard, we don't autoplay background videos on mobile devices to respect your user's data.
If you need help finding your YouTube or Vimeo embed code, just click the question mark icon more info via our help website.
Also, note that to optimise page speed, we don't play the background video in the Editor. To see your video click 'Save and View' to see your video on the live page.
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.