特定の製品のランディング ページを作成するときは、それが新規発売であろうと準備中の販売であろうと、ある時点でショップ モジュールを使用する可能性が高くなります。 Divi Shop モジュールを使用すると、プラグインから製品を動的に抽出できます WooCommerce ディビの組み込みオプションを使用してスタイルを設定します。 

現在、デフォルトで、shopモジュールにはいくつかの列構造が付属しており、これらはすべて、小さい画面サイズでXNUMXつの列に変換されます。 これは、表示する製品が多いほど、ランディングページの次の部分に移動するために必要な垂直スクロールが増えることを意味します。

現代の Web デザインでは、縦スクロールを制限し、好みに応じて要素を表示するためによく使用される手法です。 訪問者 磁気カードを使用することです。 このチュートリアルでは、プラグインを使用せずに、小さな画面サイズで Divi Shop モジュールを動的な商品カードに変換する方法を紹介します。 

製品セクションのさまざまな要素を準備し、少量の CSS コードを使用してスワイプ効果を有効にすることから始めます。 これは、ランディング ページでさまざまな商品をアピールするのに最適な方法です。 訪問者

可能な結果

チュートリアルに入る前に、結果を見てみましょう。 タブレットとモバイルでのみ製品の磁気カードをアクティブにします。 デスクトップでは、Shopモジュールで決定した列構造を保持します。

ディビ製品モジュールショップアニメーション

1. WooCommerceと製品ページを構成する

このチュートリアルのDivi部分に入る前に、プラグインが重要です WooCommerce にインストールされ、アクティブ化されています サイトのWeb. まだ行っていない場合は、ショップ モジュールに表示する商品の数に応じて、複数の商品を追加します。

woocommerce製品を作成する

2.新しいページを作成し、ひな形のページレイアウトをダウンロードします

新しいページを作成する

製品を配置したら、WordPressバックエンドに新しいページを追加します。 ページにタイトルを付け、ページを公開して、Divi VisualBuilderをアクティブにします。

diviページを作成する
新しいdiviページを作成する

ランディングページレイアウトをダウンロードする

新しいページに入ったら、プリセットレイアウトに移動し、文房具のランディングページレイアウトをダウンロードします。 この特定のレイアウトを使用しますが、このレイアウト内にストアモジュールを追加または配置する限り、他の任意のレイアウトを自由に使用できます。

diviレイアウトを選択してください

3.ショップセクションを変更する

Shopモジュールのセクションを見つけます

ステーショナリーのホームページレイアウトを使用して作成した新しいページまで下にスクロールすると、ショップモジュールのあるセクションが表示されます。 このセクションは、このチュートリアルの次のステップ全体で使用します。

ショップモジュールを探す

ライン設定

レスポンシブサイジング

Shopモジュールを含む行の行設定を開くことから始めます。 前述のように、デスクトップでも同じデザインを維持し、小さい画面サイズでのみ製品のスワイプカードをアクティブにします。 

簡単なエクスペリエンスを作成するために、サイズ設定の幅を変更して、行が画面の左側と右側に触れるようにします。

  • カスタムのガター幅を使用:1
  • 幅:80%(デスクトップ)、100%(タブレットと電話)
応答性の高い設計変更

可視

また、表示設定を非表示に設定することで、行コンテナーを超えないようにします。

  • 水平オーバーフロー:非表示
  • 垂直オーバーフロー:非表示
Divi可視性構成

ショップモジュール設定

製品の数とお好みのオフィスコラム構造を選択してください

次に、Shopモジュールの設定を開きます。 CSSコードに加える変更(後で追加します)は、表示する製品の数によって異なります。 

まず、8つの製品を含むショップモジュールを製品カードに変換する方法を紹介します。 デスクトップに必要な任意の列レイアウトを選択できます。

  • 製品の数:8
  • 列のレイアウト:4列
diviカラムの設計を変更する

レスポンシブサイジング

ショップモジュールのサイズを大きくするために、[デザイン]タブのサイズ設定パラメーターを変更します。 これはタブレットと電話に対してのみ行っていることに注意してください。

  • 幅:100%(デスクトップ)、250%(タブレットと電話)
  • 最大幅:100%(デスク)、250%(タブレットと電話)
応答性の高い設計構成

CSSクラス

また、ストアモジュールにCSSクラスを追加します。 後でCSSコードを追加すると、このCSSクラスのみを運ぶShopモジュールを変換できます。 つまり、別のShopモジュールを通常の状態で表示する場合は、このCSSクラスを省略するとそうすることができます。

  • CSSクラス:product-swipe-cards
