Number

The Number option is a control that adds a numeric input field to your custom widget. It allows users to enter and adjust numerical values, often with controls to set minimums, maximums, and increments.

Why would someone use it in a custom widget? #

You use a Number control anytime your widget’s functionality depends on a numeric value. This is essential for settings like quantities, sizes, ratings, counts, or any parameter where you need precise numerical input instead of plain text.

Where This Option Appears #

• In Widget Builder: You add and configure this control in the Content tab of the Widget Builder interface, just like the Text control.
• In the Elementor Editor: Once saved, it appears as a number input field (often with increment/decrement arrows) within your widget’s settings panel in Elementor. The value entered here can control anything from sizes and counts to interactive logic.

Available Settings #

Based on the provided screenshots, here are the configurable settings for the Number control:

Basic Settings (Content Tab) #

• Label: The name of the control shown in the editor (e.g., “Item Count”, “Font Size”, “Rating”).
• Name: The unique machine-readable ID (like item_count or rating_value) used to create the dynamic shortcode.
• Description: Optional text that appears below the field to provide context or instructions.
• Placeholder: Example number shown in the empty field (e.g., “5”).
• Min (Minimum Value): The smallest number allowed. Prevents users from entering a value lower than this.
• Max (Maximum Value): The largest number allowed. Prevents users from entering a value higher than this.
• Step (Step Increment): Defines the amount the value changes with each click of the input’s arrows. A step of 1 allows whole numbers (1,2,3), while 0.1 allows decimals (1.0, 1.1, 1.2).
• Default Value: The number that pre-populates the field when the widget is first used.

Advanced Settings (Advanced Tab) #

• Show Label: Toggles the control’s label on or off in the editor.
• Label Block (Display Label): Makes the label take the full width of the panel on its own line.
• Responsive Control: Allows setting different numeric values for desktop, tablet, and mobile views.
• Dynamic Support: When enabled, this number can be populated dynamically from WordPress sources (e.g., a custom field containing a post’s view count or a product’s price).
• Frontend Available: When enabled, the numeric value is passed to your widget’s frontend JavaScript for use in calculations or interactive functions.
• Separator: Adds a visual line (None, Top, Bottom, Both) to group this control with others.
• Conditions: Allows you to show or hide this number field based on the value of other controls.
• Control Classes: Lets you add custom CSS classes to the control’s wrapper in the editor panel for custom styling.

Generated Shortcode #

When you add a Number control with the Name item_count, Widget Builder generates the dynamic shortcode: {{item_count}}.

• What it represents: This shortcode is a placeholder for the actual numeric value entered in the Elementor editor.
• Where to use it:
  • HTML Panel: Use it to output the number directly (e.g., <span class="count">{{item_count}}</span> items).
  • CSS Panel: Most commonly used here to apply dynamic numerical values, often via CSS custom properties for sizes, spacing, or other properties (e.g., width: calc({{item_count}} * 10px);).
  • JS Panel: If “Frontend Available” is enabled, access the value in JavaScript for scripts, animations, or calculations.

How to Use It: A Practical Example #

Let’s create a simple “Progress Bar” where users can set the completion percentage.

1. In Widget Builder’s Content tab, add a Number control.
2. Set the Label to Progress Percentage and the Name will auto-fill as progress_percentage.
3. Set Min to 0, Max to 100, and Step to 1.
4. Set a Default Value: 75.
5. In your HTML panel, create a container: <div class="progress-bar"><div class="progress-fill"></div></div>.
6. In your CSS panel, style .progress-fill with a dynamic width: width: {{progress_percentage}}%;.

Now, in Elementor, users can drag in your widget and adjust the “Progress Percentage” number from 0 to 100, and the bar’s width will update visually.

Common Use Cases #

• Sizing & Spacing: Control dynamic widths, heights, margins, or paddings (e.g., custom spacer height, icon size).
• Counters & Stats: Set initial values for animated number counters, ratings, or item counts.
• Slider & Carousel Settings: Control the number of slides to show, scroll speed, or auto-play delay.
• Dynamic Calculations: Use as a parameter in formulas for pricing tables, estimators, or interactive tools.

Helpful Tips #

• Use Min/Max for Safety: Always set sensible minimum and maximum values to prevent users from breaking the layout with implausible numbers (like a -100 margin).
• Smart Step Values: For pixel-based sizes, a step of 1 is fine. For opacity or scaling, use a step of 0.1 for finer control.
• Combine with CSS Calc(): For powerful dynamic layouts, use the shortcode inside the CSS calc() function (e.g., flex-basis: calc({{column_width}}% - 20px);).
• Enable Frontend for Interactivity: If your widget’s JavaScript needs to react to the number (like a live price calculator), remember to check the Frontend Available and Dynamic Support boxes for full flexibility.

Frequently Asked Questions #