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
IconAdds an icon above the Counter element.
Starting NumberAdds the starting number.
Ending NumberSets the milestone number.
Number PrefixAdds the text that goes before the number.
Number SuffixAdds the text that goes after the number.
TitleThe title that shows below each counter.

Settings

SettingDescription
ColumnsSets the Counter element columns. (Responsive options available, means that you can set different columns in mobile and desktops)
Thousand SeparatorAdds a ‘,‘ sign to numbers larger than 1000.
Animation DurationSets 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
AlignmentSets the counter items alignment.

Icon

SettingDescription
Color TypeSets a solid color or a gradient color for icon.
SizeSets the icon size of the Counter element.
PaddingSets the paddings just for the icon.

Number

SettingDescription
Color TypeSets a solid color or a gradient color for the numbers.
TypographySet the Number’s typography like font size, letter spacing and so on.
PaddingSets the paddings just for the numbers.

Title

SettingDescription
Color TypeSets a solid color or a gradient color for the counter titles.
TypographySets the title’s typography like font size, letter spacing and so on.
PaddingSets 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