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

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

この記事は『Elementorの使い方』のコースを元に作っています。
動画でみたい方は是非このコースをチェックしてみてください。
TOFUラボに参加することによって無料で見ることもできます。

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

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

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

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

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

『コンテンツ』の編集

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

スペーサー / スペース

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

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

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

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

『高度な設定』

スペーサー・高度な設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

目次

コメントを残す

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

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。