Designers rarely use a plain horizontal rule. A separator is usually an empty div with a height and a background, or a short accent bar under a heading. Recognising those keeps your Elementor tree clean instead of filling it with empty containers.
What is recognised as a divider
An <hr> always becomes a Divider widget. Beyond that, an empty <div> or <span> is treated as a divider when it:
- contains no text and no real content elements,
- renders as a thin bar — a small height, and clearly wider than it is tall,
- and actually has a visible colour, either a background or a top/bottom border.
The empty-and-colourless case is excluded on purpose. A blank spacer div with no colour is not a separator, and turning it into a visible line would add something your design never had.
What is carried over
The line colour and its thickness — read from the border when there is one, otherwise from the background colour and the rendered height. A short accent bar that is clearly narrower than its container also gets an explicit width and alignment, so a 78px bar under a heading stays a 78px bar instead of stretching across the whole column.
Why this matters more than it sounds
Without this, every decorative line becomes an empty Container with a background — a node in your tree that looks like a layout element but is not. Multiply that by every section on a long page and the Structure map becomes hard to read. Mapping them to Divider widgets keeps the tree honest about what is layout and what is decoration.
Editing afterwards
Elementor’s Divider has more to offer than a plain line: styles beyond solid (dotted, dashed, patterns), an optional text or icon in the middle, and width and gap controls. Once a line is a real Divider widget, all of that is one click away — which is not true of an empty coloured div.
The exact thresholds
The vaguer version of this rule would produce false positives on half a page, so the test is deliberately narrow. An empty <div> or <span> becomes a Divider only when it is at least 12px wide, no more than 8px tall, and at least three times wider than it is tall — on top of having a visible colour.
Each number is doing a job. The 12px floor rejects tiny decorative dots and the 1px artefacts that show up around borders. The 8px ceiling is what separates a line from a bar — above that you are looking at a coloured block, which belongs in a Container where you can put things inside it. The 3:1 ratio rejects small squares: a 6×6 colour swatch passes the first two tests but is obviously not a separator.
Measurements come from the element as actually rendered, not from the stylesheet, so a bar whose height comes from a padding rule or an inherited line-height is judged on what you can see rather than on which property produced it.
Gradient bars count too
The colour test accepts a background image as well as a background colour, and a CSS gradient is a background image. So the popular accent bar — a short bar under a section heading running from one brand colour to another — is recognised and converts to a Divider.
Worth knowing what happens next, though: Elementor’s Divider takes a solid colour, not a gradient, so the widget arrives with a single colour rather than the fade. If the gradient matters, that is one of the few cases where keeping the original as a small styled Container is the better choice.
When the line is not a separate element at all
A large share of the lines on a real page are not elements. They are borders on something else — a border-bottom under a heading, a top border on a footer, a left border marking a quote.
These do not become Dividers, and should not. The border is a property of the heading or the container, and it converts as exactly that: a border setting on the widget it belongs to. The visual result is identical and the structure is more honest, because the line stays attached to the thing it decorates. Move the heading and the line moves with it — which would not be true if it had been split into a separate Divider widget sitting underneath.
Spacers are not dividers
An empty div with height and no colour is a spacer, and it fails the colour test on purpose. Turning it into a Divider would draw a line your design never had — a visible change, and the worst kind, because it looks intentional.
Spacers instead follow the normal wrapper rules: one with no styling effect gets collapsed, and one carrying a min-height survives as a Container with that height. If you would rather have an explicit Spacer widget, that is a quick swap in the editor — and a good idea for anything you plan to adjust responsively later, since the Spacer widget has per-device height controls.
Tip for the source
If you want a separator to convert cleanly, give it an explicit background colour and a small height rather than relying on a pseudo-element. Pseudo-elements such as ::after are not real DOM nodes, so they cannot be converted into widgets at all — anything drawn with them has to be rebuilt in Elementor by hand. This is the single most common reason a designer’s accent bar disappears during conversion: it was never in the DOM to begin with.