CHOOSE FROM 40 FREE DESIGNS
SUBMIT YOUR OWN DESIGN & RECEIVE A 40% PER MONTH ROYALTY
Select your free website design, then completely make it your own with our easy to use website builder and CMS.
WEB SHOP
Typical things we get asked to build:
CUSTOM WEBSITE DESIGN
ECOMMERCE BUILDS
CUSTOM HEADERS
VIRTUAL VENUES
SMS/WHATSAPP NOTICATIONS
CHAT BOTS
STORE LOCATORS
CUSTOM PAYMENT SYSTEMS
CUSTOM DIRECTORIES
CUSTOM PLATFORMS
CUSTOM DEVELOPMENT
INTERNET OF THINGS
WEB QUOTE
Get a Quote on any custom bits you need.
REPUTATION EDGE
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.
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 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
A Masonry Block with all Frames set to 'Contain'. Therefore, all Blocks expand to their natural height.
FREE
PLAY BEFORE
YOU PAY
MINI
12
PAGES
PLUS
50
PAGES
PRO
500
PAGES
CUSTOM
UNLIMITED
PAGES
PARTNERS & INTEGRATIONS
Connect your website to our ever growing community of friends...
Play before
you Pay?
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.