The “Counter Widget” helps you to present your websites statistics in an interactive counter. A lot of customization options are available to create exactly the look you want for your Elementor page.
Let’s look at each of the options in the “Counter Widget” below.
Install Counter Widget for Elementor #
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Counter”
- Hover over the widget in the search results and click install
- Add your “Counter” widget to any Elementor Page
General Settings #
Title
Type text to show as title.
Number
Type number to show in counter widget.
Before Number
Type text to show before number.
After Number
Type text to show after number.
Layout
Select the layout of counter.
- Column
- Column Reverse
- Row
- Row Reverse
Hover Animation
Set the hover animation for counter widget.
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
- Wobble Horizontal
- Wobble Top
- Wobble Bottom
- Wobble Skew
- Buzz
- Buzz Out
Type
Select the type of element to show in counter.
- Icon
- Image
Icon
Choose an icon to display.
Layout Settings #
Show Icon
Show/Hide the icon.
Show Title
Show/Hide the title.
Show Divider
Show/hide the divider.
Animation Settings #
Duration
Set the duration of animation.
Skip Count
Set the skip count value to count the number.
Viewport Offset
Set the viewport offset in percentage.
Counter Widget Styling #
A variety of styling options are provided to control every aspect of the widget’s appearance. Select the colors that match the theme of your site. Make the widget look exactly how you want it to, by customizing the text, buttons, fonts, and layout.
Box Styling #
Style the box alignment, background, padding, border, and max width.
Icon Styling #
In this section, style the icon width, height, color, background, border, icon size, margin, spacing, and vertical positioning.
Hover Styling #
Set the box border hover type, background hover, icon color hover, and icon background hover.
Image Styling #
Set the image width, height, image fit, image spacing, radius, and border.
Number Styling #
Set the number typography, color, and spacing.
Divider Styling #
You can set the divider width, height, margin, and background.
Title Styling #
You can set the title color, typography, and spacing.
Usage Examples #
Here are some live use cases for the Counter Widget.
