コンテンツ切り替えブロックを使用すると、インタラクティブなトグルスイッチで2つの異なるテキストセクションを表示できます。このブロックは、ウェブサイトに複数の情報セットを便利かつ効果的に表示する方法を提供し、ユーザーが異なるテキストコンテンツエリアを簡単に切り替えられるようにします。
コンテンツ切り替えブロックを使用すると、比較表示を作成したり、代替の価格プランを表示したり、ビフォーアフターのシナリオを提示したり、あらゆる種類の切り替え可能なテキストコンテンツを提供したりできます。これにより、ページのスペースを最大限に活用しながら、すっきりとしたブラウジング体験が生まれます。
ページにコンテンツ切り替えブロックを追加する
SeedProdページにコンテンツ切り替えブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、コンテンツ切り替えブロックをページの目的のセクションにドラッグアンドドロップします。
ブロックパネルでコンテンツ切り替えブロックを見つけ、ページ上の目的の場所にドラッグします。
ステップ2：コンテンツ設定を構成する
追加したら、コンテンツ切り替えブロックをクリックして設定を開きます。コンテンツタブで、ユーザーが切り替える2つのテキストコンテンツエリアを設定できます。
コンテンツエリア1:
- 見出し1:最初のコンテンツエリアの上に表示される見出しテキストを入力します。このラベルは、ユーザーがどのコンテンツを表示しているかを理解するのに役立ちます。
- セクションコンテンツ:最初の切り替えエリアにカスタムテキストコンテンツ、サイトの既存コンテンツ、またはテンプレートパーツを表示するかどうかを選択します。
- コンテンツ1:トグルが最初の位置に設定されているときに表示されるテキストコンテンツを追加します。
コンテンツエリア2:
- 見出し2:2番目のコンテンツエリアの上に表示される見出しテキストを入力します。このラベルは、代替コンテンツオプションを説明します。
- セクションコンテンツ:2番目の切り替えエリアにカスタムテキストコンテンツ、サイトの既存コンテンツ、またはテンプレートパーツを表示するかどうかを選択します。
- コンテンツ2:トグルが2番目の位置に切り替えられたときに表示されるテキストコンテンツを追加します。
コンテンツタブで、両方の切り替えエリアの見出しとテキストコンテンツを設定します。
ステップ3：デザインをカスタマイズする
詳細タブでは、コンテンツ切り替えブロックの視覚的な外観をカスタマイズできます。
見出し/コンテンツ:
- ヘッダー1のタイポグラフィ:最初の見出しのフォントファミリー、サイズ、太さ、行の高さ、文字間隔をカスタマイズします。編集をクリックして詳細なタイポグラフィコントロールにアクセスします。
- ヘッダー2のタイポグラフィ:2番目の見出しのフォントファミリー、サイズ、太さ、行の高さ、文字間隔をカスタマイズします。編集をクリックして詳細なタイポグラフィコントロールにアクセスします。
- コンテンツ1のタイポグラフィ:最初のテキストコンテンツエリアのタイポグラフィ設定をカスタマイズします。編集をクリックして詳細なタイポグラフィコントロールにアクセスします。
- コンテンツ2のタイポグラフィ:2番目のテキストコンテンツエリアのタイポグラフィ設定をカスタマイズします。編集をクリックして詳細なタイポグラフィコントロールにアクセスします。
- 見出し1の色: 最初の見出しのテキストの色をページのデザイントに合わせます
- 見出し2の色: 2番目の見出しのテキストの色をページのデザイントに合わせます
- コンテンツ1の色: 最初のコンテンツエリアのテキストの色を設定します
- コンテンツ2の色: 2番目のコンテンツエリアのテキストの色を設定します
- 背景色: コンテンツ切り替えブロック全体の背景色を設定します
切り替え:
- 切り替えスタイル: トグルスイッチのビジュアルスタイルを選択します。オプションには、円形（丸いトグル）、正方形（四角いトグル）、ラベルボックス（ボックススタイルのテキストベースのトグル）があります
- 切り替えサイズ: トグルスイッチのサイズを選択します。オプションには、ラージ、ミディアム、スモール、ミニがあり、デザインのニーズに合わせて調整できます
- 最初の背景色: 最初のトグル位置の背景色を設定します（コンテンツエリア1がアクティブな場合）
- 2番目の背景色: 2番目のトグル位置の背景色を設定します（コンテンツエリア2がアクティブな場合）
- 切り替え色: トグルスイッチ要素自体の色を設定します
間隔：
- マージン: コンテンツ切り替えブロックの外側の間隔を制御します（上、右、下、左）。これにより、トグルと周囲の要素の間のスペースが決まります
- パディング: コンテンツ切り替えブロックの内側の間隔を調整します（上、右、下、左）。これにより、テキストコンテンツとブロックの端の間に余白ができます
属性:
- CSS ID: コンテンツ切り替えブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: トグルラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: data-section|comparison）
デバイス表示:
- デスクトップで非表示: デスクトップ画面でコンテンツ切り替えブロックを非表示にします
- タブレットで非表示: タブレットデバイスでコンテンツ切り替えブロックを非表示にします
- モバイルで非表示: モバイルデバイスでコンテンツ切り替えブロックを非表示にします
アニメーション効果:
- 表示アニメーション: コンテンツ切り替えがビューにスクロールされたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、インタラクティブなトグルに注目が集まり、視覚的な興味が生まれます
「高度な設定」タブで、タイポグラフィ、色、トグルスイッチの外観、間隔をカスタマイズします。
ステップ4：変更を保存
コンテンツ切り替えブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページにコンテンツ切り替えブロックを正常に追加しました！コンテンツ切り替えブロックは、ページを煩雑にすることなく、代替テキストコンテンツオプションを提示するためのインタラクティブな方法を提供することで、ユーザーエンゲージメントを高めます。さまざまなトグルスタイル、色、コンテンツの組み合わせを試して、視聴者に役立つ効果的な比較または情報表示を作成してください。