Divider

The Divider control draws a horizontal line in your custom widget’s settings panel. It does not add anything to the front end. Its whole job is to split a long list of controls into readable groups, so the editor sees where one set of options ends and the next begins.

You add it in the Widget Builder between two other controls. In the panel, a line appears at that spot. In the screenshot below, a Divider sits between the Media control and the Dimensions control, giving each its own visual block.

Screenshot: the Divider control settings panel showing Label, Name, and Common Settings. Upload divider-control-settings.png here.

What the Divider control does #

Think of it like the Heading control’s quieter cousin. A Heading labels a group of controls with text. A Divider just draws the line between them, no text needed. Drop one in and the controls above and below it read as two separate sections.

Screenshot: a Divider drawing a line between the Media control and the Dimensions control in a custom Elementor widget panel. Upload divider-control-output.png here.

It is a panel-only control. There is no Selector and no shortcode, and nothing renders on the page. The Divider exists purely to keep your widget’s options tidy for whoever edits it.

Why would someone use it in a custom widget? #

Custom widgets pile up controls fast. A media picker, a few dimension fields, some toggles, a color or two, and suddenly the panel is one long scroll with no breaks. A Divider gives the eye a place to rest and signals that the next few controls belong together.

• Separate logical groups like content fields from spacing fields.
• Make a long panel scannable instead of one unbroken list.
• Keep client widgets clean in white-labeled builds, where a tidy panel looks more finished.

Where This Option Appears #

• Inside the Widget Builder, on the Content tab, when you add a new control to your custom widget.
• The line it draws shows up in the widget’s settings panel, between the control before it and the control after it.
• Nothing from the Divider appears on the front end. It is a panel organizer only.

Available Settings #

The Divider is one of the simplest controls in the builder, so its panel is short. Here is every field, in the order it appears.

Label #

The text that appears above the control in the panel. For a Divider you can leave this blank or set it to something like “Divider,” since the control itself is just a line. The helper note reads: The label that appears above of the field.

Name #

The unique identifier for the control. It can only contain letters, numbers, and underscores (_). Even though the Divider does not output a value, it still needs a name that is different from your other controls, like divider or divider_1.

Common Settings #

• Show Label: toggles whether the label text is displayed above the line.
• Label Block: when on, the label sits on its own full-width line instead of inline.
• Separator: set the position of the separator line, either None, Before, After, or Default. This stacks with the Divider itself, so most of the time you leave it at None.
• Conditions: show the Divider only when another control matches a value. The condition row takes a Control Name, an Equality (Equal, Not Equal), and a Control Value. Handy when the group below it only appears under certain settings.
• Control Classes: add custom CSS classes to the control wrapper in the panel.

How to Use It: A Practical Example #

Say your custom “Image Box” widget has a Media control up top, then a set of Dimensions fields for spacing, and you want a clean break between them:

1. Open your widget in the Widget Builder and go to the Content tab.
2. Add your Media control first.
3. Add a Divider control next. Set its Name to divider_1 and leave the rest at default.
4. Add your Dimensions control after the Divider.

Now the panel shows the image picker, a line, then the spacing fields, so whoever edits the widget reads it as two clear sections instead of one long list.

Common Use Cases #

• Splitting content controls from style or spacing controls in the same panel.
• Breaking a long Widget Builder panel into scannable blocks.
• Marking the start of an advanced or optional group of settings.
• Pairing with a Heading control, where the Heading names a section and the Divider closes it off.
• Tidying up handoff widgets in white-label builds so clients see a clean, organized panel.

Helpful Tips #

• Give every Divider a unique Name. It does not output anything, but two controls sharing a name will still cause trouble, so number them like divider_1, divider_2.
• Do not overdo it. A line between every control defeats the purpose. Use a Divider where a group genuinely ends, not on every field.
• Reach for a Heading control instead when the section needs a name, and a Divider when a plain line is enough.
• Use the Conditions setting to hide a Divider along with the group it separates, so you do not end up with a stray line above an empty section.

The Divider control is the simplest way to organize a custom widget’s panel in the Widget Builder. Drop it between two controls, and the line it draws turns a long list of settings into clean, readable groups, no front-end output and no CSS required.

Frequently Asked Questions #