Quotes are a powerful tool to convey short written extracts of text; whether it's quotes from inspirational sources or reviews that your own customers have provided you with. If you sell products or services on your website; potential customers nearly always want to see testimonials from other customers. It's all about building buyer confidence, to win that sale!

RapidWeaver has always lacked any sort of semi-decent slider stack for displaying text. A stack for displaying quotes is something that's been frequently requested. Many existing slider stacks are optimised for images; meaning that what your website visitor or search engines see (in terms of written content) can frequently fail to meet expectations. Quotes demand a dedicated slider stack, and the new QuoteSlider stack aims to address this obvious gap in the RapidWeaver addon marketplace.

QuoteSlider is a specialist slider stack designed and built exclusively for displaying quotes. As you would expect, this stack includes a comprehensive array of useful customisable settings; with a distinct bias towards building text-based sliders. It's a very useful little stack element in a whole range of websites; ranging from churches to personal homepages, business, marketing, education and e-commerce. Definitely a stack you can buy once and use dozens of times. This is very much a stack element that will pay for itself in next-to-no time.

Here are some more key features of the QuoteSlider stack:
  • Option to embed QuoteSlider directly into a theme FreeStyle or ExtraContent container
  • Ability to customise nearly all aspects of font styling, sizing and colouring
  • Use quotes added directly to the page, a CMS or sourced from an online warehouse
  • Customise which quote starts first or have a random quote start the sequence
  • Swipe support on iOS and Android devices (for manually advancing sliders)
  • The slider background can be extensively customised, with colours, gradients or images
  • Use of text and Font Awesome icons means that QuoteSlider is fully retina display compatible
  • Customise the transition direction and speed easily in the stack settings
  • Toggle next / previous and pagination controls on and off, as required
  • Manual or auto operation of the QuoteSlider
  • Fully responsive, automatic (height) resizing to fit different quantities of text
  • Lightweight markup, no Flash, tested and compatible with all major web browsers

The setup of the QuoteSlider involves a bare-minimum of basic HTML markup (documented below and within the stack). This gives you support for an unlimited number of quotes; plus the ability to easily add, edit, delete or reorder your quotes at any time. Quotes can be setup directly in your page or alternatively you can pull them in from a plain text file hosted remotely elsewhere using an innovative 'warehousing' option.

Example

Here is an example of the QuoteSlider with the default settings and quote content applied. There are many dozens of settings provided in QuoteSlider, so it's well worth downloading the free demo version to try it yourself in RapidWeaver.
 
Favourable Quotes
  • Success consists of going from failure to failure without loss of enthusiasm. Winston Churchill (1874 - 1965)
  • If you have an important point to make, don’t try to be subtle or clever. Use a pile driver. Hit the point once. Then come back and hit it again. Then hit it a third time-a tremendous whack. Winston Churchill (1874 - 1965)
  • Success is not final, failure is not fatal; it's the courage to continue that counts. Winston Churchill (1874 - 1965)
  • If you are going through hell, keep going. Winston Churchill (1874 - 1965)
  • A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty. Winston Churchill (1874 - 1965)
  • To improve is to change; to be perfect is to change often. Winston Churchill (1874 - 1965)
  • We make a living by what we get, but we make a life by what we give. Winston Churchill (1874 - 1965)
  • Criticism may not be agreeable, but it is necessary. It fulfils the same function as pain in the human body. It calls attention to an unhealthy state of things. Winston Churchill (1874 - 1965)

Setup

To get QuoteSlider working in your website (using quotes you directly add to the page), follow these instructions:
  1. Once installed, drag and drop a QuoteSlider stack into your Stacks page.
  2. Double-click the HTML code placeholder to edit the existing quotes and replace them with your own (the markup is detailed below)
  3. Change any of the settings you want, in the QuoteSlider stack settings on the righthand side. Many aspects of QuoteSlider can be customised quickly in here.
  4. Preview your page. If you're happy with he output, publish it.

Markup

The HTML markup used for QuoteSlider is ridiculously simple; even if you've never used HTML code before! You just have to enter each of your quotes on a single line like this:

Very fast delivery, excellent customer service. Would definitely recommend. 5 stars.

At that start of the quote, enter an opening <li> list item tag like this:

<li>Very fast delivery, excellent customer service. Would definitely recommend. 5 stars.

To define the end of the quote, you enter a closing </li> list item tag like this:

<li>Very fast delivery, excellent customer service. Would definitely recommend. 5 stars.</li>

At this point, your quote will display in the slider. Repeat the same for each quote you want to display. Of course the immediate advantage of this setup is that you can so-easily come back at any time to change the order of your quotes, take old quotes out or put new ones back in. And you've got decent markup, which search engines can see when indexing your website.

Citations

If you want to display the source (citation) of a quote, HTML <cite> tags are absolutely perfect for this task. Cite tags ensure that your quotes are correctly marked-up; ensuring the best possible SEO and professional presentation to your readers. Citations go between opening and closing <cite> tags like this:

<cite>John Smith, Birmingham</cite>

Building on our example HTML markup above, citations can be easily inserted into our existing quote markup:

<li>Very fast delivery, excellent customer service. Would definitely recommend. 5 stars. <cite>John Smith, Birmingham</cite></li>

An extra bonus of using proper citation tags is that your citation will automatically be prepended with a trailing hyphen ( - ) which a lot of professional writers use. Your citation can also be coloured differently to the rest of the quote.

There may be times when you don't want to display these trailing hyphens. Likewise if you're an educator or student following a strict referencing protocol (like the Harvard, APA or OSCOLA referencing system); hyphens may not be appropriate. In these instances you can turn off trailing hyphens by unselecting the Hyphen-Prepend Citations option; which can be located in the stack settings for QuoteSlider.

Other markup

You may wish to experiment with other basic types of HTML markup. QuoteSlider can support various HTML tags; including headings, anchors (links), images, HTML entities (special encoded characters), bold text, underlined text and simple inline CSS.

Controls and behaviour

By default, QuoteSlider will advance each quote automatically, every 10,000 milliseconds (10 seconds). It's perfectly feasible to switch-over to manual mode instead; using setting provided in QuoteSlider. Manual mode would certainly be desired in instances where you have quotes of different lengths or quotes which are quite long and require more reading time. Visitors to your website can manually advance the slider backwards or forwards using pagination bullets or next / previous button arrows. Additionally users of newer touch-based devices (like Android / iOS tablet and smartphone users) also have the ability to 'swipe' through the slider with simple horizontal finger gestures.

Sourcing quotes from a warehouse or making them editable with a CMS

For warehousing, this will require your page hosting QuoteSlider to be published with a .php file extension, instead of the normal .html extension. By setting the Quote Source in the stack settings to warehouse; you can pull-in a plain text or HTML file from any public location, comprising of your quotes. Quotes should be presented in an identical format to those documented above and those which you would ordinarily add directly into the Stacks page. A key advantage of warehoused quotes is that you maintain a list of quotes outside of RapidWeaver, and remove the need to continually republish your website for each change. Warehousing is especially useful if you have clients who want to maintain their own quote lists.

As an extension to warehouse support, QuoteSlider also enables you to 'hook' some CMSs (content management systems) onto your QuoteSlider and make the list of quotes editable. This will work for a limited number of CMSs like Cushy; which permit editing of HTML code.

Print / PDF support

QuoteSlider stacks are automatically hidden in most web browsers, if your webpage is printed or saved as a PDF. Consider using the free UsefulStack to display supplementary content (like quotes) if you want your users to be able to print or save them as a PDF.