build a websiteTemplate Designer Overview

Reason8 are very proud to unveil its latest website facility – The NEW Template Designer. After several months of development, this incredibly flexible facility will allow website builders to design and build their own bespoke website header and background. Over the next few weeks we’ll be covering all aspects of this new and exciting facility. Today we’d like to introduce you to all the functions and options available with a Template Designer Overview.

To Start – Choose a Starter Template, which you can then personalise with your own colour scheme text and images. Once you’ve chosen a template from all the categories available, click Personalise to open the Reason8 Template Designer.

build a website

You’ll now see your Template along with the Main options of: Background, Add Images and Add Text. At any time you can click “Next” to start a 14 day trial, during which you can continue to personalise and design your header and background.

Very Clever Tools

Before we go any further, I’d like to draw your attention to two really clever tools which will help you with several of the Template Designers functions. 

Firstly – Drag & Drop. You can literally drag and drop any images or text to place it exactly where you need it. You can drag & drop it as many times as you like. Also once you’ve put it where it needs to be, simply double click it to open the relevant editing options!

Secondly  – Colour Picker. You have the usual colour spectrum which offers you every colour you can imagine. BUT, your new Template Designer also includes a Colour Picker, which will allow you to copy a colour from anywhere on your header. This means that once you’ve uploaded your logo and or images, you can copy any of their colours to colour co-ordinate your headers colour scheme!

build a website


In the Background options you can choose Colours for the background of your header, the main body of your website and the area outside the borders of your website. You can choose style, fade and opacity options. You can also choose to have square or rounded corners for your header. And finally you can customise the images which make up the background of your header and footer and the images, which make up the foreground and the top of the body of your website.

Add Images

You can either upload your own images or you can help yourself from our extensive library of company logos, shapes and lines, icons and generic images. To select an image, simply drag and drop it into your header. To edit any of the images in your header, simply double click it and the options for; Size, Corners, Rotation, Links, Fade, 3D – Reflection or Shadow, Colour and transparency and edges with blend, will open up below.

build a website

Add Text

You can either edit any example text already there by double clicking it or delete it and start with new. Options for text include Font, Style and Effects. Choose from 20 fonts along with flexible colour, size and format. You can tilt your text, make it partially transparent, add shadow or a reflection or bevel it for a 3D feel. You can even add an attention grabbing effect such as “Move Left”, “Close the Gate”, “Fade in”, “Eye opening”….  There are 15 effects to choose from and they’re all great! Set the duration, delay and the behaviour of the effect and then click the play button to preview. Now, we gave an official addiction warning in our first introduction of the New Template and this is one of the places where you could get stuck playing for hours so it’s a good idea to get yourself a cup of tea before you start.

Tune into the next tutorial for a more in depth look at the functions of the new Template Designer.

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');