ビフォーアフター切り替えブロックを使用すると、SeedProdページでインタラクティブな画像比較を作成できます。このブロックは、2つの画像を並べて表示し、訪問者がドラッグしてビフォーアフターの状態を表示できるカスタマイズ可能なスライダーハンドルを備えており、魅力的な視覚比較体験を生み出します。
ビフォーアフター比較は、変化、製品の改善、デザインの変更、減量結果、家のリフォーム、写真編集の効果、または変化の影響を視覚的に示す必要があるあらゆるシナリオの提示に最適です。インタラクティブなスライダーにより、訪問者は自分のペースで違いを簡単に探索できます。
ビフォーアフター切り替えブロックをページに追加する
SeedProdページにビフォーアフター切り替えブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ビフォーアフター切り替えブロックをページの目的のセクションにドラッグアンドドロップします。
ビフォーアフター切り替えブロックは、デザイン > 詳細設定の下にあり、ページの任意のセクションにドラッグできます。
ステップ2：コンテンツ設定を構成する
追加したら、ビフォーアフター切り替えブロックをクリックして設定を開きます。コンテンツタブで、比較画像をアップロードし、スライダーの動作を設定できます。
画像:
- ビフォー画像: 新しい画像を選択をクリックして、比較の左側（または上側）に表示される「ビフォー」画像をアップロードまたは選択します
- 独自の画像を使用またはストック画像を使用: コンピューターから独自の画像を選択するか、ストック画像ライブラリから選択するかを選択します
- 画像ソース: 選択したビフォー画像のソースURLを表示します
- ビフォーラベル: ビフォー画像の上に表示されるカスタムテキストを入力します（例：「ビフォー」、「オリジナル」、「2023」）。これにより、訪問者は表示されているものを理解しやすくなります
- アフター画像: 新しい画像を選択をクリックして、比較の右側（または下側）に表示される「アフター」画像をアップロードまたは選択します
- 独自の画像を使用またはストック画像を使用: アフター画像用に、独自の画像を選択するか、ストックライブラリから選択するかを選択します
- 画像ソース: 選択したアフター画像のソースURLを表示します
- アフターラベル: アフター画像の上に表示されるカスタムテキストを入力します（例：「アフター」、「強化」、「2024」）
向き:
- スライダーの向き: 縦（スライダーが上下に移動）または横（スライダーが左右に移動）を選択します。横は並べて比較する場合に最も一般的です
- 配置: コンテナ内の比較ブロック全体の配置を設定します
- ホバー時に移動: 訪問者が比較の上にマウスカーソルを合わせたときに、スライダーが自動的に移動するように切り替えます。有効にすると、クリックやドラッグなしでスライダーがカーソルを追跡します
- オーバーレイカラー: 画像に半透明の色を重ねて、ユニークな視覚効果を出したり、ラベルを目立たせたりします
変更前と変更後の画像をアップロードし、ラベルを追加して、スライダーの向きと動作を設定します。
比較ハンドル:
- ハンドルの初期オフセット: ページ読み込み時にスライダーが開始される位置をパーセンテージで設定します（例: 50は中央、25は変更前の画像をより多く表示）
- ハンドルの色: スライダーハンドルと画像の間の区切り線の色を選択します
- ハンドルの太さ: 2つの画像を分離する区切り線の幅を調整します
- 円の幅: スライダーを移動するために訪問者がドラッグする円形ハンドルのサイズを制御します
- 円の半径: ハンドル円の丸みを調整します。値が大きいほど、より円形のハンドルになります
- 三角形のサイズ: ハンドルに表示される方向矢印のサイズを設定し、ドラッグする方向を示します
比較ハンドルの外観を、色、サイズ、開始位置を含めてカスタマイズします。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、Before After Toggleブロックの視覚的な外観をカスタマイズできます。
変更前/変更後ラベルのスタイル:
- ラベルのタイポグラフィ: フォントファミリー、サイズ、太さ、スタイルを含む、変更前および変更後ラベルのフォントプロパティを制御します
- ラベルの色: 画像に対してラベルが見えるように、変更前および変更後ラベルのテキスト色を設定します
- 背景色: ラベルの可読性を向上させるために、ラベルの後ろに背景色を追加します。特に画像が明るさによって異なる場合に有効です
間隔：
- マージン: Before After Toggleブロックの周囲の余白（上、右、下、左）を制御します。これにより、比較と周囲の要素の間にどれだけのスペースが表示されるかが決まります
- パディング: Before After Toggleブロックの内側の余白（上、右、下、左）を調整します。これにより、画像とブロックの端の間に十分なスペースが生まれます
属性:
- CSS ID: Before After Toggleブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例: data-comparison|before-after）
デバイス表示:
- デスクトップで非表示: デスクトップ画面でBefore After Toggleブロックを非表示にします
- タブレットで非表示: タブレットデバイスでBefore After Toggleブロックを非表示にします
- モバイルで非表示: モバイルデバイスでBefore After Toggleブロックを非表示にします
アニメーション効果:
- 表示アニメーション: 比較ブロックが表示領域に入ったときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、インタラクティブな比較が注目を集めます
高度な設定タブでは、ラベルのスタイリング、スペースの調整、デバイスの表示設定、アニメーションの設定オプションが提供されます。
ステップ4：変更を保存
Before After Toggleブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにBefore After Toggleブロックを正常に追加しました！このインタラクティブなブロックは、訪問者が自分のペースで2つの画像の差を探索できる、魅力的なビジュアル比較を作成します。ハンドルの色、スライダーの向き、ホバーエフェクトを試して、視聴者を魅了し、変革や改善を効果的に示す比較体験を作成してください。