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.
Even a UI-only control like the Divider supports Conditions, so a whole group of options can appear and disappear together with its divider. Template output across the builder is rendered by the Twig-syntax template engine; both guides cover the details.
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 #
What is the Divider field in the Master Addons Widget Builder?
The Divider field draws a thin horizontal line between two controls in a custom widget’s option panel. It organizes the panel visually inside the Elementor editor and has no effect on the widget’s output or the frontend of your site.
Does the Divider field show anything on my website?
No. The divider appears only in the widget’s option panel in the Elementor editor. It prints nothing on the page, in the preview, or on the frontend. To show a visible line to visitors, add one in your widget’s HTML or use a separator widget.
Why can’t I see the divider in Elementor after adding it?
Reload the Elementor editor. A tab that was open while you saved the widget still holds the old panel layout. After a refresh, select the widget and the thin line appears between the two controls where you placed the Divider field.
Does the Divider field create a shortcode?
No. Input fields like Text generate tokens such as {{text}} in the Documentation sidebar, but the Divider collects no value, so it adds no shortcode. You place it in the panel and that is the entire setup.
Should I use a Divider or a new section?
Use a Divider to split groups of related fields inside one section. Create a new section when the fields cover a different topic entirely and deserve their own collapsible heading in the Elementor panel. Dividers are lighter, sections are stronger separation.
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.
