Counter Element

Last Updated on

The Counter element allows you to show some statistic data with animation. There are a lot of settings you can use to style and configure the element to your needs.

 

Common Uses:

  • Show customer count
  • Show the project completed
  • Happy Clients
  • Total Number of team
  • Downloads count
  • Members count
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Counter, you need to look for it in the Elementor knowledgebase.

In this article


Displaying a counter element

To add a Counter element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Counter”.

4
Drag and drop the counter element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

You can add your counter items in this section by clicking on “ADD ITEM” button. After adding the item you will see the below properties:

SettingDescription
Icon Adds an icon above the Counter element.
Starting Number Adds the starting number.
Ending Number Sets the milestone number.
Number Prefix Adds the text that goes before the number.
Number Suffix Adds the text that goes after the number.
Title The title that shows below each counter.

Settings

SettingDescription
Columns Sets the Counter element columns. (Responsive options available, means that you can set different columns in mobile and desktops)
Thousand Separator Adds a ‘,‘ sign to numbers larger than 1000.
Animation Duration Sets the time that should take from starting number to ending number.

Styles

The Counter element like any other Raven elements has several styling options.

Container

SettingDescription
Alignment Sets the counter items alignment.

Icon

SettingDescription
Color Type Sets a solid color or a gradient color for icon.
Size Sets the icon size of the Counter element.
Padding Sets the paddings just for the icon.

Number

SettingDescription
Color Type Sets a solid color or a gradient color for the numbers.
Typography Set the Number’s typography like font size, letter spacing and so on.
Padding Sets the paddings just for the numbers.

Title

SettingDescription
Color Type Sets a solid color or a gradient color for the counter titles.
Typography Sets the title’s typography like font size, letter spacing and so on.
Padding Sets the paddings just for the titles.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Counter element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket