1. Home
  2. Docs
  3. Creative Elements
  4. Counter

Counter SA Element

The counter is a great way of displaying varying types of data and content to your viewers. The Counter element includes several options for easy customization, and they are a great way to display content and attract the viewers’ eyes as they animate into the screen viewport. The Counter element allows you to show some statistic data with animation.  Here in this tutorial, you’re going to explore all about the Counter and see how to work with this incredibly important element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Counter Element

»Content

 

Counter

⇒Icon Type: Set the icon type you want to use as the counter icon. You can choose from the image and icon. Select none if you want nothing at all.

⇒Icon: Add the icon you want from here.

⇒Image: Upload an image if you set the icon type as an image.

⇒Number: Enter your Counter end number.

⇒Number Prefix: Add the number prefix which will be added before the counter number.

⇒Number Suffix: Add the number suffix which will be added after the counter number.

⇒Title: Add a title to your counter.

⇒Title HTML Tag: Define the HTML tag for the counter title here. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size. You can also use div, span and p tag.

⇒Layout: Set the layout type of the counter style.

 

Divider

⇒Icon Divider: Would you like to have an icon divider to divide the icon from the rest content? Enable this option.

⇒Number Divider: And if you want to have a number divider to divide the number from the content, then enable this option.

 

Settings

⇒Counting Speed: Manually set the counting speed for different dimensions.

 


»Style

 

Counter

⇒Alignment: Set the counter alignment either left, center, right or justified.

 

Icon

⇒Background Type: Set the background type either Classic or Gradient for the counter icon. And then customize the style according to your preference.

⇒Color: Add a custom color to the counter icon.

⇒Size: Customize the counter icon size manually for different dimensions.

⇒Rotation: Customize the icon rotation inside of the box.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the icon border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the icon for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the icon for different dimensions. You can link the values together or customize them individually.

 

Icon Divider

⇒Divider Type: Select a divider type from the list according to your preference.

⇒Height: Set the divider height manually for different dimensions.

⇒Width: Set the divider width manually for different dimensions.

⇒Color: Add a custom color to the icon divider.

⇒Spacing: Generate some space between the divider and contents for different dimensions.

 

Number

⇒Number Color: CAdd a custom color to the counter number.

⇒Typography: Set the typography options for the counter number text.

⇒Margin: Set the margin value for the top, right, bottom and left around the counter number for different dimensions. You can link the values together or customize them individually.

 

Prefix

⇒Color: Add a custom color to the prefix text.

⇒Typography: Set the typography options for the prefix text.

Suffix

⇒Color: Add a custom color to the suffix text.

⇒Typography: Set the typography options for the suffix text.

 

Title

⇒Title Color: Add a custom color to the counter title text.

⇒Background Color: Customize the background color of the title.

⇒Typography: Set the typography options for the title text.

⇒Margin: Set the margin value for the top, right, bottom and left around the counter title for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the title text for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Counter Element.


Was this article helpful to you? Yes No

How can we help?