商品ギャラリー画像ブロックを使用すると、WooCommerceの商品ギャラリー画像をシングル商品テンプレートにシームレスに挿入できます。メイン画像とサムネイルを含む、商品の全画像ギャラリーを表示し、デザインに合わせてズームボタン、画像ボーダー、サムネイルボーダーをスタイル設定するためのコントロールを提供します。
このブロックは、シングル商品テンプレート内での使用専用に設計されています。開始する前に、WooCommerceがインストールされており、ギャラリー画像が割り当てられた公開済みの商品があることを確認してください。
商品ギャラリー画像ブロックをページに追加する
SeedProdシングル商品テンプレートに商品ギャラリー画像ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
WooCommerceテンプレートタグの下で、商品ギャラリー画像ブロックをシングル商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品ギャラリー画像ブロックをクリックして設定を開きます。コンテンツタブで、次のオプションが見つかります。
ズームボタン:
- 上部位置: 商品画像の上の位置からのズームボタンの垂直位置を設定します（ピクセル単位）。
- 右位置: 商品画像の右端からのズームボタンの水平位置を設定します（ピクセル単位）。
- フォントサイズ: ズームアイコンのサイズを設定します。
- アイコンの色: ズームアイコンの色を設定します。
- 背景色: ズームボタンの背景色を設定します。
- ボーダー半径: スライダーを使用してズームボタンの角の丸みを調整します。
画像ボーダー:
- 画像ボーダー半径: メイン商品の画像の角の丸みを設定します。
- 画像ボーダー幅: メイン商品の画像の各辺のボーダーの太さを設定します。
サムネイルボーダー:
- サムネイルボーダー半径: メイン商品の画像の下にあるサムネイル画像の角の丸みを設定します。
- サムネイルボーダー幅: サムネイル画像の各辺のボーダーの太さを設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、商品ギャラリー画像ブロックの外観をさらにカスタマイズできます。
境界線:
- ボーダースタイル: ブロックラッパーのボーダースタイルを設定します — 実線、点線、または破線。
- ボーダーの色: ブロックラッパーのボーダーの色を設定します。
- ボーダー幅: ブロックラッパーの各辺のボーダーの太さを設定します。
- ボーダー半径: ブロックラッパーの角の丸みを設定します。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
商品ギャラリー画像ブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
製品ギャラリー画像ブロックをシングル製品テンプレートに正常に追加しました！ズームボタンの位置、画像境界線のスタイル、サムネイル境界線の表示を制御できるため、顧客に販売するすべてのものを包括的かつ視覚的に魅力的なビューを提供する、洗練された製品ギャラリーを構築できます。