Counter Widget Tutorial

Intro

Premium Counter Widget for Elementor Page Builder will allow you to show facts and figures. This widget has more customization options than the Elementor Page Builder’s Counter Widget. The counter is animated and starts counting when the element is in the view area.

Click here to check Premium Counter Widget demo.

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: Select the counter speed and how long it should take the counter to reach the end number.
Premium Counter Widget Main Settings

2. Display Options

  • Icon Type: Select or upload a custom image via the Media Library, or select from a list of Font Awesome Icons.
  • Icon Position: Select between Top (above the counter), right, or left.

Animations: The animations are applied to the image or icon. 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
Counter Widget Display Options

Style

  • Icon
  • Title
  • Value
  • Prefix & Suffix

1. Icon

  • Color: Select the icon color. This option is not available if a custom image was selected.
  • Size: Adjust the icon size. Select a number between 10 and 200.
  • 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.
Icon Styling Options

2. Title

  • Color: Select a color for the title text.
  • Typography: Adjust font settings.
  • Text Shadow: Add a shadow to the title. Adjust the shadow using the following controls:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
Counter’s Title Customization Options

3. Value

  • Color: Select a color for the counter value.
  • Typography: Adjust font settings.
Counter’s Value Customization Settings

4. Prefix & Suffix

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

Prefix and Suffix Customization Options