Active Images

Overview

When we create a website for you initially we leave a number of features disabled to avoid too much complexity at the start and allow you to make progress quickly with the basics. The features that are disabled can be switched on when you are ready by visiting the Special Features page in your Administration area, and one of the most useful is Active Images. (Longstanding clients please note that the term Active Images has previously had other names such Pop-Up images. With our latest upgrade of functionality we changed it to Active Images). Once you enable Active Images you can do all of the following.

1. Include Call to Action graphics on your pages (including the sidebar) that can grab attention and direct visitors to particular pages where they make take an action such as enquiring or making a booking. Examples of this include Gift Vouchers, Special Offers, Free Initial Consultations and Time Limited Offers. You may recognise these as we include free graphics for these options in your image library
2. Add an image to your page that is clickable and takes a visitor to an external website. This is useful for professional association logos or an external blog website
3. Add a pop-up image which appears over the top of your web page. You may want to show a large (almost full screen) picture of your treatment room or the location of a retreat for example, but such an image would overwhelm the page if included with your content. Instead show a small version and tell visitors they can click it to see the full picture.

We'll explain how to do each of these in this guide, but first you'll need to switch on Active Images if you have not yet done so. Just log in to your Administration Area, click Special Features on the left and click the option to enable Active Images as shown below.

Before we get into the examples, there is one more feature you may also need to switch on to take full advantage of active images - storyboard layout. When we set up your website initially each page has the option to show words with a subheading and an optional image, but for active images you will more than likely want several images on a page. To do that switch on storyboard layout for the page you are adding the images to. If you don't have any experience of that see our Paragraph Control Tool EZ Guide.

Call to Action Images (Gift voucher example)

This option is very simple to do. Let's say we would like to entice people to our Gift Voucher page where we show examples of attractively presented gift vouchers, and give people the option to buy one online. If our website has a green colour scheme we may use the free green Gift Voucher graphic provided in your image library and put some suitable words alongside which we place a few paragraphs down on your home page like this.

You may also add a link saying "click to visit our Gift Vouchers" page, though it has become fairly instinctive for people just to try clicking on graphics like this one. At this stage of course nothing will happen, so let's make it clickable now. We'll assume you have enabled Active Images and have already created your Gift Vouchers page, so we just need to set the graphic to take a visitor to it. To do this log into your Administration Area and go to the place where you have set your gift voucher graphic to display. It will look like this screenshot below, with a field heading on the right of Go-To Page / Pop-Up Image. Click the pull down menu below this and select your Gift Vouchers page. Now just save your changes and the Gift Voucher graphic is clickable. 

You can set a Go-To Page for any or every image on your website. You aren't restricted to the special ones we made, so if you can get hold of free graphics (or pay for better quality ones) from the web or get a designer to create some then you can really use the power of a compelling image to engage your website visitors better. It is often referred to as a Call to Action graphic as it encourages a visitor to take an action, rather than just reading.

External link Images (Professional association example)

External website link graphics work in a different way to links between pages on your website. External website addresses are fixed and fairly permanent. If you are a BACP member, then your association's website address is www.bacp.co.uk and you know from the start that this is the address you want associated with the image. If you are on the accredited register you may instead want the graphic to take you to your own entry in that register. Either way the address is something you know at the start. For this reason Active Images gives you the means to store a website address along with the image when you load it in. See below for how the New Image upload tool looks with Active Images enabled - it is just a thumbnail but you can click to see it enlarged.

We recommend using the blue test button to open a new tab using the address you put in the website link field. It's much better to check that your website link works at this stage rather than after you've loaded everything in and updated it on your pages.

Once the website address is stored at upload time it will automatically be linked to the image whenever you display it. There's no further work needed and no need to set a Go-To Page (Technically you could apply a Go-To Page and if you did it would override the external link you stored, but that would be an odd thing to do!)

Pop-Up Images (Therapy room example)

The first two types of Active Images are likely to be the most useful for therapists, but there may well be occasions that Pop-Up Images are desirable. Just imagine this was the view from your treatment room or the location where you are holding a course or retreat.

It would certainly add to the appeal, and you'd no doubt love to display it as big as possible on your website. The trouble is that a really big image would be overwhelming and make your website look unprofessional. You have perhaps seen websites where people display enormous pictures that push all the text off to the side.

Here is a way you can do a neater job. Upload your large image (let's say it has a filename of nice_view.jpg) using the uploader's resizing option and create a paragraph showing this reduced size image alongside your description. In the example below we took the 200 pixel resizing option so that it fits nicely to the side of our wording.

Secondly, rename the original image on your computer to nice_view_big.jpg but otherwise don't change it in any way, and upload it again but setting the resizing option of Original Size. Now you have two versions of the image in your image library and you can go back to the page where you feature your photograph and use the Go-To / Pop-Up Image pull down to select the new enlarged picture, just like we show in the screenshot below.

Now just save your changes and the small thumbnail image has become clickable. Your webpage won't look any different, but to give you an idea of what it can now do, see below for a copy of the above screenshot example but click-enabled to show what your website visitor experiences. As you may have guessed the second image does not need to be the same-just-bigger, it could be a different image entirely or the same location from a different angle. Note that the way we do the pop-up on your website is more stylish than we are able to demonstrate in this how-to guide.

Summary

Active Images have a lot of power to improve the interactivity of your website and develop it beyond being simply an online leaflet. They can be used for a call to action which can bring you more business, or to reinforce your professional credentials or to use the power of images more effectively.