Elementorの区切り線の使い方

Elementorの『区切り線』ウィジェットの使い方

区切り線はその名の通り、1つのウェブ上で違う内容などがある時に2つのセクションを視覚的に区切る線のことです。

この記事では『区切り線』ウィジェットの使い方を説明していきます。

以下は区切り線ウィジェットの実用例です。

>>こちらは区切り線ウィジェットを使って短いアンダーラインを使用したh2の見出しデザインの作り方の実演動画です。

>>こちらは区切り線ウィジェットを使って、文字やアイコンの両サイドを線で区切ったh2の見出しデザインの作り方の実演動画です。

サイト制作のアイディアとして役に立つのでぜひ参考にしてください!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

区切り線ウィジェットを挿入

区切り線ウィジェトをカラムに挿入

区切り線ウィジェットをドラッグ&ドロップでカラムに挿入します。

区切り線ウィジェットをカラム挿入した後の表示画面

デフォルトの区切り線がこのように表示されます。

『コンテンツ』の編集

コンテンツの編集

コンテンツでできることを説明していきます。

スタイル

区切り線・スタイルの変更

スタイルの▼をクリックすると区切り線のオプション一覧が以下のように表示されます。

区切り線・オプション一覧

ライン

  • 単色
  • ダブル
  • ドット
  • 破線
  • Curly
  • カーブ
  • スラッシュ
  • 四角
  • 波型
  • ジグザグ

Pattern(パターン)

  • 複数
  • 矢印
  • プラス
  • ひし形
  • 平行四辺形
  • 長方形

Tribal(トライバル)

  • ドット
  • モミの木
  • 半円
  • ストライプ
  • スクエア
  • トライバル
  • X
  • ジグザグ

区切り線・全26種類の中から、好きな区切り線を選ぶことができます。

スタイルのサンプル(一部)

スタイル・幅の編集

デフォルトでは100%(カラムの全幅)に設定されています。

幅・デフォルト100%の説明

カーソルを横にスライドさせ、区切り線の幅を小さくすることができます。

区切り線・幅の変更
区切り線の幅の変更・サンプル

配置

区切り線・配置の説明

区切り線を

  • 中央

に配置することができます。

区切り線の配置・サンプル(右)
区切り線の配置・サンプル(中央)
区切り線の配置・サンプル(左)

また、配置を決めた状態から幅の変更をすることも可能です。

動画は配置を中央にした状態で、幅の変更を行なっています。
幅が中央から等間隔に調整されるのがわかると思います。

要素の追加 / テキスト

要素の追加・テキスト

要素の追加の『T』をクリックすると、このようにテキストの記入欄が出てくるので、挿入したいテキストを入力します。

要素の追加・テキストを挿入したカラム内の表示
こちらはカラム内の表示です。

挿入したテキストは区切り線の中央に配置されます。

要素の追加 / アイコン

要素の追加・アイコン

要素の追加の『☆』をクリックするとこのように表示されます。
※デフォルトのアイコンは星マークが表示されます。

要素を追加・アイコンを挿入したカラム内の表示
こちらはカラム内の表示です。

挿入したアイコンはテキストと同様、区切り線の中央に配置されます。

また、アイコンを変更したい時は『アイコンライブラリー』をクリックします。

要素の追加・アイコンライブラリー

アイコンライブラリーのアイコン一覧から好きなアイコンを選択し、変更をすることができます。

アイコンライブラリーの一覧

使用したいアイコンをクリックし、INSERT(挿入)をクリックします。

アイコン変更後の表示画面
アイコン変更後のカラム内の表示
こちらはカラム内の表示です。

アイコンの挿入後、アイコンの部分だけが選択したものに変更されます。

『スタイル』の編集

スタイルの編集

「スタイル」でできることを説明します。

区切り線

区切り線の色味の変更・カラーピッカー

色の付いたボックスをクリックするとカラーピッカーが表示されるので、自由に区切り線の色を変更することができます。

区切り線・色味変更後サンプル
こちらはカラム内の表示です。

色味の変更は区切り線のみ行われます。
※テキストの色味は変更しません。

サイズ

区切り線・サイズの変更

カーソルを横にスライドさせると、区切り線の絵の大きさを変更することができます。
※デフォルトのサイズは20の値に設定されています。

区切り線・サイズ変更後表示画面
こちらはカラム内の表示です。

すき間

区切り線・すき間の説明

すき間の調節は、区切り線のサイズの変更の仕方と同様にカーソルを横にスライドです。
※デフォルトは15の値に設定されています。

区切り線・すき間変更後の表示画面
こちらはカラム内の表示です。

区切り線の上下のすき間の大きさが変更されます。
※ここでは区切り線のスタイルとスタイルのすき間は変更されません。

テキスト

色・書体

区切り線・テキスト/色と書体

テキストの色と書体の説明については別の記事で詳しく紹介をしていますのでそちらを参考にしてください。

位置

区切り線・テキストの位置変更

区切り線上のテキストの配置を

  • 中央

に変更することができます。

区切り線・テキスト位置/右
区切り線・テキスト位置/中央
区切り線・テキスト位置/左

間隔

区切り線・テキストの間隔/デフォルト

間隔はテキストと区切り線のスタイルの間隔の調整ができます。
カーソルを横にスライドさせて変更します。
※デフォルトの値は0に設定されています。

区切り線・テキストの間隔/デフォルト画面表示
区切り線・テキストの間隔/最大値
区切り線・テキストの幅/最大値の画面表示

つづいて、区切り線にテキストではなくアイコンを挿入した時の「スタイル」の編集の仕方を説明します。
アイコンの挿入の仕方はこの記事の『要素の追加 / アイコン』で紹介しています。

区切り線にアイコン挿入した時の表示

アイコン

アイコンの編集

『アイコン』をクリックすると以下のように表示されます。

アイコンをクリックした後の表示画面

表示

区切り線・アイコンの表示編集

デフォルトと示された左側の▼をクリックすると以下のような選択が出ます。

区切り線・アイコンの表示変更
  • デフォルト
  • 重ねる
  • フレームつき
区切り線・アイコンの表示サンプル画像

サイズ・メインカラー・位置・間隔

区切り線・アイコンのサイズ・メインカラー・位置・間隔の編集

アイコンのサイズ、メインカラー、位置、間隔の編集の仕方は
『スタイルの区切り線』のセクションで説明しているやり方と同じ
なのでそちらを参考にしてください。

回転

区切り線・アイコンの回転

カーソルを横にスライドさせると、アイコンの回転が始まります。

区切り線・アイコン/回転の説明
区切り線・アイコンの回転

以下の画像は回転後の見本です。

区切り線・アイコンを回転させた状態の表示

この様に、区切り線を使って情報を視覚的にカテゴライズすると、ウェブを見る人が情報をより瞬時にキャッチすることができます。

また、アイコンなども使用用途によって色々な意味を含ませることができるので、ウェブ内の情報をさらに充実させることができそうですね。

また、区切り線と似たような性質を持つもので、背景の形で区切る『シェイプ区切り』という方法もあります。
そちらに関してはこちらの記事の同セクションで詳しく説明をしています。

>>Elementor – セクションの使い方 – スタイルタブ編【初心者必見】

クオリティの高いウェブ制作にぜひ、区切り線を取り入れてみてはいかがでしょうか。


Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通