タブブロックを使用すると、1つのSeedProdページで複数の切り替え可能なパネルにコンテンツを整理して表示できます。すべての情報を縦に積み重ねる代わりに、タブを使用すると訪問者はセクション間を即座に移動でき、ページをすっきりと集中させ、読みやすく保つことができます。
このブロックは、水平および垂直のタブレイアウト、タブごとのアイコン、各パネルの豊富なテキストコンテンツ、およびタブの色、タイポグラフィ、境界線、パディングのすべてのスタイリングコントロールをサポートしています。事前に構築されたテンプレートを使用すると、ワンクリックで洗練された外観を適用でき、高度タブではすべての視覚的な詳細を細かく制御できます。
ページにタブブロックを追加する
次の手順に従って、SeedProdページにタブブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、タブブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、タブブロックをクリックして設定を開きます。コンテンツタブのタブセクションで、すべてのタブパネルを作成および管理できます。
- タブ名:各タブボタンに表示されるラベルを入力します。既存のタブ項目をクリックして展開し、名前、アイコン、コンテンツを編集します。
- アイコン:アイコンピッカーを使用して、各タブにオプションでアイコンを割り当てます。アイコンは、タブバーのタブラベルの横に表示されます。
- コンテンツ:各タブパネルの本文コンテンツを入力します。各タブには、独自の独立したコンテンツ領域があります。
- 新規アイテムを追加:このボタンをクリックして、ブロックに追加のタブパネルを追加します。
- 削除 /複製:各タブ項目には、それを削除するか、同じ設定とコンテンツでコピーを作成するためのオプションが含まれています。
- タブアイコンを非表示:このオプションを切り替えて、すべてのタブのアイコンを一度に表示または非表示にします。
- アイコンの色:カラーピッカーを使用して、すべてのタブアイコンの色を設定します。
- フォントサイズ:タブラベルのフォントサイズを調整します。
- 間隔:隣接するタブボタン間のギャップを設定します。
- 配置:タブバーの水平方向の配置を選択します — 左、中央、または右。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、ワンクリックでタブブロックに事前に構築されたビジュアルスタイルを適用できます。7つのプリセットデザインが利用可能で、最小限のデフォルトスタイルから、境界線、背景、アイコン処理を備えたより装飾的なオプションまであります。テンプレートを選択すると、ブロックの色、境界線、レイアウトが選択したデザインに合わせて即座に更新されます。
ステップ3：デザインをカスタマイズする
高度タブのスタイルセクションでは、タブバーとコンテンツパネルの両方の外観を完全に制御できます。
タブバーのスタイル:
- タブレイアウト:水平（タブが行に配置）と垂直（タブがコンテンツパネルの横の列にスタック）を切り替えます。
- タブタイポグラフィ:タブラベルのフォント、サイズ、太さ、スタイル、行の高さ、文字間隔、大文字/小文字を設定します。
- タブの色: 非アクティブなタブラベルのテキスト色を選択します。
- タブの背景色: 非アクティブなタブの背景色を設定します。
- アクティブなタブの色: 現在選択されているタブのテキスト色を設定します。
- アクティブなタブの背景: 現在選択されているタブの背景色を設定します。
- タブの角丸: 0～100のスライダーを使用して、タブボタンの角を丸めます。
- 境界線のスタイル: タブボタンの境界線のスタイルを選択します — 実線、点線、破線。
- 境界線の幅: タブボタンの各辺（上、右、下、左）の境界線の太さを設定します。
- 境界線の色: タブボタンの境界線の色を選択します。
- タブのパディング: 各タブボタン内の内側のスペース（上、右、下、左）を調整します。
コンテンツパネルのスタイル:
- コンテンツのタイポグラフィ: タブパネル本文のフォント、サイズ、太さ、スタイル、行間、文字間隔、大文字/小文字を設定します。
- コンテンツの背景: コンテンツパネル領域の背景色を設定します。
- テキストの色: コンテンツパネル内のテキスト色を設定します。
- コンテンツの角丸: 0～100のスライダーを使用して、コンテンツパネルボックスの角を丸めます。
- コンテンツの境界線のスタイル: コンテンツパネルの境界線のスタイルを選択します — 実線、点線、破線。
- コンテンツの境界線の色: コンテンツパネルの境界線の色を選択します。
- コンテンツの境界線の幅: コンテンツパネルの各辺（上、右、下、左）の境界線の太さを設定します。
- コンテンツのパディング: コンテンツパネル内の内側のスペースを調整します。
- テキストシャドウ: コンテンツパネルのテキストにテキストシャドウを追加します。サイズプリセットは「なし」から「特大」まであります。
高度な設定タブには、間隔（マージンとパディング）、カスタムCSS属性、デバイスの表示、アニメーションの表示に関する制御も用意されています。
ステップ4：変更を保存
タブブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
ページにタブブロックを追加しました！タブは、多くのコンテンツをコンパクトでユーザーフレンドリーな形式で表示するための強力な方法です。訪問者を長いスクロールページで圧倒することなく、関心を維持します。水平および垂直レイアウト、テンプレートスタイル、色の組み合わせを試して、デザインにシームレスにフィットするタブ付きセクションを作成してください。