Elementorのスペーサーウィジェットの使い方

Elementor『スペーサー』ウィジェットの使い方

スペーサーはウェブ上の2つのセクションを線で区切る代わりにセクションとセクションの間に適度なスペースを設け視覚的に分ける役割があります。
デザインをよりシンプルにしたい時に役に立つツールです。
この記事では『スペーサー』ウィジェットの使い方を説明していきます。

以下はスペーサーウィジェットの実用例です。

>>こちらはアイコンウィジェットやスペーサーウィジェットと、背景色を設定した見出しウィジェットを重ねて作るh3の見出しデザインの作り方の実演動画です。

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

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

スペーサーウィジェットの使い方

スペーサーウィジェットをカラムに挿入

スペーサーウィジェットをカラムにドラッグ&ドロップで挿入します。

スペーサーウィジェットをカラムに挿入した後の表示画面

こちらはスペーサーウィジェットを挿入した後の表示画面です。

『コンテンツ』の編集

スペーサー・コンテンツの編集

スペーサー / スペース

スペーサーは非常にシンプルで、「スペース」という部分しか変えることができません。

スペーサー・スペースの編集

※スペースのデフォルトは50の値に設定されています。

カーソルを横にスライドさせることにより、スペーサーの拡張、縮小が行えます。

『高度な設定』

スペーサー・高度な設定

高度な設定のタブの説明については別の記事にまとめて紹介していますので、そちらを参考にしてください。

スペーサーはもう、使うべきではない?!

スペーサーはこのように、ウェブ上にスペースを入れるだけのものです。

実はスペーサーは、かつては必要だったけれど、現在は必要のないもので、使うべきではないと、海外の動画などでも多く取り上げられています。

では、なぜ必要ではないのかを以下に参照します。

スペーサーを使わずにElementorで編集する方法

スペーサーを使わずに設定する方法/セクションの設定

まず、カラムの上部・中央にあるセクションの設定をクリックします。

セクションの設定の高度な設定

すると、画面左側のボックスの表示がこのように変わるので、『高度な設定』をクリックします。

高度な設定/マージンの変更

高度な設定の『マージン』でまず『値をまとめてリンク』を解除し、マージンの『下』の値を変更します。

マージン・下の値を変更下表示画面

するとこの様に、上のカラムと下のカラムとの間にスペースが生じたことがお分りいただけると思います。

確かにスペーサーで同じことはできますが、正直言ってスペーサーのウィジェットは必要がないのでは?と言われています。


この様に、スペーサーまたはマージンの調整を駆使して情報を視覚的にカテゴライズすると、ウェブサイトがよりシンプルに見やすくなる効果があります。
余計な情報を削ぎ落としたシンプルなウェブデザインにしたい時にスペーサーウィジェットの活用、またはマージンの調整を取り入れてみるのもいいかもしれませんね!

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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