The Counter widget in the Topper Pack plugin allows you to showcase animated statistical data with style and clarity. Follow the steps below to customize and use the Counter widget effectively.
🚀 How to Enable the Counter Widget
To start using the Image Widget, follow these steps:
Navigate to your WordPress dashboard.
Go to Topper Pack → Widgets.
Locate the Counter widget from the list.
Toggle the switch to “On” to enable it.
The widget is now available in the Elementor editor.
🔹 Step 1: Add the Counter Widget
Navigate to your Elementor editor.
Search for “Counter” in the widgets panel.
Drag the TP Counter widget (with the TP badge) into your section.
🔹 Step 2: Select Counter Style
Under the Content tab, go to Service Styles.
Choose your preferred design from multiple prebuilt styles (e.g., minimal, boxed, circle, modern styles).
This determines the layout and look of the counter box.
🔹 Step 3: Configure Counter Settings
➤ Icon
Toggle Enable Icon to “Show” if you want to use an icon or image.
Upload your desired icon/image using the media selector.
➤ Number Display
Show Number: Toggle ON to enable the counter animation.
Number: Enter the numeric value you want to animate (e.g., 15, 4800, 100000).
Symbol: Add a suffix such as %, K, +, etc., to clarify the value (e.g., 15K+).
➤ Title
Add a short title/label (e.g., “Projects Completed”, “Active Users”, “Clients Served”) below the number.
➤ Counter Speed
Set the animation speed in milliseconds (e.g., 1000 for 1 second).
🔹 Step 4: Style the Counter Box
Navigate to the Style tab to customize the design:
🧱 Box Style
Direction: Set layout direction (None, Column, Row, etc.).
Text Alignment: Align content (Left, Center, Right).
Gap: Set spacing between elements.
Background Type: Choose solid, gradient, or image backgrounds.
Border Type & Radius: Add rounded corners and borders.
Box Shadow: Apply a shadow for depth.
Padding & Margin: Adjust spacing inside and around the counter box.
🎨 Icon Style
Customize icon size, color, spacing, and hover effects.
đź“ť Title Style
Adjust font, color, spacing, and alignment for the title label.
🔢 Number Style
Style the animated number: font size, weight, color, and typography.
Counter
The Counter widget in the Topper Pack plugin allows you to showcase animated statistical data with style and clarity. Follow the steps below to customize and use the Counter widget effectively.
🚀 How to Enable the Counter Widget
To start using the Image Widget, follow these steps:
🔹 Step 1: Add the Counter Widget
🔹 Step 2: Select Counter Style
🔹 Step 3: Configure Counter Settings
➤ Icon
➤ Number Display
%,K,+, etc., to clarify the value (e.g., 15K+).➤ Title
➤ Counter Speed
1000for 1 second).🔹 Step 4: Style the Counter Box
Navigate to the Style tab to customize the design:
🧱 Box Style
🎨 Icon Style
đź“ť Title Style
🔢 Number Style