Website Design Builder – Text Effects!

build a websiteWe’re going to continue looking at “Adding Text” to your header in today’s tutorial but we’ve got to one of the really fun bits!!  I’ve mentioned the extensive options and effects available to give website builders the ability to design whatever look and style they need and it’s the effects that we’ll now look at. Text Effects is one of the many ways to really bring your header to life and grab visitors’ attention with movement and animation of your text. 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.

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 or double click any of the lines of text already on your header.
The Text editing box will open up with the text window at the top showing your text. Now click the Effect Button.

You have 14 different Text Effects to choose from:

Flap Down, Close the Gate, Fall down, Swing, Roundabout, Windmill, Move Left, Move Right, Drop Down, Move Up, Wipe Right, Wipe Left, Eye Opening and Fade In. They're all great and so my advice, if you have time, is to try them all !! Select each one and click play to view the animation.

build a website

Once you’ve chosen your amazing effect, you can tweak it’s behaviour with the options you can see on the right. Choose from Normal, Smooth, Bounce or Elastic. Again, try them all and click play to view to fund your favourite.

Normal and Smooth are similar but Smooth is slightly quicker and smoother.
Bounce will complete the animation but will add a little double bounce at the end.
Elastic is the quickest effect and adds a little wobble at the end.

Duration and Delay

Using the now familiar slider, you can affect the duration of the animation. The longer the duration, the slower the effect. This option literally determines how long it takes for the effect to complete it’s full cycle. The Delay slider determines how much of a pause there is before the effect actually starts it's cycle.

The Delay option is a great tool to make different pieces of text behave in different ways. So,  for instance;  your main Company Name could slide in slowly from the left straight away and a couple of seconds later your slogan can bounce into view. There are literally endless combinations you can create and it’s so simple. 

Watch your Download Times!!

There is one thing to bear in mind when creating your animated header. The duration and delay that you set on your text can increase the download time of your header if used to excess. 

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. Also if the template you have chosen doesn’t have a standard admin, login button, you’ll need to set one yourself otherwise you’ll find yourself locked out without a key. You can set your hidden build a websitelogin link on either text or an image. If you do forget to set a login link and get locked out, simply add “user_login.cfm” at the end of your domain in the browsers address bar.

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