Counter Widget Tutorial

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

Elementor Counter Widget
Elementor Counter Widget

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor
  • 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.
  • Start Number: Enter a starting number for the counter. The default value is “0”.
  • End 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
Premium Counter Widget for Elementor Main Settings
Elementor Counter Widget Settings

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
  • Value Alignment: Align the counter value to the left, center or right.
  • Title Alignment: Align the counter title to the left, center or right.
Premium Counter Widget for Elementor Display Options
Premium Counter Widget for Elementor Display Options

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
    • Design Your Own: 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
  • 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 (%).
Elementor Counter Widget Icon Styling Options
Elementor Counter Widget Icon Styling Options

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 (%).
Premium Counter Widget for Elementor Title Customization Options
Premium Counter Widget for Elementor Title Customization Options

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 (%).
Elementor Counter Value Customization Settings
Elementor Counter Widget Value Customization Settings

4. Prefix & Suffix

Select text colors and typography for the prefix and suffix texts.

Prefix and Suffix Customization Options for Elementor Counter Widget
Prefix and Suffix Customization Options for Elementor Counter Widget

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.