warningPlease be careful! If you delete this page, consider that it could be used within an other language version.

Introduction to the Animated Counter Element

How to use the new element to showcase numbers in an engaging way - for Landing and Promotion pages!

1.11.2022

We have just launched an exciting new element - the Counter Element, which is an animated element.

It is a great way to showcase FOUR PAWS successes in a visual way. It can also be used to highlight how many animals still need our help, and other important statistics.

For context, please look at this example so you understand exactly what the Counter Element is. 

How to add the Counter Element to your page: 

  1. Make sure you are using the correct page type. 
    The Counter Element works on the following page types: Promotion pages, Landing pages. (We do not want to overuse it. We may explore adding it to other page types, but it is really meant to be used sparingly and purposely.)
  2. Please note: You can use the Counter to count up from zero, and, to start from a high number, and go down. These instructions will follow.
  3. Go to your Content Tree and clicking on the +, scroll and find 'Counter'
  4. Then, add it, and using the --> add an 'item' inside the Counter. Follow the next instructions with images:

Add the counter block, then a Counter - Icon inside of it. 

To edit each 'Counter Item' click on the item individually. Then, in the inspector add the Start Value and the End Value. It has to be a whole number. You can add a 'Suffix' which could be a %, or $ for example. You add the text for each Counter Item directly in the Content Canvas, and add a link to the text as well. You can also make it 'count down', by checking the Count Down box, if your stat starts at a higher number and ends on a lower one (or zero).

After clicking on the whole 'Counter Block', you can also choose the counting speed. Experiment with them to decide which looks the best. 

Please only add this element with a minimum of 3, and a maximum of 5 icons. 3 will look the most balanced and least busy. 

Here are some examples of where it could be used. It could also replace a static Infographic element, shown at the bottom of the page:

Wool with a butt

  • How many brands have joined the Brands Against Mulesing list
  • But how many lambs still endure mulesing every day/year/ etc.
  • How many farmers have stated they want to go mulesing-free?

 

WiK

  • How many animals are killed each year for fashion
  • How many people signed the Wear it Kind pledge

Saddest Bears:

  • 150 in our care
  • How many Bile bears are there to rescue
    • OR - with the counting down method --> How many bile bears there were, how many still need to be rescued?
  • Bears for Entertainment / Circus

 

DCMT:

  • Number of stray dogs/cats rescued /adopted etc
  • Number of restaurants closed down?
  • Number of residents who want to stop DCMT

 

FUR:

  • How many Fur factories have we helped shut down?
  • How many still exist? (could be used with the count-down method)
  • How many countries/member states are on board?
  • How many countries are already 'fur-free?'

 

Big cats:

  • How many big cats have we rescued?
  • How many are estimated to still live in private captivity or unideal living conditions

Stray Animals:

  • How many stray animals has FP neutered/given veterinary care
  • How many stray animals do we expect need our help?
  • How many countries/regions do we conduct SAC in?

Do you have any ideas? Please add them here, in this text box! :)

Infographic

The counter element could sometimes replace a static infographic. The 'prefix' in the inspector is where you can add the words/symbols like 'About, ca. , <' and so on, to make the sentences make sense.

Search