スペーサーブロックを使用すると、SeedProdページ上の他のブロックの間に正確な量の垂直方向の空白を追加できます。個々のブロックに散らばったマージンとパディングの設定に頼るのではなく、スペーサーは、セクション、見出し、画像、またはその他のコンテンツ間の余白を制御するために、レイアウトのどこにでも配置できる専用の表示要素を提供します。
スペーサーブロックが特に便利なのは、デバイスごとの高さ制御です。デスクトップ、タブレット、モバイル画面ごとに個別に異なるスペーサーの高さを設定できるため、他のブロックの設定を損なうことなく、すべてのデバイスで意図的で洗練されたページスペーシングを実現できます。
スペーサーブロックをページに追加する
次の手順に従って、SeedProdページにスペーサーブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、間隔を空けたい要素の間にスペーサーブロックを目的のセクションにドラッグアンドドロップします。
ステップ2：スペーサーの高さを設定する
追加したら、スペーサーブロックをクリックして設定を開きます。スペーサーセクションには、デバイスごとのスライダーを備えた単一の高さコントロールがあり、各画面サイズに表示されるスペースの量を正確に定義できます。
- 高さ（デスクトップ）：スライダー（0〜500px）を使用してデスクトップ画面のスペーサーの高さを設定します。デスクトップアイコンをクリックして、この値を編集します。
- 高さ（タブレット）：スライダー（0〜500px）を使用してタブレット画面のスペーサーの高さを設定します。タブレットアイコンをクリックしてタブレット編集モードに切り替え、デスクトップとは独立して値を調整します。
- 高さ（モバイル）：スライダー（0〜500px）を使用してモバイル画面のスペーサーの高さを設定します。モバイルアイコンをクリックしてモバイル編集モードに切り替え、デスクトップおよびタブレットとは独立して値を調整します。
ステップ3：変更を保存する
スペーサーブロックの設定が完了したら、作業を保存してください。
これで、ページにスペーサーブロックが正常に追加されました。レイアウトで制御されたギャップが必要な場所で使用してください。ヒーローセクションと最初のコンテンツ行の間、見出しと画像の間に、またはブロック間のデフォルトの間隔がデザインに合わない場所に。デスクトップ、タブレット、モバイルで独立した高さの値を使用して、他のブロックの設定を変更せずに、すべてのデバイスでページの垂直リズムを微調整できます。