Number

How to use Number Widget of Sky Addons for Elementor

The Number widget allows you to present numbers in a dynamic and visually engaging way. Whether you’re showcasing statistics, pricing, counters, or any numeric value, this widget brings motion and design together. With number animation, background rotation, and advanced styling options, it gives you the creative freedom to match your site’s aesthetic while drawing attention to key data points. Perfect for dashboards, landing pages, and service highlights.

Features:

1. Animate numbers for counters, pricing, or stats.
2. Customize animation duration and styles.
3. Unique shape and rotation effects for creative displays.
4. Responsive alignment and advanced color options.
5. Background shape styling using custom border-radius.
6. Stylish number and text customization.
7. Lightweight and smooth performance.

Insert Number Widget

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

Layout Section

1. Number – Enter any numeric value you want to display.
2. Number Animation? – Toggle to animate the number on page load.
3. Animation Duration – Set the time (in ms) for the animation to complete.

Style Customization

Customize the number and text styles to match your site’s look and feel.

Number Section

1. Overflow Hidden – Hide overflow elements for clean shapes.
2. Alignment – Set the alignment (left, center, right) for the number.
3. Size – Control the font size of the number.
4. Border – Add and style borders around the number container.
5. Background – Set a solid or gradient background color.
6. Color – Define the number’s font color.
7. Advanced Border Radius – Create unique shapes using custom border-radius like 30% 70% 70% 30% / 30% 30% 70% 70%.
8. Box Shadow – Apply shadow effects for depth and styling.
9. Background Rotate – Rotate the number background container for creative effect.

Text Section

1. Text Color – Set the color for the label or accompanying text.
2. Typography – Fully control the font family, weight, size, and spacing.
3. Text Shadow – Add shadow to enhance readability or style.
4. Text Rotate – Rotate the text at different angles for dynamic layouts.

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

1. Animation not working: Ensure the toggle is enabled and the number is numeric only.
2. Text or number overlaps: Check padding, size, and border-radius settings.
3. Number not displaying: Double-check the input field and make sure the font is not set to 0.

Conclusion

The Number widget is a sleek, animated way to showcase numerical data with design flexibility. Whether for business metrics or pricing tables, it enhances both functionality and aesthetics on your Elementor site.