Website Design Builder – Adding Style to your Text

build a websiteIn today’s tutorial, we’ll continue to look at the extensive options and effects available to you when adding text to your new website header. Reason8’s fantastic new Website Template designer gives website builders the ability to design whatever look and style they need for their business website. Don’t forget to check out the whole series of tutorials that we’ve created to help you use every aspect of your Website Template Designer. Click here to view all the tutorials so far.
In this tutorial, we’ll be looking at “STYLE” options available when adding Text to your header.

If you’ve just started a new trial with Reason8 and this is the first time you’ve used the Template Designer simply choose your preferred starter template from the categories and choices available and click personalise. If you’re already becoming at dab hand at website design and are in the process of creating your fantastic new header and background, simply login to your website, click step 2 “Style” and click the header to start editing.

Click the Text tab at the top of the designer.

The Text editing box will open up with a text window at the top where you enter the text required. Or simply click on any existing text you may have already placed to start editing.
From your three main options: FONT, STYLE and EFFECT, we’ll be looking at STYLE so click this tab.
The Option within the STYLE tab include: Angle, See Through, Outline, Shadow, Reflection, Bevel and Link to.

This option uses a slider to allow you to change the angle of your text. By moving the slider left or right, your line of text with rotate up to 90 degrees around its left axis. By adding a slight angle to some or part of your text you can really help to make it stand out and add interest to your header to grab visitor’s attention. If you change your mind and would prefer it straight, the easiest way to return your text to normal is by clicking the “Off” box next to “Angle”.

Using a slider again, this option determines the opaqueness or transparency of your text against your header background. This option can work really well to tone down parts of your header information allowing the most important parts to take the spotlight. Or it can help to create a nice subtle effect if you‘re going for an arty design.

build a website

Here you can select any colour you like for an outline for your text. Choose a colour from the colour spectrum or pick any colour from your website using the colour picker. By altering the Thickness and Fade you can change the definition of your text outline. The best thing as with most options is to play around with the settings until you like the look. You can always go with straight text by clicking the “OFF” button within this option box.
build a website
Shadow or Reflection. You can choose to add either a shadow or a reflection effect to your text. The shadow appears to the bottom and right of your text. A reflection appears underneath. The thickness and fade options within the Outline box also affect the definition of these options, so again play around with them until you’re happy.

build a websiteBevel creates a 3D effect on your text as shown here. You can add Bevel along with Shadow or Reflection and again the thickness and fade can adjust the definition.

Finally the Link To option allows you to add links from the text in your header to your home, contact or login page. Always make sure you add at least a couple of links from your header as this can help with the visibility of your website to the Search Engines. It’s very likely that the text on your header will also contain some of your top keywords and so creating a hyperlink to your home page is a good move.

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