Divi ShopModuleのモバイル列ブレークポイントを変更する方法

デフォルトでは、モバイルデバイスに切り替えるとすぐに、ショップモジュールは1列のレイアウトに変わります。 さて、各製品を個別に強調表示したい場合、それは素晴らしいことですが、最近のスマートフォンの画面サイズが大きくなっているため、ショップモジュールを使用するときに2つの製品を並べて表示できるようにすることができます。 今日のDiviチュートリアルでは、CSSを使用してショップモジュールのモバイルブレークポイントを変更し、最新のスマートフォンで2つの製品を並べて表示できるようにする方法を紹介します。 これは、将来オンラインショップを開設する場合に、手の届くところにある素晴らしいチュートリアルです。 デザインのJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

モバイル

デスクトップ

ショップページテンプレートを無料でダウンロード

無料のショップページテンプレートを入手するには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1. Diviテーマビルダーに移動し、新しいテンプレートを追加します

Diviテーマビルダーに移動し、新しいテンプレートを追加します

まず、DIViのテーマビルダーに移動して、新しいテンプレートを追加します。

ショップページでテンプレートを使用

この新しいテンプレートをWebサイトのショップページで使用してください。

• 使用場所：ショップ

テンプレート本体の作成を開始します

そして、ショップテンプレートのボディの作成を開始します。

2.テンプレート本体の作成を開始します

セクション設定

グラデーションの背景

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、次のグラデーションの背景を使用します。

• 色1：＃32ff3d
• 色2：＃29c4a9
• グラデーションタイプ：線形
• グラデーション方向：109度

背景画像

背景画像もアップロードします。 このチュートリアルで使用している背景画像は、この投稿の冒頭でダウンロードできたダウンロードフォルダーにあります。

• 背景画像サイズ：フィット

間隔

セクションの[デザイン]タブに移動し、それに応じて間隔の値を変更します。

• トップマージン：50px
• 左マージン：50px
• 右マージン：50px
• ボトムパディング：150px

国境

境界線の半径を追加して、セクションの設定を完了します。

• すべてのコーナー：20px

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

列にテキストモジュールを追加

H1コンテンツを追加する

選択したH1コンテンツを含むテキストモジュールを行の列に追加します。

H1テキスト設定

モジュールのH1テキスト設定を適宜変更します。

• 見出しフォント：プラタ
• 見出しテキストの配置：中央
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：80px（デスクトップ）、60px（タブレット）、40px（電話）

セクション＃2を追加

Zインデックス

前のセクションのすぐ下に別のセクションを追加します。 セクション設定を開き、zインデックスを増やします。

• Zインデックス：2

新しい行を追加

カラム構造

次に、次の列構造を使用して新しい行を追加します。

背景色

モジュールをまだ追加せずに、行設定を開いて背景色を追加します。

• 背景色：#ffffff

サイジング

モジュールの[デザイン]タブに移動し、次のようにサイズ設定を変更します。

• 幅：100％
• 最大幅：1380px

間隔

次に、さまざまな画面サイズにカスタム間隔値を追加します。

• トップマージン：200px
• トップパディング：50px（デスクトップ）、20px（タブレットと電話）
• 下部のパディング：50px（デスクトップ）、20px（タブレットと電話）
• 左パディング：100px（デスクトップ）、20px（タブレットと電話）
• 右パディング：100px（デスクトップ）、20px（タブレットと電話）

国境

また、行全体に境界線の半径を追加しています。

• すべてのコーナー：25px

ボックスシャドウ

微妙なボックスシャドウを追加して、行の設定を完了します。

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.1）

ショップモジュールを列に追加

コンテンツ

それでは、ショップモジュールを挿入します。 4列のレイアウトを使用しています。

• 列のレイアウト：4列

かぶせる

モジュールの[デザイン]タブに移動し、オーバーレイの色を変更します。

• オーバーレイアイコンの色：＃29c6a6
• オーバーレイの背景色：rgba（255,255,255,0.75）

画像

画像設定も変更してください。

• すべてのコーナー：10px

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.11）

タイトルテキスト設定

それに応じてタイトルテキスト設定を変更して続行します。

• タイトルフォント：プラタ
• タイトルテキストサイズ：30px（デスクトップ）、25px（タブレット）、20px（電話）

価格テキスト設定

次に、価格テキストの設定にいくつかの変更を加えます。

• 価格フォント：Montserrat
• 価格フォントの太さ：中
• 価格テキストサイズ：18px（デスクトップ）、16px（タブレット）、14px（電話）

間隔

上部のパディングを追加して、モジュール設定を完了します。

• トップパディング：50px

コードモジュールを列に追加

ショップモジュールの全体的な設計が完了したら、CSSを使用してショップモジュールのモバイル列ブレークポイントを変更します。 デザイン内のコードモジュールにCSSコードを追加します。 先に進み、ショップモジュールのすぐ下に新しいコードモジュールを追加します。

CSSコードを挿入

1列のモバイルブレークポイントを300px幅に縮小しています。 これは、最新のスマートフォンのほとんどが、1つではなく2つの製品を並べて表示することを意味します。 これを実現するために、CSSコードの次の行をコードモジュールに追加します。

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3.すべてのテーマビルダーの変更とプレビュー結果を保存します

ショップページのデザインを完了し、モバイルブレークポイントを変更するためのCSSコードを追加したら、テーマビルダーのすべての変更を保存して、ショップページで結果を表示できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

モバイル

デスクトップ

最終的な考え

この投稿では、ショップモジュールのモバイル列ブレークポイントを変更する方法を紹介しました。これにより、最近のほとんどのスマートフォンで2つの商品を並べて表示できます。 これは、必要なモバイルスクロールを減らし、訪問者に一度により多くの製品を表示するための優れた方法です。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。