You can create an awesome Number Box for WordPress 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.
Install Number Box Widget 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 #
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.
Number Box Widget Styling #
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 #
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 #
Set the pulse effect on or off, and style the color of pulse effect.
Box Styling #
In this section, you can set the background color, border, padding and box shadow.
Title Styling #
Style the color, typography, and spacing of the title.
Description Styling #
Style the color, typography, and spacing of the description.
Usage Examples #
Here are some live use cases for the Number Box widget.
