You can create an awesome Number Box for free in WordPress Elementor websites with the help of the “Number Box Widget“. Its very easy to create fresh-looking designs with the help of number box widget. Predefined clipping masks can be used to achieve unique shapes. Match the colors to your site’s theme and customize the layout for the best user experience with lots of styling options.
Let’s look at each of the options in the “Number Box Widget” below.
Elementor Number Box Tutorial Video
Add a Free Number Box 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 “Number Box”
- Hover over the widget in the search results and click install
- Add your “Number Box” widget to any Elementor Page
General Settings for Elementor Number Box
Layout
Select the layout you want to display.
- Row
- Column
Alignment
Select alignment of the box from the given options.
- Left
- Center
- Right
Text
Type the text you want to display.
Linkable
Turn on/off the link option.
Link
Put any custom or dynamic link.
Show Title
Show/Hide the title text.
Title
Type custom text for the title.
Show Description
Show/Hide the description text.
Description
Type any text for description.
Widget Styling for Elementor Number Box
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Number Styling for Elementor Number Box
Set the spacing, size, typography, background color, and border of the circle. You can also style the hover animation, shadow and shape of the circle in this section.
Hover animations available:
- 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 To Bottom Right
- Wobble To Top Right
- Wobble Top
- Wobble Bottom
- Wobble Skew
- Buzz
- Buzz Out
If the shape type selected is radius you can edit the border radius, shadow and border type.
If the shape type selected is clip-path you can select different clip-path shapes:
- None
- Triangle
- Trapezoid
- Parallelogram
- Rhombus
- Pentagon
- Hexagon
- Heptagon
- Octagon
- Nonagon
- Decagon
- Bevel
- Rabbet
- Left Arrow
- Right Arrow
- Left Point
- Right Point
- Left Chevron
- Right Chevron
Pulse Effect Styling for Elementor Number Box
Set the pulse effect on or off, and style the color of pulse effect.
Box Styling for Elementor Number Box
In this section, you can set the background color, border, padding and box shadow.
Title Styling for Elementor Number Box
Style the color, typography, and spacing of the title.
Description Styling for Elementor Number Box
Style the color, typography, and spacing of the description.
Usage Examples for Elementor Number Box
Here are some live use cases for the Number Box widget.
Free Number Box for Elementor with Background Images
Free Number Box for Elementor with Animated Effects
Free Number Box for Elementor with Hover Effects
Free Number Box for Elementor with Custom Shapes
Thank you for exploring the Number Box Widget for Elementor! With its sleek design and customizable features, this is the best Number Box Widget for Elementor, making it easy to highlight key statistics and information. We hope it adds value to your designs. If you have any questions or need assistance, feel free to reach out.
