Elementorの「ディバイダー（区切り）」ウィジェットは、単なる直線を引くだけのツールではありません。セクションの間にポンと置くだけで、サイトのプロっぽさが一気に増す、知る人ぞ知る優秀な装飾パーツです。今回は、線の中央にアイコンやテキストを組み込んで、デザインのアクセントにする手法を解説します。
なぜ「ただの直線」だと素人っぽく見えるのか？
セクションとセクションの間に単純な黒い実線を引くだけだと、Word文書のような事務的な印象を与えてしまいがちです。
- 間延びを防ぐ：線の中央にワンポイントの装飾が入ることで、ユーザーの視線が自然に誘導され、「ここから次のテーマが始まる」という合図になります。
- ブランド感を高める：カフェならコーヒーカップ、美容室ならハサミなど、サイトのテーマに合わせたアイコンを組み込むことで、細部まで作り込まれたプロのデザインという印象を与えられます。
線の中央に「アイコン」を配置する手順
線にアイコンを追加して、オシャレな区切り線を作る基本設定です。
- ウィジェット検索から「区切り」をドラッグ＆ドロップで配置します。
- 左パネルの [ コンテンツ ] タブ内にある「要素の追加」から「アイコン」を選択します。
- アイコンライブラリから、サイトの雰囲気に合う好きなマーク（星、葉っぱ、矢印など）を選びます。
- [ スタイル ] タブに移動し、線の太さ（ウェイト）やアイコンのサイズ、線とアイコンのすき間（間隔）を調整してバランスを整えます。
線の中央に「テキスト」を配置する手順
- 同じく「要素の追加」で、今度は「テキスト」を選択します。
- 表示された入力欄に「NEW ITEM」や「ABOUT US」などの短い英語を入れると、海外サイトのように洗練された印象になります。
- [ スタイル ] タブの「テキスト」項目で、フォントの種類や文字色を調整します。明朝体や細字のゴシック体を使うと、より上品に仕上がります。
まとめ
- ただの直線は避ける：セクション間の単純な実線は、事務的で素人っぽい印象になりがち。
- アイコンで世界観を：アイコン（星やお店のテーマに合うマークなど）を中央に置き、デザインのアクセントに。
- テキストで洗練さを：「NEW ITEM」などの短い英語を配置して、オシャレなサブタイトル風に。
- 線のスタイルをアレンジ：線の種類（波線・破線）や全体の幅（50%など）を調整すれば、さらに表現の幅が広がる。
区切りは単なる余白埋めではなく、立派なデザインパーツです。[ スタイル ] タブで線の種類を実線から波線や破線に変更したり、線の幅全体を画面の50%に縮めたりすることで、さらに表現の幅が広がります。セクション間が少し寂しいと感じた時は、この応用テクニックでサイトを華やかに飾ってみてください。
