あらたつ区切り線は何かと使えるウィジェットだから抑えておこう！
WordPressのブロックエディタにもあるので馴染みのある方も多いかもしれないですが、Elementor（エレメンター）にも区切り線ウィジェットがあります。このウィジェットを上手に活用すれば、WEBデザインにスパイスを加えることが可能です。
文章がずらずらと並んでいるだけだと、読み手は目が疲れてしまいますし、どこを読んでいるかわからなくなってしまうこともしばしば。そんな時は区切り線を入れるだけで、グッと読みやすさが上がります。
SEOパンダ見出しの使い方に近いかもな。
そこで、今回はElementor初心者の方にもわかりやすく、区切り線ウィジェットの使い方を解説します！
区切り線ウィジェットの挿入方法
まずは、ウィジェットをElementorの編集画面に挿入してみましょう。やり方は、ウィジェットを入れたいところへドラッグ＆ドロップするだけです。めちゃ簡単。
SEOパンダ簡単なものも使い方を知らなければ使えない。
デフォルトの状態の区切り線はカラムに対して横幅いっぱいの線が入ります。これだけでも使える場面はあるかもしれませんが、ここから色々とカスタマイズしていくとさらにおしゃれなページを作れます。
まずは、区切り線の機能を見ていきましょう。
区切り線（コンテンツ）の使い方
では、区切り線の編集を一つずつ解説します。上画像が区切り線（コンテンツ）の編集画面です。
スタイル
スタイルタブと名称が一緒なのでややこしいですが、区切り線のスタイルは下画像の通りです。
横一文字だけでなく、様々なスタイルの区切り線があることがわかりますね。
| 単色 | ダブル | ドット | 破線 |
| カール | カーブ | スラッシュ | 四角 |
| 波形 | ジグザグ | 複数 | 矢印 |
| プラス | ひし形 | 平行四辺形 | 長方形 |
| ドット | モミの木 | 半円 | 葉 |
| ストライプ | スクエア | 木 | トライバル |
| X | ジグザグ |
わかりやすいように、いくつかの区切り線のスタイルを並べてみました。
これだけ種類があれば、色々な用途がありそうです。
幅
区切り線の幅は、カラムに対しての幅を変更できる設定です。
配置
区切り線の配置設定です。左寄せ、中央、右寄せが可能です。また、デバイスごとに配置を変えることもできます。
要素を追加
要素を追加では、区切り線にテキストを入れたり、アイコンを入れることができます。この機能を使うことで、さらにデザインの幅が広がりそうですね。
HTMLタグ
区切り線にはHTMLタグの設定があります。これにより、区切り線を見出しとして使うことも可能になります。
SEOパンダこれいいよな。
区切り線（スタイル）の使い方
続いて、スタイル設定を見ていきましょう。
区切り線のスタイル設定では、色や太さ、区切り線の上下の隙間、フォントなどを変更することができます。
色
「色」ではカラーピッカーを使って区切り線の色を自由に変更することができます。グローバルカラーでも設定可能です。
太字
「太字」では、線の太さを調整できます。1〜10まで。
すき間
「すき間」では区切り線の上下のスペースを調整することができます。
テキスト
「テキスト」では、テキストの色や書体、位置、間隔の設定ができます。
アイコン
アイコンを使用している場合は、アイコン設定が表示されます。
「アイコン」では、アイコンに関する設定が色々とできます。
表示
アイコンの「表示」では、アイコンに背景やフレームを付けることができます。
「重ねる」を選択した場合、アイコンに背景色を付けることができます。（色の変更ももちろん可能）
フレーム付きにすると枠線で囲うことができます。
サイズ
サイズでは、アイコンのサイズを調整できます。
パディング
パディングを使用すると、アイコンサイズではなく、アイコンと枠線の間のスペースを調整できます。
色・サブカラー・位置
メインの色、サブカラー、位置の調整ができます。
間隔・回転・枠線の幅・枠線の丸み
そのほかにも、間隔を調整、アイコンを回転、枠線の幅の広さ、枠線の丸みなど、細かい設定をすることができます。
区切り線で見出しをデザインする
区切り線は、カラムとカラムの間に線を引くだけでなく、見出しとしても使い勝手が良いです。
例えば、区切り線のHTMLタグを見出し2に設定し、テキストを入力すれば文字だけのシンプルな見出しではなく、装飾付きの見出しを作ることも可能です。
区切り線を見出しとして使うやり方はこちらの記事もチェックしてみてください。
コメント