ダウンロードグリッドブロックを使用すると、Easy Digital Downloadsストアの商品を、SeedProdページ上の魅力的なグリッドレイアウトで直接表示できます。このブロックを使用すると、表示するダウンロード、フィルタリング方法、各商品カードの外観を完全に制御できます。
すべてのデジタル商品をハイライトしたい場合でも、ID、タグ、またはカテゴリ別に特定の商品を特集したい場合でも、または表示する商品詳細を正確に制御したい場合でも、ダウンロードグリッドブロックを使用すれば、コードを書かずに洗練されたEDDストアフロントを簡単に構築できます。
ダウンロードグリッドブロックをページに追加する
次の手順に従って、SeedProdページにダウンロードグリッドブロックを追加します。
ステップ1：ブロックを追加する
ブロック > Easy Digital Downloadsの下にあるダウンロードグリッドブロックを、ページ内の目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ダウンロードグリッドブロックをクリックして設定を開きます。コンテンツタブで、ダウンロードの表示方法とグリッドに表示される商品を設定します。
コンテンツ:
- カラム: グリッドにダウンロードを表示するために使用するカラム数を設定します。
- ページネーション: ページネーションをオンまたはオフにします。有効にすると、ダウンロードは複数のページに分割されます。
- ダウンロード数: 表示するダウンロードの最大数を設定します。利用可能なすべてのダウンロードを表示するには、-1を使用します。
クエリ:
- ID: 公開済みの商品リストから選択して、表示する特定の商品を手動で選択するにはオンにします。
- タグ: タグでダウンロードをフィルタリングするにはオンにします。選択したタグに一致するダウンロードを含めるか除外するかを選択します。
- カテゴリ: カテゴリでダウンロードをフィルタリングするにはオンにします。選択したカテゴリのダウンロードを含めるか除外するかを選択します。
- 関連: タグとカテゴリの両方のフィルタがアクティブな場合、結合されたフィルタがOR（いずれかに一致）またはAND（両方に一致する必要がある）のロジックを使用するかどうかを設定します。
- 価格: 各ダウンロードカードに商品価格を表示または非表示にするにはオン/オフします。
- 抜粋: 各ダウンロードカードに短い説明を表示または非表示にするにはオン/オフします。
- フルコンテンツ: 各ダウンロードカードに完全な商品説明を表示または非表示にするにはオン/オフします。
- 購入ボタン: 各ダウンロードカードに購入ボタンを表示または非表示にするにはオン/オフします。
- サムネイル: 各ダウンロードカードに商品画像を表示または非表示にするにはオン/オフします。
- 並び替え順: ダウンロードの並び替え方法を選択します — 日付、ID、ランダム、またはタイトル。注: 並び替え順がランダムに設定されている場合、ページ間で同じ商品が繰り返されるのを防ぐため、ページネーションは無効になります。
- 順序: 並び替えの方向を設定します — ASC（昇順）またはDESC（降順）。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、ダウンロードグリッドブロックのすべての要素をブランドに合わせてスタイル設定できます。
スタイル:
- 配置: グリッドコンテンツの水平方向の配置を設定します — 左、中央、または右。
- タイトルタイポグラフィ: 商品タイトルのフォントファミリー、ウェイト、サイズ、行の高さ、文字間隔、テキスト変換をカスタマイズします。
- タイトルカラー: 商品タイトルのテキストの色を設定します。
- 説明タイポグラフィ: 商品説明または抜粋テキストのタイポグラフィをカスタマイズします。
- 説明カラー: 説明テキストの色を設定します。
- 価格タイポグラフィ: 表示価格のタイポグラフィをカスタマイズします。
- 価格カラー: 価格テキストの色を設定します。
ボタン:
- ボタンのスタイル: フラット、2D、ビンテージ、ゴースト、またはリンクのボタンの中から選択します。
- ボタンカラー: 購入ボタンの背景色を設定します。
- ボタンタイポグラフィ: ボタンラベルテキストのフォント設定をカスタマイズします。
- ボタンサイズ: 小、中、大、特大、超特大の中から選択します。
- 角丸: ボタンの角の丸みを0から100の間で調整します。
画像:
- シャドウ: 商品画像にドロップシャドウを追加します。なし、細線、小、中、大、特大、超特大、または下部ドロップシャドウから選択します。
- 画像枠線: 商品画像に枠線を追加します。枠線のスタイル（実線、点線、破線）、枠線の幅、枠線の色、角丸、画像余白を構成します。
ページネーション:
- ページネーションタイポグラフィ: ページネーションコントロールのフォント設定をカスタマイズします。
- ページカラー: ページネーションの現在のページインジケーターの色を設定します。
- リンクカラー: ページネーションナビゲーションリンクの色を設定します。
間隔：
- マージン: ダウンロードグリッドブロックの外側の余白を制御します（上、右、下、左）。
- パディング: ダウンロードグリッドブロックの内側の余白を調整します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID: SeedProdがカスタムスタイリングまたはJavaScriptターゲティングのために自動生成した、ダウンロードグリッドブロックの一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でダウンロードグリッドブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでダウンロードグリッドブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでダウンロードグリッドブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、ダウンロードグリッドブロックが表示領域に入ったときに再生されるアニメーション効果を選択します。
ステップ4：変更を保存
ダウンロードグリッドブロックの設定と外観のカスタマイズが完了したら、作業内容を保存してください。
ダウンロードグリッドブロックをページに追加しました！ダウンロードグリッドブロックは、レイアウト、フィルタリング、スタイリングを完全に制御して、Easy Digital Downloads製品を魅力的に表示するための強力な方法です。コンバージョンを促進し、ブランドに一致する製品グリッドを作成するために、さまざまな列数、クエリフィルター、デザインオプションを試してください。