Are you searching for a way to add a Number Widget to your Elementor website? But don’t know which widget to use and how to use? Don’t worry! Your problem is solved.
This article will teach you everything you need to know for using the Number widget in Elementor.
What is a Number widget?
The Number Widget in Elementor is a design element that Displays a Numerical Value, usually used for Counting, Statistics, or Progress. It can be customized with various styling options and can animate the numbers as they count up to the final value.
What is the importance of the Number widget?
The Number Widget in Elementor is important because it provides a visual and dynamic way to display numerical values on a website, such as statistics, counters, or progress. Using this widget can help to make the website more engaging and appealing to visitors, while also conveying important information. Some potential uses of the Number Widget include:
- Displaying the number of products sold, customers served, or awards won.
- Presenting the progress of a project or goal, such as the amount raised for a charity.
- Highlighting key statistics or data related to the business, such as the number of employees, locations, or years of experience.
The ability to customize the appearance and animation of the numbers helps to make the information stand out and catch the attention of visitors, making the Number Widget a valuable tool for improving the design and functionality of a website.
So if you are looking for a way to add Number to your Elementor website, then you should consider using the Number widget of Sky Addons.
This widget allows you to easily add numbers, counts, and other numerical values to any page or post on your Elementor website. With this widget, you can quickly and easily create different numerical displays that can help bring more attention or emphasis to certain areas of your content. Plus, with its custom styling options, you can make sure that the number looks just right on your page. So why not give it a try today?
First, we are showing you a short summary of using the Number Widget provided by Sky Addons.
To use the Sky Addons Number Widget in Elementor, follow these steps:
- Install and activate the Sky Addons plugin on your WordPress website.
- In the Elementor editor, click the “Add Widget” button and search for “Sky Addons Number” in the widgets panel.
- Drag and drop the widget onto your page.
- In the widget settings, you can configure the number value, animation settings, and styling options such as font size, color, and alignment.
- Preview the changes in real-time and publish the page when you are satisfied with the results.
Now let’s jump into learning the detailed process of using the Number widget.
Step1
Firstly go to your Elementor Editor and find the Number Widget of Sky Addons and then simply drag and drop it into the selected section.
Now click on the Content tab. Under the Content tab, you will find a section named Number.
Here in the Number section, you can select the number you want to display. If you want to use Number animation on your website then enable the Number Animation option. You can adjust the Animation Duration from here according to your preference.
Animation Duration refers to the amount of time it takes for a specific animation to complete.
This is typically measured in seconds and can be adjusted to control the speed of the animation. Animation duration can be used to add visual effects to a website, such as smooth transitions between pages or elements, or to bring attention to important elements on the page.
The animation duration can have a significant impact on the user experience, so it’s important to choose an appropriate duration that enhances the overall design of the website.
Step2
Now we move to the Style tab. Under the Style tab, you will find Number and Text sections.
Firstly in the Number section, you will be able to style the Number according to your choice.
Here you can enable the Overflow Hidden option.
The “overflow: hidden” option is a CSS property used to specify how content that is too large to fit within the bounds of the widget should be handled.
When the value is set to “hidden”, any content that exceeds the boundaries of the widget will be hidden and not displayed on the screen. This can be useful for preventing unwanted scrolling or for creating a specific visual design where only a portion of the content is visible. The “overflow” property can be set to other values, such as “scroll” or “auto”, which determine how the content should be displayed when it exceeds the widget bounds.
You may change the Alignment of the Number. Change its Size, select the Border Type, etc.
You will also find an option named Advanced Border Radius. You can enable it for a better design without writing any custom CSS.
Advanced Border Radius refers to the option to set the radius of the corners of a rectangular element. The border-radius property in CSS allows you to control the rounding of the corners of a rectangle, giving it a rounded or circular appearance.
Advanced Border Radius typically refers to the ability to set different radii for each of the four corners of the rectangle, allowing for more complex and customized shapes. This can be useful for creating visually appealing designs, as well as for creating elements with a specific shape that fits the overall design of a website or application.
You will find lots more cool options to customize the Number. Check those out!
The Last section is the Text section. Here you can change the Text Color, Typography, etc.
So, finally, we have come to the end of this tutorial. We hope that you have understood the whole process of using the Number widget of Sky Addons in Elementor. If you have any questions or queries feel free to contact our website – https://wowdevs.com/support/
And don’t forget to visit our demo website – https://demo.skyaddons.com/elementor-number-widget/