Website Design Builder – Add Images - Colour 

build a websiteIf you’re building a website with your own bespoke website header and background using Reason8’s amazing new Website Designer Facility, you’ll no doubt be enjoying the enormous choice of options and effects.  The options within the “Add Images” alone, allow you to do some amazing things and offers the flexibility you need to create the perfect image for your online business.  We’ve started to create a series of tutorials to help you get the very best out of this incredibly flexible and easy to use facility. Click here to view all the tutorials so far. In this tutorial, we’ll be looking at the “Colour” options available to you when you’re adding images to your header.

If you’re starting from scratch with a new trial, simply choose your preferred starter template from all the categories and choices available and click personalise. Don’t forget to check out the previous tutorials if you need a little help to get you started.  

If you are in the midst of designing your fantastic new header, simply log in to your website, Click “Step 2 Style” and click your header to access the editing options. We’re looking at Image options today so click “Add Images” or double click on any of the images already on your header to edit those. Then click the Colour option. 

The main options here are : How Much Colour; How See Through; Link to and Fade In. 

How much colour? 

This option allows you to literally change a colour picture to black and white or greyscale or you could just tone down the colour to produce an old fashioned sepia effect. Don’t be afraid to play with this option... black and white images are pretty cool these days and can produce a really professional look when used cleverly with colour in your background!  As with many of the options on the template designer, it works by using a slider scale and you can see the effect being created on your header as you slide. 

build a website

How See-Through 

This option can create a really special look. It can also be handy if your images aren’t of the best possible quality too! You can fade your images into the background, setting different images with differing transparencies for a really arty feel. Or if you move the slider to about half way, it’s fade them enough to allow you to place text right over the top of your images. Your images will still be very an integral part of the information your header is providing but it allows the text information to take the spotlight. 

build a website

Fade In 

This option helps you to bring life into your website with animation. You can set a number of images to fade into view at different times. You could sit several images on top of each other and set them to appear over the top of each other one at a time. You could set them in a vertical, horizontal or diagonal line or in a grid and then have them magically appear on your header at different intervals. To set the fade in times, simply select each image in turn and use the slider to set different delay times for each of them to wait before appearing. build a websiteThe Play button underneath the slider allows you to preview each setting you make and so allows you to just play about with different delays for each of your images until you’re happy with the animation. 

Link To: 

This option is important as you may need to create a link to your login page if you haven’t chosen a template which provides an Admin / Login button. Select any of the images or any of the text and use the drop down menu to select “Your login page” to set the link. Don’t forget to add links to your home or contact page from the images in your header as this can help make your website more visible to search engines.
Simply highlight an image then choose which link destination you want to attach from the drop down menu. 

build a website

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');