MENU

【Elementor初級編】区切り線ウィジェットの使い方と応用術

Elementorの区切り線の使い方
あらたつ

区切り線は何かと使えるウィジェットだから抑えておこう!

WordPressのブロックエディタにもあるので馴染みのある方も多いかもしれないですが、Elementor(エレメンター)にも区切り線ウィジェットがあります。このウィジェットを上手に活用すれば、WEBデザインにスパイスを加えることが可能です。

文章がずらずらと並んでいるだけだと、読み手は目が疲れてしまいますし、どこを読んでいるかわからなくなってしまうこともしばしば。そんな時は区切り線を入れるだけで、グッと読みやすさが上がります。

SEOパンダ

見出しの使い方に近いかもな。

そこで、今回はElementor初心者の方にもわかりやすく、区切り線ウィジェットの使い方を解説します!

この記事を書いた人
アラタツです!
目次

区切り線ウィジェットの挿入方法

Elementor編集画面に区切り線を挿入

まずは、ウィジェットをElementorの編集画面に挿入してみましょう。やり方は、ウィジェットを入れたいところへドラッグ&ドロップするだけです。めちゃ簡単。

SEOパンダ

簡単なものも使い方を知らなければ使えない。

区切り線のデフォルト状態

デフォルトの状態の区切り線はカラムに対して横幅いっぱいの線が入ります。これだけでも使える場面はあるかもしれませんが、ここから色々とカスタマイズしていくとさらにおしゃれなページを作れます。

まずは、区切り線の機能を見ていきましょう。

区切り線(コンテンツ)の使い方

区切り線を編集画面

では、区切り線の編集を一つずつ解説します。上画像が区切り線(コンテンツ)の編集画面です。

スタイル

スタイルタブと名称が一緒なのでややこしいですが、区切り線のスタイルは下画像の通りです。

色々なスタイルの区切り線がある

横一文字だけでなく、様々なスタイルの区切り線があることがわかりますね。

単色ダブルドット破線
カールカーブスラッシュ四角
波形ジグザグ複数矢印
プラスひし形平行四辺形長方形
ドットモミの木半円
ストライプスクエアトライバル
Xジグザグ

わかりやすいように、いくつかの区切り線のスタイルを並べてみました。

区切り線のスタイル

これだけ種類があれば、色々な用途がありそうです。

幅の設定

区切り線の幅は、カラムに対しての幅を変更できる設定です。

幅の例

配置

配置の設定

区切り線の配置設定です。左寄せ、中央、右寄せが可能です。また、デバイスごとに配置を変えることもできます。

要素を追加

要素を追加

要素を追加では、区切り線にテキストを入れたり、アイコンを入れることができます。この機能を使うことで、さらにデザインの幅が広がりそうですね。

テキストとアイコン

HTMLタグ

HTMLタグ

区切り線にはHTMLタグの設定があります。これにより、区切り線を見出しとして使うことも可能になります。

SEOパンダ

これいいよな。

区切り線(スタイル)の使い方

続いて、スタイル設定を見ていきましょう。

スタイル設定

区切り線のスタイル設定では、色や太さ、区切り線の上下の隙間、フォントなどを変更することができます。

色

「色」ではカラーピッカーを使って区切り線の色を自由に変更することができます。グローバルカラーでも設定可能です。

太字

太字

「太字」では、線の太さを調整できます。1〜10まで。

すき間

すき間

「すき間」では区切り線の上下のスペースを調整することができます。

テキスト

テキスト

「テキスト」では、テキストの色や書体、位置、間隔の設定ができます。

アイコン

アイコン

アイコンを使用している場合は、アイコン設定が表示されます。

「アイコン」では、アイコンに関する設定が色々とできます。

表示

表示

アイコンの「表示」では、アイコンに背景やフレームを付けることができます。

重ねるにした場合

「重ねる」を選択した場合、アイコンに背景色を付けることができます。(色の変更ももちろん可能)

フレーム付きにした場合

フレーム付きにすると枠線で囲うことができます。

サイズ

サイズ

サイズでは、アイコンのサイズを調整できます。

パディング

パディング

パディングを使用すると、アイコンサイズではなく、アイコンと枠線の間のスペースを調整できます。

色・サブカラー・位置

カラー設定

メインの色、サブカラー、位置の調整ができます。

間隔・回転・枠線の幅・枠線の丸み

間隔・回転・枠線の幅・枠線の丸み

そのほかにも、間隔を調整、アイコンを回転、枠線の幅の広さ、枠線の丸みなど、細かい設定をすることができます。

区切り線で見出しをデザインする

区切り線は、カラムとカラムの間に線を引くだけでなく、見出しとしても使い勝手が良いです。

見出しとして使った例

例えば、区切り線のHTMLタグを見出し2に設定し、テキストを入力すれば文字だけのシンプルな見出しではなく、装飾付きの見出しを作ることも可能です。

区切り線を見出しとして使うやり方はこちらの記事もチェックしてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

アラタツのアバター アラタツ NoCodeクリエイター

島根県在住のアラタツです。
2013年からアフィリエイトとSEOにどっぷりはまり、会社をやめて独立。現在はWEB制作の受注、コミニュティビジネス、メディア運営をしたりして生活しています。「好きなことして生きていく」を割と体現できています。現在、Elementorに特化したWPテーマを開発中。

コメント

コメントする

CAPTCHA

目次