Divider

The Divider field draws a thin border line between two controls in your custom widget’s option panel. It is a layout helper for the panel itself: it prints nothing on the page, adds nothing to your HTML, and never shows up on the frontend. Its only job is to visually separate one group of options from the next, so the people editing your widget in Elementor can scan the panel faster.

Inside the Master Addons Widget Builder, you drop the Divider between any two fields, save, and Elementor renders a tiny horizontal line at that exact spot in the widget’s panel. In the walkthrough below, the divider goes between a Text field and a Text Area field.

What the Divider field does #

A Divider renders a subtle horizontal border inside the Elementor editor panel, right where you placed it between two controls. That is the whole feature, and that is the point. When a custom widget has five or six inputs stacked in one section, a couple of dividers turn a wall of fields into clear groups.

Two things the Divider does not do, so there are no surprises later:

• It has no output. Unlike the Text or Text Area fields, the Divider adds no shortcode to the Documentation sidebar. There is no {{divider}} token to place in your HTML, CSS, or JS.
• It never touches the page. The line appears only in the widget’s option panel inside the Elementor editor. The preview area and the live frontend stay exactly the same.

If you want a divider that visitors actually see on the page, that is a different tool: use a divider or separator widget in your page design instead. This field is purely for organizing the editing experience. If you are new to building widgets, start with the Widget Builder overview first.

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, with at least two fields already in place. Here we use a Text field and a Text Area field.

How to add a Divider field #

In the Widget Builder editor, scroll the fields panel on the left until you find the Divider field. It sits near the bottom of the list, next to Text Shadow, and its icon looks like a line between two small arrows.

Drag the Divider into your section and drop it where the separator should appear. In our example, the Content section already holds a Text field and a Textarea field, and the Divider lands between them. If it lands in the wrong spot, grab the handle on its left side and drag it into place, the same way you reorder any other field.

Once the Divider sits between the two fields, the section reads Text, Divider, Textarea from top to bottom. Click Save Settings to store the change.

Divider field options explained #

Select the Divider to open its settings on the left. It carries far fewer options than an input field, because there is no value to collect.

• Label: the internal name shown on the field card in the builder, “Divider” by default. It helps you tell multiple dividers apart while editing the widget.
• Name: the unique identifier for the field. It must contain only letters, numbers, and underscores. The Divider generates no shortcode, so this stays behind the scenes, but every field still needs a unique name.
• Show Label and Label Block: the standard label toggles that appear on every Widget Builder field.
• Separator: sets the position of the control separator (None, Before, After, Default).
• Conditions: show or hide the divider based on another control’s value. Click Add Condition to set the rule. Handy when the fields around it are conditional too, so a line never floats above a hidden control.

For most widgets, you drop the Divider in place and never touch these settings. Placement is the setting that matters.

See the divider in the Elementor editor #

Now open a page in Elementor that uses your custom widget, or drag the widget onto a page. If the page was already open while you edited the widget, reload the Elementor editor so it picks up the new panel layout.

Select the widget and look at its Content tab. A tiny border line now sits between the Text control and the Textarea control, exactly where you dropped the Divider in the builder.

Check the preview on the right: the heading and paragraph render the same as before. The divider changed nothing about the output, only the panel. That’s exactly what should happen.

Common use cases #

• Grouping related inputs, like a heading and its subheading above the line, and a button label and link below it.
• Separating content from behavior, for example text fields above, toggles and switches below.
• Breaking up long sections where splitting into separate sections would be overkill but ten stacked fields feel heavy.
• Marking optional extras, with the required fields above the divider and nice-to-have settings underneath.

Tips for working with the Divider field #

• Use dividers between groups, not between every field. A line after each control is as noisy as no lines at all.
• Reach for a Divider before a new section. If two groups of fields belong to the same tab and the same topic, a divider keeps them together without the cost of another collapsible section.
• Reload the Elementor editor after saving. An editor tab that was open during the change will not show the new line until you refresh.
• Remember it is invisible to visitors. If a client asks for a line on the page, that is a design element in the widget’s HTML or a separate widget, not this field.

Frequently Asked Questions #

Wrapping up #

The Divider field is the smallest tool in the Widget Builder, and one of the most useful for anyone who will edit your widget later. Drop it between two fields, save, reload the Elementor editor, and the panel gains a clean line right where the options change topic. Pair it with the Text and Text Area fields to build panels that read like a form, not a pile of inputs. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.