デザイナーが単純な水平線を使うことはほとんどありません。区切り線は通常、高さと背景色を持つ空のdiv、または見出しの下に置かれた短いアクセントバーです。これらを認識することで、Elementor ツリーを空のコンテナで埋め尽くすことなく、きれいに保てます。
区切り線として認識されるもの
<hr> は常に Divider ウィジェットになります。それに加えて、空の <div> または <span> は、次の条件を満たす場合に区切り線として扱われます。
- テキストや実際のコンテンツ要素を含まない
- 細いバーとして描画される — 高さが小さく、高さよりも明らかに幅が広い
- 実際に目に見える色がある（背景色、または上/下のボーダー）
空で色がないケースは意図的に除外されています。色のない空白のスペーサーdivは区切り線ではなく、それを目に見える線に変換すると、デザインに存在しなかったものを追加することになります。
引き継がれるもの
線の色と太さ — ボーダーがある場合はそこから、ない場合は背景色と描画された高さから読み取られます。コンテナよりも明らかに狭い短いアクセントバーには、明示的な幅と配置も設定されます。そのため、見出しの下にある78pxのバーは、カラム全体に伸びずに78pxのまま維持されます。
これが思った以上に重要な理由
これがないと、装飾用の線はすべて背景色付きの空のコンテナになります。これはツリー内でレイアウト要素のように見えて実際はそうではないノードです。長いページの各セクションでそれが積み重なると、構造マップは読みにくくなります。それらを Divider ウィジェットに対応付けることで、ツリーは何がレイアウトで何が装飾であるかを正直に示すようになります。
後からの編集
Elementor の Divider には、単純な線以上の機能があります。実線以外のスタイル（点線、破線、パターン）、中央に配置できるテキストやアイコン、幅と間隔のコントロールなどです。線が実際の Divider ウィジェットになれば、そうしたすべてにワンクリックでアクセスできます。これは、色付きの空の div では不可能なことです。
正確なしきい値
このルールを曖昧にすると、ページの半分で誤検出が発生するため、判定は意図的に狭くしています。空の <div> または <span> が Divider になるのは、幅が少なくとも 12px、高さが 8px 以下、そして幅が高さの 3倍以上 ある場合に限られます。さらに、目に見える色があることも条件です。
それぞれの数値には役割があります。12pxという下限は、小さな装飾用ドットやボーダー周辺に現れる1pxのアーティファクトを除外します。8pxという上限は、線とバーを分けるものです。これを超えると、それは色付きのブロックであり、中に要素を配置できるコンテナに属するものになります。3:1の比率は小さな正方形を除外します。6×6のカラースウォッチは最初の2つのテストを通過しますが、明らかに区切り線ではありません。
測定値はスタイルシートからではなく、実際に描画された要素から取得されます。そのため、高さがパディングルールや継承された line-height から生じているバーでも、どのプロパティがそれを生み出したかではなく、目に見える結果に基づいて判定されます。
グラデーションバーも対象
色の判定では、背景色だけでなく背景画像も受け付けます。CSSグラデーションは背景画像の一種です。そのため、よく使われるアクセントバー（セクション見出しの下に置かれ、あるブランドカラーから別のブランドカラーへ変化する短いバー）も認識され、Divider に変換されます。
ただし、その後の動作も知っておく価値があります。Elementor の Divider はグラデーションではなく単色のみを受け付けるため、ウィジェットはフェードではなく単一色で配置されます。グラデーションが重要であれば、元の要素を小さくスタイル設定したコンテナとして残す方が良い数少ないケースの1つです。
線がそもそも独立した要素ではない場合
実際のページ上にある線の多くは、要素ではありません。それらは別の何かに付いたボーダーです。見出しの下の border-bottom、フッターの上のボーダー、引用を示す左のボーダーなどです。
これらは Divider にはなりません。また、そうすべきでもありません。ボーダーは見出しやコンテナのプロパティであり、まさにそのように、それが属するウィジェットのボーダー設定として変換されます。見た目の結果は同じであり、線が装飾対象に付いたままになるため、構造はより正直です。見出しを動かせば線も一緒に動きます。もし下に別の Divider ウィジェットとして分割されていたら、そうはいきません。
スペーサーは区切り線ではない
高さがあり色のない空のdivはスペーサーであり、意図的に色の判定を通過しません。それを Divider に変換すると、デザインに存在しなかった線を描くことになります。それは目に見える変更であり、意図的に見えてしまうため最悪の種類です。
スペーサーは代わりに通常のラッパールールに従います。スタイル効果のないものは折りたたまれ、min-height を持つものはその高さを持つコンテナとして残ります。明示的な Spacer ウィジェットにしたい場合は、エディターで簡単に置き換えられます。後からレスポンシブに調整する予定があるものには良い選択です。Spacer ウィジェットにはデバイスごとの高さコントロールがあるからです。
ソースへのヒント
区切り線をきれいに変換したい場合は、疑似要素に頼るのではなく、明示的な背景色と小さな高さを設定してください。::after のような疑似要素は実際のDOMノードではないため、ウィジェットにはまったく変換できません。それらで描画されたものは、Elementorで手動で作り直す必要があります。これは、変換中にデザイナーのアクセントバーが消える最も一般的な理由です。そもそもDOMに存在しなかったのです。