easy to follow step by step guides


We have recently developed an option for creating attractive boxed text, called quoteboxes. They are ideal for testimonials or quotes, and anything you want to make stand out from the page.


Quoteboxes provide an attractive way to highlight a short statement and make it stand out from your page. This makes them ideal for testimonials and inspiring quotes or for marketing messages such as special offers. They are very easy to add and come preset in a harmonious colour scheme to give your web pages a lift too. In this guide we'll explain:

  • Options for adding Quoteboxes
  • Suggestions for using Quoteboxes (and improve your Google friendliness)

Please note that Quoteboxes come in a standard width and style, intended to look clean and professional. If you wish to add something more unusual, you can custom create a graphical version using suitable online software. For more information see our Pretty Boxes guide.

Options for Adding Quoteboxes

To introduce a quotebox, use the <Q> code. The basic method is very simple, and looks like this:-

<Q> text text text </Q>

Note that the text inside can wrap onto multiple lines to put a longer message into a Quotebox. So a simple quote might be entered as follows:

<Q>Know yourself and you will win all battles - Sun Tzu</Q>

This would produce a Quotebox like this:-

Here's a longer example, with quotation marks:

<Q>"If you realize that all things change, there is nothing you will try to hold on to... there is nothing you cannot achieve." - Lao Tzu</Q>

Which appears on your website as...

Background Colour

Notice that the quotebox has a background colour which is automatically set to be a harmonious match to your design, and is usually a pale shade of the dominant background colour of your website design. All colourMAX designs (such as Curvy colourMAX and Chequers colourMAX) allow you to change the background colour (which will change the quotebox colour), as do several other designs. If you go into the Colour Scheme Editor section of your Administration Area you will see if this is possible for the design you are using.

So for example, if you are using the Curvy colourMAX design and change the background colour to a dark plummy red colour, the quotebox will come out in a paler version of it, such as this.

Text Colour and Formatting

The text colour is unchanged from that of your main contents, as set in the Colour Scheme Editor. If you want to change the colour of the text inside using <FONT> instructions or add other formatting inside the box, such as bold <B> or italics<I> or even an internal link, then these instructions must come inside the <Q> codes.

For example, to make the text bold and italicised, use the following method:

<Q><B><I> text, text text</I></B></Q>

Please note that although you can change colour in the same way, its very easy to make a website look gharish and unprofessional with over use of colour, so very often the simple of use of bold (or no other formatting at all) is the best looking option. For example:

<Q><B><I>You always pass failure on the way to success. - Mickey Rooney</I></B></Q>

comes out as...

Centred Text

A common styling used with Quoteboxes is to centre the text inside. Although you may previously have used <CENTER> on your website, you are not advised to use <CENTER> with Quoteboxes or things can easily go awry. You might not even notice it has gone wrong, but someone else with a different browser could see it looking very messy and possibly unreadable.

For this reason, we have made a very simple option to centre the text inside a Quotebox. The method looks like this:

<Q C> text inside </Q>

Its the simple addition of the "C" that does the work, and you don't need one in the closing code. Here's an example:

<Q C><B><I>One that would have the fruit must climb the tree. - Thomas Fuller</I></B></Q>

shows up as...

Just a quick reminder to always close these codes in the reverse order to how you opened them. If you use say bold and italics and the codes <B> and <I>, then when you want that styling to finish you need to close with </I> then </B>.

Correct ordering is explained in the Combining HTML section of our main Help Guide, but as a reminder,

<Q><B><I> text here </I></B></Q> is good        

<Q><B><I> text here </B></I></Q> is bad          

Suggestions for using Quoteboxes

If you do use Quoteboxes for inspirational quotes, why not update them regularly, and put a new one on your home page every fortnight? As well as making your website more interesting for repeat visitors, Google will like you more for it ! This is because Google prefers websites that have changing content. Google visits websites on its list every few weeks and if it finds no change it will start to consider your pages old and stale, and will come back less often and can tend to list you lower down as a result.

So, if you struggle to think of ways to make changes to your home page, the use of inspirational quotes is a good method.

Where to get ideas for inspirational quotes

There are some great websites with quotes of all kinds on them. Generally these are very old and therefore have no copyright implications so you are free to reuse them. Here are just a few you could try...

Even better rather than deleting the old quote, you could allocate one of your pages for all previous quotes. If you start a Quotes page with lots of nice quotes, that's a great reason to email all your friends and colleagues to show them and perhaps that will help in circulating your website to potential new clients. If you don't have a spare page, please contact customer support for advice and information about upgrade options.

Other uses for Quoteboxes

Testimonials are another great use of Quoteboxes, and again you may wish to update a testimonial on your home page, and keep a dedicated page for all your older testimonials.

You can also use quoteboxes to announce special offers, or even a simple invitation to get in touch. They add a nice splash of colour, so are great to use for whatever reason. Just be careful not to over use them though. Like all good things, you can overdo it, and the attractive impact of one or perhaps two quoteboxes on a page, is lost when there are lots.

Example Usage

This quoteboxes guide is part of our EZ Guide series created for therapists using the WebHealer website system. Quoteboxes are a very simple addition and you should be able to add them very easily but if you'd like to see some examples of how they can be used and perhaps be inspired a little then we have included links to a few clients below who are using them. These examples just happen to be counsellors or psychotherapists. Please let us know if any of the these examples are now out of date as the therapist may have changed their site since we last checked.

Inspiring Quotes

www.danieladentonicounselling.com uses a quotebox on the home page to feature a famous quote by Confucious. Counsellors and pyschotherapists often include inspiring quotes like this to help create a sense of possibility and hope.