The Dimensions field gives a custom widget the familiar four-input spacing control from Elementor’s Advanced tab: top, right, bottom, and left values with a link icon that keeps them in sync. Inside the Master Addons Widget Builder, it is the field you reach for whenever padding, margin, or a per-corner border radius should be editable from the panel instead of hard-coded in your stylesheet.
Like every Widget Builder control, Dimensions supports Conditions, so you can reveal spacing options only when they apply. Token output across the builder runs through the Twig-syntax template engine; both guides cover the details and limitations.
The value it stores carries all four sides plus the unit, and your CSS panel prints each piece by name. Getting that spelling right is the whole trick, and there is one behavior specific to this field worth knowing before you wire it up: the builder’s plain Selector field does nothing for a Dimensions control.
What the Dimensions field does #
- Renders the four-input control for top, right, bottom, and left, with the link icon that mirrors one value to all sides.
- Stores every side plus the unit in a single value your CSS reads with dot notation.
- Offers a unit switcher across the units you allow, such as px, %, and em.
- Can limit which sides show through the allowed dimensions option, down to horizontal-only or vertical-only inputs.
- Supports responsive values so each breakpoint keeps its own spacing.
If you have not built a widget before, the Widget Builder overview covers the basics; start there.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- A custom widget open in the Widget Builder editor. Our example is a pricing card widget whose
.price-cardbox should let editors set the inner padding.
How to add a Dimensions field #
Open the fields panel on the left of the Widget Builder editor and find the Dimensions field, listed with the other CSS-value fields such as Slider.
Drag it into a section under the Style tab, the usual home for spacing controls. Once it lands, the field’s options open on the left.
Dimensions field options explained #
- Label: the text next to the control in Elementor, for example “Card Padding”.
- Name: the unique identifier your CSS refers to, letters, numbers, and underscores only, for example
pad. - Default: the starting value, holding top, right, bottom, left, the unit, and whether the sides start linked.
- Size Units: the units the user can switch between, such as px, %, and em.
- Allowed Dimensions: which inputs appear. “All” shows four sides; “horizontal” shows left and right only; “vertical” shows top and bottom only; a custom list picks specific sides.
- Responsive: adds the device icon so desktop, tablet, and mobile keep separate values.
- Description, Show Label, Separator, and Conditions work the same here as on every other field.
Connect the Dimensions value to your CSS #
The stored value is an array with the keys top, right, bottom, left, unit, and isLinked. In the CSS panel, spell out all four sides and repeat the unit after each one:
.price-card {
padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}With 24 on every side and px selected, the rule renders as padding: 24px 24px 24px 24px;. Unlink the sides in the panel and each token carries its own number. The same pattern covers margin and, side by side per corner, border-radius. One CSS quirk worth remembering if you offer % as a unit: percentage padding resolves against the element’s width, even for top and bottom, and editors will not expect that.
Watch out: the builder’s Selector field emits no default CSS property for a Dimensions control, so filling it in produces nothing. Write the sides out in the CSS panel as above, or define full selectors entries that contain the complete property; the plain Selector option is not a shortcut for this field.
Use the Dimensions control in Elementor #
Drop your custom widget onto a page in Elementor, or reload the editor if the page was already open; new controls never show up in a stale editor tab. The control appears with four inputs, the unit switcher, and the link icon in its corner.
Type into any input while the link icon is active and all four sides update together. Click the icon to unlink and each side takes its own value, which is how you get asymmetric padding such as a taller top than bottom. With Responsive on, the device icon stores separate spacing per breakpoint.
Common use cases #
- Card and box padding, the single most common spacing control in custom widgets.
- Section and wrapper margins so editors can tune vertical rhythm between blocks.
- Per-corner border radius, using the four values as corners instead of sides.
- Button padding, often with allowed dimensions limited to horizontal.
- Media offsets, nudging an image or badge with margin values.
Tips for working with the Dimensions field #
- Spell out every side and the unit. The CSS panel connection is four tokens plus four unit tokens; a bare
{{ pad }}prints nothing usable. - Skip the plain Selector field. It emits no property for Dimensions. The CSS panel, or a full selectors entry, is the working route.
- Limit the sides when the property calls for it. A horizontal-only control keeps a button padding field honest.
- Set a linked default. Starting with equal, linked sides gives editors a sane baseline and one input to think about.
- Keep base spacing in your stylesheet. The widget should look right on first drop; the control then adjusts from there.
- Turn on Responsive for padding and margin. Desktop spacing rarely survives contact with a phone screen.
Frequently Asked Questions #
What is the Dimensions field in the Master Addons Widget Builder?
It adds Elementor’s four-sided spacing control to a custom widget: top, right, bottom, and left inputs with a link toggle and a unit switcher. The value stores all four sides plus the unit, and your widget CSS prints each piece with dot notation, such as {{ pad.top }}{{ pad.unit }}.
How do I print the Dimensions value in the CSS tab?
Write the property with all four side tokens, repeating the unit after each: padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};. The rule tracks the control from then on.
Why does the Selector option do nothing for my Dimensions field?
By design, the builder emits no default CSS property for Dimensions through the plain Selector field, since there is no single value to inject. Use the CSS panel tokens instead, or define full selectors entries that contain the complete declaration.
Can I show only the left and right inputs?
Yes. Set Allowed Dimensions to “horizontal” and only the left and right inputs render. “Vertical” does the same for top and bottom, and a custom list can pick any specific sides.
What does the link icon on the control do?
While linked, editing one side writes the same number to all four, and the stored value records that linked state. Unlinking lets each side hold its own number, which the four CSS tokens print independently.
Does the Dimensions field work for border-radius?
Yes. Border radius takes four values in the same order the control provides, so border-radius: {{ rad.top }}{{ rad.unit }} {{ rad.right }}{{ rad.unit }} {{ rad.bottom }}{{ rad.unit }} {{ rad.left }}{{ rad.unit }}; maps each input to a corner.
Wrapping up #
The Widget Builder Dimensions field moves padding, margin, and radius decisions out of your stylesheet and into the panel: one control, four sides, one unit, all printed by name in the CSS tab. Use it beside the Slider field, which covers the single-value lengths a four-sided control would be overkill for. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.
