Dimensions

The Dimensions option adds a sophisticated spacing control to your custom widget, allowing users to set values for multiple sides of an element (Top, Right, Bottom, Left) simultaneously. It is primarily used for CSS properties like margin, padding, and border width.

Why would someone use it in a custom widget? #

Use this control whenever you need to manage the spacing or size around or within an element in a structured way. It provides a professional, unified interface – similar to native Elementor widgets – for setting properties like padding and margin, saving you from creating four separate Number controls.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as the familiar “Dimensions” box with four linked input fields (for Top, Right, Bottom, Left) and a “link” icon to toggle between setting values collectively or individually.

Available Settings #

Here are the configurable settings for the Dimensions control:

Basic Settings #

• Label: The name of the control (e.g., “Padding”, “Margin”, “Border Width”).
• Name: The unique machine-readable ID (like wrapper_padding) for the dynamic shortcode.
• Description: Optional guiding text.
• Allowed Dimensions: Lets you select which sides (Top, Right, Bottom, Left) are available for the user to edit. You can show all four or just specific ones.
• Property Type: An advanced feature. You can leave it as Custom or select a specific CSS property (like margin or padding). This may help the builder automatically apply the values to the correct CSS rule.
• Size Units: A checkbox list to define which CSS units (PX, %, EM, REM, VH, VW) are available for the user to choose from for each value.
• Default Value: Pre-defined values for each of the four sides (Top, Right, Bottom, Left).

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard options. Responsive Control is essential here, allowing different spacing on different devices.
• Dynamic Support: Allows the dimension values to be populated from a dynamic source.
• Frontend Available: When enabled, the dimension values are passed to your widget’s JavaScript.
• Separator, Conditions, Control Classes, Selector: Standard advanced options. The Selector is particularly important here to define which CSS element the dimensions should target.

Generated Shortcode #

When you add a Dimensions control with the Name content_padding, Widget Builder generates a shortcode: {{content_padding}}.

• What it represents: This shortcode outputs a structured set of values, likely in a shorthand CSS format (e.g., 10px 20px 10px 20px) or as an object containing each side’s value and unit.
• Where to use it: Primarily in the CSS Panel, as the value for a spacing-related property.
  • CSS Panel: .widget-content { padding: {{content_padding}}; }
  • The builder’s logic will translate the user’s input (like 10px, 5%, etc. for each side) into a valid CSS string for the property.

How to Use It: A Practical Example #

Let’s create a “Content Box” widget with fully customizable internal padding.

1. In Widget Builder’s Content tab, add a Dimensions control.
2. Set the Label to Box Padding.
3. In Size Units, enable PX and % to give users common choices.
4. In your CSS panel, apply it to the main container:
   
   .custom-content-box {
   padding: {{box_padding}};
   background-color: #f5f5f5;
   }
   
5. In the Elementor editor, users will see a dimension box. They can:
   • Click the “link” icon to set all four sides to the same value (e.g., 20px).
   • Unlink it and set each side independently (e.g., Top: 30px, Right: 20px, Bottom: 30px, Left: 20px).
   • Choose different units for different sides (e.g., Top: 2%, Right: 20px).

Common Use Cases #

• Padding & Margin Management: The most frequent use for controlling internal and external spacing.
• Border Width: Setting the width for all sides of a border.
• Element Positioning: Using in conjunction with position: absolute for top, right, bottom, left values (if the Property Type supports it).
• Responsive Spacing: Creating complex, device-specific layouts by enabling Responsive Control.

Helpful Tips #

• Choose “Allowed Dimensions” Wisely: If your widget only needs vertical (Top/Bottom) padding, you can disable Right and Left for a cleaner interface.
• Link by Default: For most use cases, having the sides linked by default is user-friendly. It lets users set a uniform value quickly and unlink only when needed.
• Use with the Correct Property: If you set the Property Type to a specific CSS property like padding, ensure your CSS rule uses the same property. For custom use, you might need to map values manually (e.g., top: {{spacing.TOP}};).
• Test Unit Combinations: Ensure your widget’s CSS can handle mixed units (like px and % together) if you allow multiple units, as this can sometimes break layouts.

The Dimensions control is a fundamental tool for creating flexible, professionally-styled widgets that give users precise control over layout and spacing, mirroring the power of core Elementor design features.