Background

The Background field hands your custom widget the same background panel Elementor’s sections use: a classic tab for solid colors and images, a gradient tab with two color stops, and a video tab for motion backgrounds. Inside the Master Addons Widget Builder, you add the field once, point it at a CSS selector, and every background decision moves into the Elementor panel.

Background is a group control, the same family as Typography and Border. That means the connection model differs from text or color fields: there is no token to paste into your CSS. You fill in the Selector option and Elementor writes the background styles to that selector itself.

What the Background field does #

• Renders Elementor’s background group control in your widget’s panel, with tabs for each background type you allow.
• Classic tab: a solid color, or an image with the usual position, size, and repeat settings.
• Gradient tab: two color stops with location, angle, and type controls.
• Video tab: a motion background behind the selected element.
• Writes the CSS itself to the selector you provide, with no template token involved.

First widget? Start with the Widget Builder overview before wiring group controls.

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 hero widget whose <div class="hero-box"> container should take an editor-chosen background.

How to add a Background field #

In the Widget Builder editor, scroll the fields panel on the left until you find the Background field, listed with the other style group fields such as Typography and Box Shadow.

Drag it into a section under the Style tab, its natural home. Once it lands, the field’s options open on the left.

Background field options explained #

• Label: the text shown above the control in Elementor, for example “Hero Background”.
• Name: the unique identifier for the field, letters, numbers, and underscores only.
• Selector: the CSS selector the background applies to. This is the connection itself, covered in the next section.
• Types: which tabs the control shows, from classic, gradient, and video. Trimming the list keeps the panel focused; a card widget rarely needs the video tab.
• Exclude: removes individual sub-controls from the group when you want a reduced version of the panel.
• Description, Show Label, Separator, and Conditions behave as they do on every field.

Point the field at your selector #

Here is the part that trips people up if they are used to the token fields: the Background field has no {{shortcode}} for your CSS. A background is a bundle of properties, so it cannot print through one token; a {{ token }} for this field outputs nothing useful. Instead, you fill in the Selector option and Elementor generates the styles.

For the hero container, the selector is:

{{WRAPPER}} .hero-box

• {{WRAPPER}} stands for the widget’s own container, scoping the background to this widget alone. Group controls use the selector exactly as written, so you type {{WRAPPER}} yourself; nothing is prepended for you.
• .hero-box is the element inside your widget HTML that receives the background.

Watch out: leave {{WRAPPER}} off and the selector matches every .hero-box on the page, so one widget’s background lands on all of them. Group controls take the selector raw, making this the easiest mistake to ship.

Keep a fallback background in the widget’s CSS tab. It is what the widget shows on a fresh drop, and the control’s values override it once an editor picks something. A solid fallback color earns its keep twice, since it also covers the moment before a heavy background image finishes loading, which otherwise flashes white on slow connections.

Use the Background control in Elementor #

Add the widget to a page in Elementor, reloading the editor if the page was already open. The control appears under your label with a tab per allowed type.

On the classic tab, pick a color or choose an image from the media library with position, size, and repeat settings. Switch to the gradient tab for two color stops with angle and location, or to the video tab for a motion background. The preview updates as you go.

Common use cases #

• Hero and banner widgets where each site wants its own image or gradient behind the headline.
• Card backgrounds in pricing tables, team grids, and feature lists.
• Call-to-action strips that switch between a brand color and a photo per campaign.
• Video headers, with the video tab enabled only on widgets built for it.
• Overlay panels, pointing the selector at an inner layer above the media.

Tips for working with the Background field #

• The Selector option is the whole connection. Do not hunt for a background token in the CSS tab; there is none.
• Always start the selector with {{WRAPPER}}. Group controls use it raw, so a bare class selector leaks to every match on the page.
• Trim the Types list. Offering only classic and gradient keeps card widgets simple and stops editors dropping videos where they do not belong.
• Keep fallback styles in the widget CSS. A default background color in your stylesheet makes the widget presentable before anyone opens the control.
• Mind text contrast. When editors control the background, pair the widget with color controls for the text sitting on top of it.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Background field brings section-grade background editing to any element of a custom widget: name the field, set the Selector to {{WRAPPER}} plus your class, and choose which types the editor sees. It follows the same selector model as the Typography field, so once one group control clicks, the rest do too. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.