Advanced Counter

How to use Advanced Counter Widget of Sky Addons for Elementor

The Advanced Counter Widget from Sky Addons for Elementor allows you to create visually appealing counters that can showcase statistics, metrics, or milestones on your website. This widget is perfect for highlighting achievements, numerical data, or any information that benefits from an animated counting effect. With various customizations options, the Advanced Counter Widget helps enhance user engagement and provides a clean, professional look to your website.

Features:

1. Animated Counting: The widget provides an engaging animation that counts up from zero to the specified number.
2. Multiple Counter Styles: Choose from various styles to match your website design, including number font style, color, and size.
3. Custom Icons: Add icons alongside numbers to visually represent the data.
4. Responsive Design: Automatically adjusts to different screen sizes for optimal viewing on desktops, tablets, and mobiles.
5. Customizable Duration and Delay: Control the speed of the counting animation with customizable duration and delay settings.
6. Dependencies: Requires Elementor installed and activated, along with the Sky Addons plugin for Elementor.
7. Smart easing: CountUp intelligently defers easing until it gets close enough to the end value for easing to be visually noticeable.

Insert Advanced Counter Widget

1. Open Elementor Editor. In the Elementor panel, search for “Advanced Counter” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Content Layout

1. Media Type: Choose the media type that will accompany the counter, selecting either an Icon or an Image to visually enhance the counter.
2. Title: Add a heading or title to your counter, giving it context and making it more informative.
3. Title Tag: Specify the HTML tag (e.g., H1, H2, etc.) for the counter title to ensure proper SEO and structure.
4. Counter Start Value: Define the starting number for the counter animation.
5. Counter End Value: Set the final number that the counter will reach as it animates.

Configure Counter Settings

1. Decimal Places: Adjust the number of decimal places you want to show for the counter value, giving you flexibility over precision.
2. Decimal Symbols: Choose the symbol (e.g., period or comma) that will represent decimals.
3. Duration: Control the animation speed by setting how long it will take for the counter to reach its end value.
4. Use Easing: Apply easing effects to make the counter animation smoother and more fluid.
5. Use Grouping: Enable number grouping (e.g., separating thousands with commas) for a cleaner display.
6. Grouping Separator: Select the separator used to group the numbers (e.g., comma, space).
7. Prefix: Add a prefix before the counter value, such as “$” for currency or “kg” for weight.
8. Suffix: Attach a suffix after the counter value to provide more context, like “%” or “years.”
9. Custom Language: Customize the language used for number formatting to match the local preferences of your audience.

Style Your Advanced Counter

Styling the Advanced Counter widget gives you full control over its appearance, enabling you to match the counter design to your site’s theme and branding. Here’s a breakdown of the styling options available:

Advanced Counter Section

1. Alignment: Adjust the alignment of the counter to fit seamlessly within your layout. Whether you want it centered, left, or right, you can position it as needed.
2. Content Padding: Control the padding around the counter content to create the right amount of space, ensuring a clean and balanced design.

Image/Icon

1. Icon Size: Customize the size of the icon or image associated with the counter for perfect proportions.
2. Spacing: Adjust the spacing between the icon/image and the counter for optimal alignment and visual appeal.
3. Height: Define the height of the icon/image to maintain uniformity with the surrounding elements.
4. Offset: Apply an offset to position the icon/image more precisely in relation to the counter or text.
5. Padding: Set the internal padding for the icon/image to create a well-defined space around it.
6. Border: Add borders around the icon/image to give it a structured and distinct look.
7. Color: Choose a color for the icon/image to complement your site’s design.
8. Background: Set a background color or image behind the icon/image for an added layer of design.
9. Opacity: Adjust the opacity of the icon/image for a more subtle or pronounced effect.
10. Normal and Hover Modes: Customize how the icon/image behaves both in its normal state and when hovered over, adding interactivity and dynamism to the counter.

Number Section

1. Spacing: Control the spacing between digits for a clean, readable display.
2. Typography: Set the font style, weight, and size for the number to match your desired look and feel.
3. Color: Choose the color of the number to make it stand out or blend seamlessly with your design.

Title Section

1. Typography: Customize the title’s font, size, weight, and style to create a unique look for the counter’s heading.
2. Color: Select the color of the title to ensure it’s clearly visible and matches the overall design.
3. Text-shadow: Add a shadow effect to the title for depth and emphasis.
4. Normal and Hover Modes: Apply distinct styles for the title in both its normal state and when hovered, adding interactivity and enhancing the overall user experience.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

• Counter Not Animating: Ensure that JavaScript is enabled in the browser and that there are no conflicting plugins that may interfere with the functionality.
• Styling Issues: If your custom styling is not appearing, check for any caching issues, and try clearing your browser’s cache or any caching plugin on your site.
• Unresponsive Design: Verify that you are using Elementor’s responsive settings to ensure proper layout adjustments on different devices.

Conclusion

By utilizing the Advanced Counter Widget from Sky Addons for Elementor, you can effectively showcase important statistics and create dynamic content that captivates your audience. For any further assistance, consider reaching out to the Sky Addons support team or community forums. Enjoy creating stunning counter displays!