Counters shortcode

Displays a counters element to your web page. You can customize your counter
by changing it's speed, rotation direction, color, or size.

Examples of the counters shortcode usage

We tried to cover all the basic and
advanced uses for the counters shortcode

A couple of examples of counter styles, sizes, and roll effects


Working Hours

Donuts Consumed

Projects Finished

Clients Met

Business cards given

An example of features elements coupled with color background.

Cups of Coffee Drank

Proin id est id dui scelerisque imperdiet. Phasellus vitae iaculis elit. Suspendisse euismod, enim nec convallis suscipit, massa nibh vestibulum sem.

Cupcakes Eaten

Duis ac sagittis nisi, elementum dapibus urna. Suspendisse quis ante elementum, convallis felis vel, iaculis nibh.

Franch Fries Breakfasts

Ut viverra venenatis rutrum. Nam posuere a nisi eget lacinia. Integer erat neque, volutpat vel lacinia sit amet, egestas eget quam.

Penumbra Brood

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Basic settings for counter shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Start number

This option sets the starting number, which the element counts from.


Sets the direction of the counting. You can choose upward, downward, or auto. Auto direction lets the element count to the nearest number.

Number size

Sets the size of the counter element.

End number

This option sets the end number, which the element counts to.

Counter color

You can define a custom color of the counter using the color picker, or set the hex code manually.

Item alignment

Sets the alignment of the counter - left, right, or center.

Advanced settings for counter shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode


You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group