アコーディオンブロックを使用すると、SeedProdのページに展開および折りたたみ可能なテキストセクションを追加できます。このブロックは、大量のコンテンツを、訪問者が自分のペースで探索できるコンパクトでユーザーフレンドリーな形式で整理するのに役立ちます。
アコーディオンブロックは、FAQ、機能リスト、製品仕様、利用規約、または訪問者に大量のテキストで圧倒することなく情報を明確に提示したいコンテンツに最適です。ユーザーが必要な情報のみをクリックして表示できるようにすることで、よりクリーンで魅力的なページエクスペリエンスを作成できます。
ページにアコーディオンブロックを追加する
次の手順に従って、SeedProdページにアコーディオンブロックを追加します。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、アコーディオンブロックをページの目的のセクションにドラッグアンドドロップします。
アコーディオンブロックはブロックパネルに表示され、ページ内の任意のセクションまたは列にドラッグできます。
ステップ2：コンテンツ設定を構成する
追加したら、アコーディオンブロックをクリックして設定を開きます。コンテンツタブで、アコーディオンアイテムを管理し、その外観をカスタマイズできます。
アコーディオンアイテム:
- アコーディオン 1, アコーディオン 2 など: 各アコーディオンアイテムをクリックして、タイトルとコンテンツを編集します。各アイテムは、ユーザーが展開または折りたたむことができる折りたたみ可能なセクションを表します。
- 新規アイテムを追加: このボタンをクリックして、アコーディオンセクションをブロックに追加します。コンテンツを効果的に整理するために必要なだけアイテムを追加できます。
タイポグラフィとスペーシング:
- フォントサイズ: アコーディオンコンテンツ内のテキストのサイズを調整して、デザインの好みに合わせます。
- 間隔: アコーディオンアイテム間の垂直方向の間隔を制御します（デフォルトは24ピクセル）。より多くの余白が必要な場合はこの値を大きくするか、よりコンパクトなレイアウトが必要な場合は小さくします。
アイコンのカスタマイズ:
- アイコン配置: アコーディオンタイトルの相対的な展開/折りたたみアイコンの表示位置を選択します（通常は左揃えまたは右揃え）。
- 折りたたみアイコン: アコーディオンセクションが折りたたまれたときに表示されるアイコンを選択します。これにより、ユーザーは展開できるセクションを識別できます。
- 折りたたみアイコンの色: アコーディオンが折りたたまれた状態のアイコンの色を選択します。
- 展開アイコン: アコーディオンセクションが展開されたときに表示されるアイコンを選択し、セクションの状態に関する視覚的なフィードバックを提供します。
- 展開アイコンの色: アコーディオンが展開された状態のアイコンの色を選択します。
コンテンツタブでは、アコーディオンアイテムの管理、タイポグラフィの調整、スペーシングの制御、展開/折りたたみアイコンのカスタマイズオプションが提供されます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、アコーディオンブロックの視覚的な外観をカスタマイズできます。
スタイル:
- タイポグラフィ: アコーディオンコンテンツのフォントファミリー、太さ、スタイル、その他のテキストプロパティを微調整します。
- テキストの色: アコーディオンコンテンツセクション内のテキストの色を設定します
- ヘッダーのタイポグラフィ: アコーディオンのタイトル/ヘッダーのフォントプロパティを制御します
- ヘッダーの色: アコーディオンヘッダーが閉じている状態のときの色の選択
- ヘッダー展開時の色: セクションが展開されたときのヘッダーの色を変更し、明確な視覚的フィードバックを提供します
- 背景色: アコーディオンセクションに背景色を追加して、視覚的な分離を改善します
- 区切り線の色: アコーディオンアイテムを区切る線の色を選択します
- テキストシャドウ: アコーディオンテキストに影の効果を追加して、奥行きと読みやすさを向上させます
- シャドウ: アコーディオンブロック全体または個々のアイテムに影の効果を適用します
間隔：
- マージン: アコーディオンブロックの外側のスペースを制御します（上、右、下、左）。これにより、アコーディオンと周囲の要素の間のスペースが決まります
- パディング: アコーディオンセクションの内側のスペースを調整します（上、右、下、左）。これにより、コンテンツとアコーディオンの境界線の間に余白ができます
属性:
- CSS ID: アコーディオンブロックの一意の自動生成IDを表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: アコーディオンラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式で入力します: attribute-name|value (例: aria-label|FAQセクション)
デバイス表示:
- デスクトップで非表示: デスクトップ画面でアコーディオンブロックを非表示にします
- タブレットで非表示: タブレットデバイスでアコーディオンブロックを非表示にします
- モバイルで非表示: モバイルデバイスでアコーディオンブロックを非表示にします
アニメーション効果:
- 表示アニメーション: アコーディオンがビューにスクロールされたときに再生されるさまざまなアニメーション効果から選択します。これにより、視覚的な興味を引き、コンテンツに注意を向けさせます
「高度な設定」タブでは、タイポグラフィ、色、スペーシング、視覚効果など、ブランドに合わせて豊富なスタイリングオプションを提供します。
ステップ4：変更を保存
アコーディオンブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
アコーディオンブロックをページに追加しました！この汎用性の高いブロックは、大量の情報を、訪問者を圧倒することなくエンゲージメントを促す、クリーンでユーザーフレンドリーな形式で表示するのに役立ちます。ヘッダーの色、アイコンのスタイル、スペーシングオプションを様々に試して、ブランドに一致し、オーディエンスに役立つアコーディオンを作成してください。