FRAME TOOLS PRO GUIDE: BACKGROUNDS


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

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.

Page Editor Background Colour

The Background Tab of The Frame Tools Drawer showing the functionality that we'll cover below 


BACKGROUND COLOUR

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.

FUTURE-PROOFING YOUR DESIGN

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.


BACKGROUND GRADIENT

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


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.


BACKGROUND HEIGHT

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.

  • Flip in to 'Design Mode'.
  • Ensure the two inner frames, for all columns, have Background Height set to 'Full'.
  • Assuming their Parent block has 'Match Height' turned on, then all Frames will align in height.

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. 

ONE

TWO

THREE

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.

BEST PRACTICE FOR 'CONTAIN' & 'FULL'

'Contain' is the default setting on Frames that are not in columns. Therefore, as standard apply:

  • 'Contain' to all Frames that are not in Columns
  • 'Full' to all Frames that are in columns

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.

ONE

ONE

This block has more content.

ONE

TWO

TWO

TWO

This block has more content.

THREE

This block has more content.

THREE

THREE

Background Height Contain Masonry

A Masonry Block with all Frames set to 'Contain'. Therefore, all Blocks expand to their natural height.


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.

LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES