スペーサーブロックを使用すると、SeedProdページ上の他のブロック間に正確な量の垂直方向の余白を追加できます。個々のブロックに散在するマージンやパディングの設定に頼る代わりに、スペーサーはレイアウト内の任意の位置に配置可能な専用の可視要素を提供し、セクション間、見出し間、画像間、その他のコンテンツ間の余白を制御します。
スペーサーブロックが特に有用なのは、デバイスごとの高さ制御機能です。デスクトップ、タブレット、モバイル画面ごとに異なるスペーサーの高さを個別に設定できるため、他のブロックの設定を損なうことなく、あらゆるデバイスで意図的で洗練されたページ間隔を実現できます。
ページへのスペーサーブロックの追加
SeedProdページにスペーサーブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン＞ブロックで、スペースを空けたい要素の間に配置したいページのセクションへスペーサーブロックをドラッグ＆ドロップします。
ステップ2：スペーサーの高さを設定する
追加後、スペーサーブロックをクリックして設定を開きます。スペーサーセクションには単一の「高さ」コントロールがあり、デバイスごとのスライダーで各画面サイズに表示されるスペースを正確に定義できます。
- 高さ（デスクトップ）：スライダーを使用してデスクトップ画面のスペーサーの高さを設定します（0～500px）。この値を編集するにはデスクトップアイコンをクリックしてください。
- 高さ（タブレット）：スライダーでタブレット画面用のスペーサーの高さを設定します（0～500px）。タブレットアイコンをクリックするとタブレット編集モードに切り替わり、デスクトップとは独立して値を調整できます。
- 高さ（モバイル）：スライダーでモバイル画面用のスペーサーの高さを設定します（0～500px）。モバイルアイコンをクリックするとモバイル編集モードに切り替わり、デスクトップやタブレットとは独立して値を調整できます。
ステップ3: 変更を保存する
スペーサーブロックの設定が完了したら、必ず作業内容を保存してください。
ページにスペーサーブロックを追加できました！レイアウトで調整可能な間隔が必要な箇所に活用してください——ヒーローセクションと最初のコンテンツ行の間、見出しと画像の間、ブロック間のデフォルト間隔がデザインに合わない場所などです。デスクトップ、タブレット、モバイルごとに独立した高さ値を設定できるため、他のブロックの設定を変更することなく、あらゆるデバイスでページの縦方向のリズムを微調整できます。