EPISODE:
5

  

FRAME TOOLS PRO GUIDE: BACKGROUNDS

 

Frame Tools Background Colour

In this Episode, we take a look the Frame Background. Sprucing up your backgrounds is perhaps one of the easiest things you can do to bring you web pages to life in moments. We share some helpful tips and tricks to get you started quickly so that you can bring your web pages to life, and manage your design like a true website design pro.

Also, consider following straight on to the next Episode where we look at managing Background Images.


Background Colour

MOBLE gives you control to change the background colours of every Frame, offering you full control to paint your web page however you like it.

As we learned in Series 2, you can update your colour swatches in the Styles area. By adding Primary, Accent and Supporting colours to the Styles area they will be made available to you here.

Future Proofing

Notice that in addition to you brand colour swatches, there is also a colour picker for you to add new colours to the page. This could be useful is your page is a Case Study about your client and you wanted to use their colours to compliment your design.

However, instances like this would be rare, 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 that you add colours to the Dynamic Styles area, then if you need to redesign your website in the future, you can simply swap the colours and they will update site wide. Therefore, it's best practice not to use the colour picker at all and stick to your predefined colour swatches.


Background Gradient

Gradients, love them or hate them, they are an absolutely essential part of our design ecosystem and no web page editor is complete with out a gradient tool.

This really is a feature for those with a design eye, I can only encourage you to play.

TOP TIP

A great tip for gradients is to combine a background colour with a gradients colour. This way you are combing colours of your brand and used in the right way it can make for a pleasing effect. 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


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.

Whats more, on MOBLE you can even apply overlays for you the other colours in your CSS so you really can have lot's of fun and all the time stay true to your brand.


Background Height

Background Height is used to stretch the height of the background colour or image so that it is full height. This is useful where you have a Layouts with more than one column, say three columns, and you would like all three columns to line up with an even height.

The best practice is to alway set this to full, then you can also modify Frame heights further in the Frame tab. You notice that all MOBLE layouts have this turned on in the inner block. This just makes life easy. If you are manually making wonderful things like masonry grids, then 

If you are manually making wonderful things like masonry grids, then you would consider setting this to contain.


Background Video

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.