Intro
Premium Counter Widget for Elementor Page Builder will allow you to show facts and figures. The counter is animated and starts counting when the element is in the viewport. Also, you can set an icon, custom image or Lottie animation as icon.
Click here to check Premium Counter Widget demo.
Elementor Counter Widget
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Counter
- Display Options
1. Counter
- Title: Give your Counter a title. The title will be visible below the counter.
- Starting Number: Enter a starting number for the counter. The default value is “0”.
- Ending Number: Enter an ending number of the counter. The default value is “500”.
- Thousands Separator: The separator is used to convert the large numbers. For instance, it will convert 125000 into 125,000.
- Digits After Decimal Point Value: Select the number of decimal points to show. If no value is added, the decimal point will not be shown.
- Value Prefix: Add a text that will be shown before the counter.
- Value Suffix: Add a text that will be shown after the counter.
- Rolling Time: how long it should take the counter to reach the end number.
- Alignment: Align the counter to the left, center or right
2. Display Options
- Icon: Enable icon for the counter.
- Icon Type: select from a list of Font Awesome Icons, select or upload a custom image via the Media Library or add a Lottie Animation.
- Icon Position: Select between Top (above the counter), right or left.
- Animations: This is applied on all icon types. You can select from the following entrance animations which will be used when the page is first loaded. You can select an animation to preview it in the editor before applying the changes.
- Fading
- Fade In
- Fade In Down
- Fade In Left
- Fade In Right
- Fade In Up
- Zooming
- Zoom In
- Zoom In Down
- Zoom In Left
- Zoom In Right
- Zoom In Up
- Bouncing
- Bounce In
- Bounce In Down
- Bounce In Left
- Bounce In Right
- Bounce In Up
- Sliding
- Slide In
- Slide In Down
- Slide In Left
- Slide In Right
- Slide In Up
- Rotating
- Rotate In
- Rotate In Down Left
- Rotate In Down Right
- Rotate in Up Left
- Rotate in Up Right
- Attention Seekers
- Bounce
- Flash
- Pulse
- Rubber Band
- Shake
- Head Shake
- Swing
- Tada
- Wobble
- Jello
- Light Speed
- Light Speed In
- Specials
- Roll In
- Fading
- Value Alignment: Align the counter value to the left, center or right.
- Title Alignment: Align the counter title to the left, center or right.
Style
- Icon
- Title
- Value
- Prefix & Suffix
1. Icon
- Color: Select the icon color. This option is not available if icon type is set to custom image.
- Size: Set the icon size in Pixel (px), Em (em), or Percentage (%).
- Style: Select a preset style for the icon or create your own custom style. Choose between:
- Simple “No Background”
- Circle Background
- Square Background
- Custom: When this option is selected, you can also select border type, width, color, and
border radius .
- Background Color: Select a color for the background behind the icon.
- Background Size: Select the size of the background behind the icon.
- Vertical Alignment: Select the icon’s vertical position. The maximum number is 600, which will place the icon outside the container, below the counter.
- Border Type: Set border type for the icon. Choose from the following border types:
- None (Default).
- Solid
- Double
- Dashed
- Groove
- Advanced Border Radius: Apply custom radius values for Elementor counter widget icon. Get the radius value from here. (Select custom from style option)
- Border Radius: Insert border radius values.
- Width: Set border width.
- Color: Choose a color for your border.
- Border Radius: Set Border Radius using pixels (PX), percentage (%), or em (EM). A Higher border-radius means a more circular border.
- Margin: Creates space around the counter icon, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
2. Title
- Color: Select a color for the title text.
- Typography: Adjust font settings.
- Background Color: Select a color for the background behind the title.
- Border Type: Set border type for the title. Choose from the following border types:
- None (Default).
- Solid
- Double
- Dashed
- Groove
- Width: Set border width.
- Color: Choose a color for your border.
- Border Radius: Set Border Radius using pixels (PX), percentage (%), or em (EM). A Higher border-radius means a more circular border.
- Text Shadow: Add a shadow to the title. Adjust the shadow using the following controls:
- Color
- Horizontal Position
- Vertical Position
- Blur
- Margin: Creates space around the counter title, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
- Padding: Creates space around the counter title, inside of any defined margins and/or borders. You can set counter title Padding in Pixel (px), Em (em), or Percentage (%).
3. Value
- Color: Select a color for the counter value.
- Typography: Adjust font settings.
- Background Color: Select a color for the background behind the title.
- Border Type: Set border type for the title. Choose from the following border types:
- None (Default).
- Solid
- Double
- Dashed
- Groove
- Width: Set border width.
- Color: Choose a color for your border.
- Border Radius: Set Border Radius using pixels (PX), percentage (%), or em (EM). A Higher border-radius means a more circular border.
- Margin: Creates space around the counter value, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
- Padding: Creates space around the counter title, inside of any defined margins and/or borders. You can set counter title Padding in Pixel (px), Em (em), or Percentage (%).
4. Prefix & Suffix
Select text colors and typography for the prefix and suffix texts.