属性cssモジュールストアdiviを変更します

反応性オーバーフロー

さまざまな画面サイズで表示設定を変更することにより、ライン設定を補足します。 設定でわかるように、スクロール効果は小さい画面サイズでのみ発生するようにします。

  • 水平オーバーフロー:非表示(デスク)、スクロール(タブレットと電話)
  • 垂直オーバーフロー:非表示
オーバーフロー構成

Shopモジュールの下にコードモジュールを追加する

Shopモジュールを変更したら、すぐ下にコードモジュールを追加できます。

diviショップモジュールの下にコードモジュールを追加します

モジュールにCSSコードを追加する

次のCSSコードは、8つの製品のストアモジュールを自動的に反応型磁気カードに変換します。

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

cssdiviコードを追加します

異なる製品アカウントを照合する

これで、ストアモジュールに追加する製品の数を減らしたり増やしたりする場合、コードは4か所でわずかに変更されます。 これらの場所は両方とも、目的の結果に一致するように手動で変更する必要があります。 たとえば、ショップモジュールの商品数を「XNUMX」に変更してみましょう。

  • 製品の数:4
別の製品アカウントに一致する

コードに戻ったら、8つの変更を加える必要があります。 まず、グリッドテンプレートの列を変更する必要があります。 4の代わりにXNUMX(製品の数と同じ数)を使用します。 また、これらの製品が製品シートに占める割合のサイズを増やしています(製品が多いほど、スペースが少なくなります)。

grid-template-columns:repeat(4、14%)!重要;

次に、製品が配置されるコンテナの幅も変更します。 4つの製品の場合、これは150%に相当します。 これらの値は固定されていません。グリッドモデルの列とコンテナの幅の間の調和を再生して見つけることによって取得されます。 

適切なバランスを見つけるには、Visual Builder内のモバイルビューに切り替え、それらの変更の結果を表示しながら値を慎重に調整します。

width: 150%!important;

追加のdivicsコードを追加する

巻物にスナップを追加

スワイプ カードのデザインでユーザー エクスペリエンスをさらに向上させたい場合は、スクロール スナップを追加することもできます。 スクロール キャプチャにより、 訪問者 新しい商品の先頭に固定してスクロールします。

 これは、スキャンが正確である必要がないことを意味します。スクロールスラムはある時点で引き継ぎ、サイドスクロールメカニズム内の位置を調整して表示します。 

製品のスワイプカードでスクロールキャプチャを有効にするには、CSSコードの各製品にCSSコードの行を個別に追加します(以下の印刷画面を参照)。

scroll-snap-align:start

また、次のCSSコード行を追加して、shopモジュールのスクロールキャプチャをアクティブにします。

scroll-snap-type:x必須

cssコードをカスタマイズする

ワークショップモジュールを再利用して、他のカテゴリを表示します

行全体をXNUMX回クローンする

磁気カードの最初のセットを完了すると、行全体を一度に複製できます。

diviワークショップモジュールを再利用する

重複する行のコードモジュールを削除

ストアモジュールに前のクラスと同じCSSクラスが含まれている限り、コードモジュールで十分です。 先に進み、重複行のコードモジュールを削除します。

diviコードモジュールを複製します

複製した行を好きなだけ複製します

ランディングページに表示する磁気カードのセット数に応じて、必要な回数だけ複製行を複製します。

モジュールを必要なだけクローンします
複製されたdiviモジュール

4.モバイルデバイスでページの変更を保存して結果を表示する

製品のスワイプカードの追加が完了したら、Visual Builderを終了する前にページを保存して、完了していることを確認してください。

モバイルデバイスでのデモプレビュー

調査

すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。

ディビ製品モジュールショップアニメーション

最終的な考え

この記事では、統合されたDiviShopモジュールを小さな画面サイズで製品の磁気カードに変換する方法を説明しました。 デスクトップでは、Shopモジュールに割り当てられた元の列構造を保持しています。 

製品スワイプマップを使用すると、垂直スクロールの訪問者を圧倒することなく、水平スワイプメカニズムに無限の製品を追加できます。

これは、ユーザーの行動に焦点を当て、小さな画面でさまざまな要素に簡単にアクセスできるようにするため、最新のWebサイトデザインでよく使用される傾向です。

 これらの製品シートはどのページでも使用できますが、作成する製品のランディングページには特に便利です。 レイアウトJSONファイルを無料でダウンロードすることもできました! 

ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。