特定の製品のランディング ページを作成するときは、それが新規発売であろうと準備中の販売であろうと、ある時点でショップ モジュールを使用する可能性が高くなります。 Divi Shop モジュールを使用すると、プラグインから製品を動的に抽出できます WooCommerce ディビの組み込みオプションを使用してスタイルを設定します。
現在、デフォルトで、shopモジュールにはいくつかの列構造が付属しており、これらはすべて、小さい画面サイズでXNUMXつの列に変換されます。 これは、表示する製品が多いほど、ランディングページの次の部分に移動するために必要な垂直スクロールが増えることを意味します。
現代の Web デザインでは、縦スクロールを制限し、好みに応じて要素を表示するためによく使用される手法です。 訪問者 磁気カードを使用することです。 このチュートリアルでは、プラグインを使用せずに、小さな画面サイズで Divi Shop モジュールを動的な商品カードに変換する方法を紹介します。
製品セクションのさまざまな要素を準備し、少量の CSS コードを使用してスワイプ効果を有効にすることから始めます。 これは、ランディング ページでさまざまな商品をアピールするのに最適な方法です。 訪問者.
可能な結果
チュートリアルに入る前に、結果を見てみましょう。 タブレットとモバイルでのみ製品の磁気カードをアクティブにします。 デスクトップでは、Shopモジュールで決定した列構造を保持します。
1. WooCommerceと製品ページを構成する
このチュートリアルのDivi部分に入る前に、プラグインが重要です WooCommerce にインストールされ、アクティブ化されています サイトのWeb. まだ行っていない場合は、ショップ モジュールに表示する商品の数に応じて、複数の商品を追加します。
2.新しいページを作成し、ひな形のページレイアウトをダウンロードします
新しいページを作成する
製品を配置したら、WordPressバックエンドに新しいページを追加します。 ページにタイトルを付け、ページを公開して、Divi VisualBuilderをアクティブにします。
ランディングページレイアウトをダウンロードする
新しいページに入ったら、プリセットレイアウトに移動し、文房具のランディングページレイアウトをダウンロードします。 この特定のレイアウトを使用しますが、このレイアウト内にストアモジュールを追加または配置する限り、他の任意のレイアウトを自由に使用できます。
3.ショップセクションを変更する
Shopモジュールのセクションを見つけます
ステーショナリーのホームページレイアウトを使用して作成した新しいページまで下にスクロールすると、ショップモジュールのあるセクションが表示されます。 このセクションは、このチュートリアルの次のステップ全体で使用します。
ライン設定
レスポンシブサイジング
Shopモジュールを含む行の行設定を開くことから始めます。 前述のように、デスクトップでも同じデザインを維持し、小さい画面サイズでのみ製品のスワイプカードをアクティブにします。
簡単なエクスペリエンスを作成するために、サイズ設定の幅を変更して、行が画面の左側と右側に触れるようにします。
- カスタムのガター幅を使用:1
- 幅:80%(デスクトップ)、100%(タブレットと電話)
可視
また、表示設定を非表示に設定することで、行コンテナーを超えないようにします。
- 水平オーバーフロー:非表示
- 垂直オーバーフロー:非表示
ショップモジュール設定
製品の数とお好みのオフィスコラム構造を選択してください
次に、Shopモジュールの設定を開きます。 CSSコードに加える変更(後で追加します)は、表示する製品の数によって異なります。
まず、8つの製品を含むショップモジュールを製品カードに変換する方法を紹介します。 デスクトップに必要な任意の列レイアウトを選択できます。
- 製品の数:8
- 列のレイアウト:4列
レスポンシブサイジング
ショップモジュールのサイズを大きくするために、[デザイン]タブのサイズ設定パラメーターを変更します。 これはタブレットと電話に対してのみ行っていることに注意してください。
- 幅:100%(デスクトップ)、250%(タブレットと電話)
- 最大幅:100%(デスク)、250%(タブレットと電話)
CSSクラス
また、ストアモジュールにCSSクラスを追加します。 後でCSSコードを追加すると、このCSSクラスのみを運ぶShopモジュールを変換できます。 つまり、別のShopモジュールを通常の状態で表示する場合は、このCSSクラスを省略するとそうすることができます。
- CSSクラス:product-swipe-cards
反応性オーバーフロー
さまざまな画面サイズで表示設定を変更することにより、ライン設定を補足します。 設定でわかるように、スクロール効果は小さい画面サイズでのみ発生するようにします。
- 水平オーバーフロー:非表示(デスク)、スクロール(タブレットと電話)
- 垂直オーバーフロー:非表示
Shopモジュールの下にコードモジュールを追加する
Shopモジュールを変更したら、すぐ下にコードモジュールを追加できます。
モジュールに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>
異なる製品アカウントを照合する
これで、ストアモジュールに追加する製品の数を減らしたり増やしたりする場合、コードは4か所でわずかに変更されます。 これらの場所は両方とも、目的の結果に一致するように手動で変更する必要があります。 たとえば、ショップモジュールの商品数を「XNUMX」に変更してみましょう。
- 製品の数:4
コードに戻ったら、8つの変更を加える必要があります。 まず、グリッドテンプレートの列を変更する必要があります。 4の代わりにXNUMX(製品の数と同じ数)を使用します。 また、これらの製品が製品シートに占める割合のサイズを増やしています(製品が多いほど、スペースが少なくなります)。
grid-template-columns:repeat(4、14%)!重要;
次に、製品が配置されるコンテナの幅も変更します。 4つの製品の場合、これは150%に相当します。 これらの値は固定されていません。グリッドモデルの列とコンテナの幅の間の調和を再生して見つけることによって取得されます。
適切なバランスを見つけるには、Visual Builder内のモバイルビューに切り替え、それらの変更の結果を表示しながら値を慎重に調整します。
width: 150%
!important;
巻物にスナップを追加
スワイプ カードのデザインでユーザー エクスペリエンスをさらに向上させたい場合は、スクロール スナップを追加することもできます。 スクロール キャプチャにより、 訪問者 新しい商品の先頭に固定してスクロールします。
これは、スキャンが正確である必要がないことを意味します。スクロールスラムはある時点で引き継ぎ、サイドスクロールメカニズム内の位置を調整して表示します。
製品のスワイプカードでスクロールキャプチャを有効にするには、CSSコードの各製品にCSSコードの行を個別に追加します(以下の印刷画面を参照)。
scroll-snap-align:start
また、次のCSSコード行を追加して、shopモジュールのスクロールキャプチャをアクティブにします。
scroll-snap-type:x必須
ワークショップモジュールを再利用して、他のカテゴリを表示します
行全体をXNUMX回クローンする
磁気カードの最初のセットを完了すると、行全体を一度に複製できます。
重複する行のコードモジュールを削除
ストアモジュールに前のクラスと同じCSSクラスが含まれている限り、コードモジュールで十分です。 先に進み、重複行のコードモジュールを削除します。
複製した行を好きなだけ複製します
ランディングページに表示する磁気カードのセット数に応じて、必要な回数だけ複製行を複製します。
4.モバイルデバイスでページの変更を保存して結果を表示する
製品のスワイプカードの追加が完了したら、Visual Builderを終了する前にページを保存して、完了していることを確認してください。
調査
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
最終的な考え
この記事では、統合されたDiviShopモジュールを小さな画面サイズで製品の磁気カードに変換する方法を説明しました。 デスクトップでは、Shopモジュールに割り当てられた元の列構造を保持しています。
製品スワイプマップを使用すると、垂直スクロールの訪問者を圧倒することなく、水平スワイプメカニズムに無限の製品を追加できます。
これは、ユーザーの行動に焦点を当て、小さな画面でさまざまな要素に簡単にアクセスできるようにするため、最新のWebサイトデザインでよく使用される傾向です。
これらの製品シートはどのページでも使用できますが、作成する製品のランディングページには特に便利です。 レイアウトJSONファイルを無料でダウンロードすることもできました!
ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。