Website Design Builder – Background Style

build a websiteFollowing the launch of Reason8’s amazing new Website Template designer, 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. The Template Designer gives you the ability to build a website with your own header and website background design with endless options to edit images and text with styles and effects galore! Be careful though, it’s so much fun, it can be highly addictive!
In this tutorial, we’ll be look at the second part of the Background Tab: Size and Style…..

If you’re starting from scratch with a new trial, simply choose your starter template from the categories and choices available and click personalise. When you click the Background Tab at the top, you have three main options, COLOUR, SIZE and STYLE. We covered Colour in the last tutorial, which you can look at by clicking the link above. Before you check out the Colour tutorial, “Size” essentially deals with corner rounding and this only actually applies if you are using a standard colour background for your header and body. Many of the starter templates actually use Design Images to create the backgrounds and in this case corner rounding becomes redundant. However, if you do want to try out Corner rounding you can switch off the images and play around with colours instead. 

To do this, go to Colour > Header > Step 1 – untick the Switch OFF box.
And Colour > Body > Step 1 – untick the Switch OFF box  and Step 3 – Hide Foreground Image,

which then removes the background images to reveal the colour options.

You can now play with both colours and corner rounding.

build a website

build a websiteThe other option within SIZE is the depth of your header and therefore the position of the header and body images. Simply use the slider, which you’ll see up in the top left hand corner to move either the images or the colour lines up or down. This comes in handy when you are positioning images such as your logo or your header text. It’s one ofthe really flexible functions of this facility that makes it a real joy to work with!

To customise the template you chose using the Template Design Images provided, simply re-tick step 1 on both “header and body” and click “show” in Step 3 on “Body” to bring back the images. Now click the “STYLE” button and you will see the options available with regard to the images for Header Background, Header Foreground, Footer Image and Body Top Image.
The Header Background Image sits behind any text or images you place.
 The Header Foreground will sit in front of any images or text you place. For instance there is one template, which looks like a washing line displaying your images and the pegs sit over the top of you images to look authentic.
The Footer Image is the one at the bottom of your website, below your website content area.
The Body Top image sits at the top of the body of your website and so just above the area containing your content. This most often appears as the bottom part of the Header background image and work to pull the header and body of your website together nicely.

build a website

The options in STYLE allow you to choose to hide or show the Template Design Images and with the main Header Background image you can change how much you can see-through it. This is quite clever should you want to place Text over the top of the image. 

Once you’re happy with the colours of images for your template design, the next step is to add your own images or edit your text. We’ll look at this in the next tutorial. See you soon.

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