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

① 「スペーサー」を選ぶ

1. 編集したいページを「Elementorで編集」で開きます。
2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
3. 新しく追加する場合は、左上の「＋」を押し、検索欄に「スペーサー」と入力します。
4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。

開き方から確認したい場合：ページを作成・編集する

② 空きの高さを入力する

12

1. 「コンテンツ」の「スペース」を確認します。
2. 単位がpxになっていることを確認し、数字を入力します。画面例は50pxです。
3. 大きすぎる場合は24などへ減らします。
4. 入力欄の外をクリックし、右側の上下の部品の間隔を見ます。

成功の目印：上下の部品の間が広くなったり狭くなったりします。公開ページには枠や色の付かない空白として表示されます。

③ スマホの余白も確認する

上部のスマートフォン形のアイコンで切り替えます。パソコンで50pxの空きがちょうどよくても、スマホでは広すぎることがあります。

1

1. スマホ表示でスペーサーを選びます。
2. 「スペース」の設定対象がスマホになっていることを確認します。
3. 例として24pxへ調整します。
4. パソコン表示に戻り、パソコン側の間隔も確認します。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• 空白が大きすぎて、内容が離れすぎていない。
• スマホで無駄な縦長の空白になっていない。
• 同じ場所にスペーサーが何個も重なっていない。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順