Counters

Numbers that count up as they come into view

Numbers say in a glance what a paragraph takes a while to explain: twelve years in business, four thousand customers, ninety eight percent on time. This widget lays out as many of them as you like and counts each one up from zero the moment a visitor scrolls far enough to see it, which is what makes people stop and read them.

Set it up

1. Make a counter widget. Sign in at dreamwidget.com/dashboard, press Counter and give it a name for your own list.
2. Add your first number. The editor opens on the Content tab. Press Add Number, put the figure in The number it counts to and write what it means in Label under it.
3. Add the rest. Three or four numbers is the usual choice. They read as a set, and a set of eight stops being a headline and starts being a table.
4. Choose a row or a grid. On the Design tab, Arrangement offers A row or A grid, and a grid has Columns in the grid to say how many fit across.
5. Press Save and Publish. Then copy the embed code from the Settings tab and paste it on your page, where our embedding guide shows.

Writing a number

Each number has six fields of its own on the Content tab.

• The number it counts to is the figure a visitor ends up reading.
• The number it starts from is 0 unless you say otherwise. Put a higher figure here than the target and it counts down instead, which suits something like a waiting list shrinking.
• Label under it is what the figure means, for example "customers served".
• Before the number, like $ puts a symbol in front, so a figure reads as money.
• After the number, like % or + puts one behind, so 4000 can read as "4,000+".
• Link when the number is clicked (optional) makes that one number a link, for a figure you can back up with a page of proof.

The counting itself

Count up when it scrolls into view is what makes the numbers climb rather than simply appear. They wait until the widget is actually on the visitor's screen, so somebody arriving at the top of a long page still sees the count when they reach it.

Count for, seconds is how long the climb takes. Between one and two seconds reads best. Much longer and a visitor has moved on before the number settles.

Switch the counting off and the figures simply show. That is the right choice for a visitor who has asked their system for less motion, and it happens for them automatically.

Separators and decimals

Thousands separators turns 4000 into something easier to read at a glance, and Mark between thousands chooses which mark: a comma for 1,234, a dot for 1.234, a space for 1 234, or none at all.

Decimal mark does the same for the part after the point, a dot for 1.5 or a comma for 1,5. Between them these two cover the way numbers are written in most of the world, so set them to match your customers rather than to match us.

The arrangement and the cells

Align puts the whole set to the left, the center or the right, and Space between numbers opens the set out or tightens it up.

Each number's cell is the box one figure and its label sit in: Cell width, at least, the padding top and bottom and at the sides, the Cell background, the Cell border color and the Cell corner radius. Leave the background and border unset and the numbers sit bare on your page, which usually looks better than boxes.

Numbers and Labels are sections of their own, each with its own font, size, weight, letter spacing, line height and color. The figures are normally several times the size of their labels. Space between the number and its label sets how far below the label sits, and Labels in capitals, letter-spaced gives them the small, spaced look that suits a label under a large figure.

Desktop and Mobile

The editor has two screens, Desktop and Mobile. Every setting on the Design tab is kept once for each, and the buttons above the preview choose which one you are editing. A change lands on the screen you are looking at and nowhere else, unless you tick Edit all screens above the preview. A tablet is drawn from Desktop.

The numbers themselves and their labels are shared by every screen. What usually differs is the arrangement: four numbers in a row across a desktop are better as a grid of two columns on a phone, with a smaller figure size. Set Arrangement and Columns in the grid on the Mobile screen to do that.

Replay above the preview runs the count again from the start, so you can watch it without reloading.

If something goes wrong

The numbers do not count, they just appear. Check Count up when it scrolls into view. It is also switched off automatically for visitors who have asked their system for less motion, and that is deliberate.

A number is cut off. Raise Cell width, at least, or lower the size under Numbers, on the screen where it happens.

The separator is wrong for your country. Mark between thousands and Decimal mark are both on the Design tab and both offer the common alternatives.

Anything else: hello@dreamwidget.com, and tell us the widget's name.