如何更改Divi Shop模塊的移動列斷點

已發表: 2020-01-24

默認情況下，一旦您切換到移動設備，商店模塊就會變成單列佈局。 現在，如果您希望單獨突出顯示每個產品，那很好，但是隨著如今智能手機屏幕尺寸的增加，您可能希望在使用 Shop Module 時允許兩個產品彼此相鄰顯示。 在今天的 Divi 教程中，我們將向您展示如何使用 CSS 更改商店模塊的移動斷點，從而允許兩種產品在大多數現代智能手機上並排顯示。 這是一個很棒的教程，如果您將來要建立在線商店，就可以使用它！ 您還可以免費下載設計的 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

移動的

商店模塊移動斷點

桌面

商店模塊移動斷點

免費下載商店頁面模板

要使用免費商店頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1.轉到Divi Theme Builder並添加新模板

轉到 Divi 主題生成器並添加新模板

首先轉到 DIvi 的 Theme Builder 並添加一個新模板。

商店模塊移動斷點

在商店頁面上使用模板

在您網站的商店頁面上使用這個新模板。

  • 用於：商店

商店模塊移動斷點

開始構建模板主體

並開始構建商店模板的主體。

商店模塊移動斷點

2. 開始構建模板主體

部分設置

漸變背景

進入模板編輯器後，您會注意到一個部分。 打開該部分並為其使用以下漸變背景：

  • 顏色 1：#32ff3d
  • 顏色 2：#29c4a9
  • 漸變類型：線性
  • 梯度方向：109deg

商店模塊移動斷點

背景圖片

同時上傳背景圖片。 您可以在本文開頭下載的下載文件夾中找到我們在本教程中使用的背景圖像。

  • 背景圖片尺寸：適合

商店模塊移動斷點

間距

轉到該部分的設計選項卡並相應地修改間距值：

  • 上邊距：50px
  • 左邊距：50px
  • 右邊距：50px
  • 底部填充：150px

商店模塊移動斷點

邊界

通過添加一些邊框半徑來完成部分設置。

  • 所有角落：20px

商店模塊移動斷點

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

商店模塊移動斷點

將文本模塊添加到列

添加H1內容

使用您選擇的一些 H1 內容將文本模塊添加到行的列。

商店模塊移動斷點

H1 文本設置

相應地更改模塊的 H1 文本設置：

  • 標題字體：Prata
  • 標題文本對齊方式：居中
  • 標題文字顏色：#ffffff
  • 標題文字大小：80 像素（桌面）、60 像素（平板電腦）、40 像素（手機）

商店模塊移動斷點

添加第 2 節

Z索引

在上一節的正下方添加另一節。 打開部分設置並增加 z 索引。

  • Z指數：2

商店模塊移動斷點

添加新行

列結構

然後，使用以下列結構添加新行：

商店模塊移動斷點

背景顏色

尚未添加任何模塊，打開行設置並添加背景顏色。

  • 背景顏色：#ffffff

商店模塊移動斷點

漿紗

轉到模塊的設計選項卡並按如下方式修改大小設置：

  • 寬度：100%
  • 最大寬度：1380px

商店模塊移動斷點

間距

然後，在不同的屏幕尺寸中添加一些自定義間距值。

  • 上邊距：200px
  • 頂部填充：50 像素（桌面）、20 像素（平板電腦和手機）
  • 底部填充：50px（桌面），20px（平板電腦和手機）
  • 左填充：100px（桌面），20px（平板電腦和手機）
  • 右內邊距：100 像素（桌面）、20 像素（平板電腦和手機）

商店模塊移動斷點

邊界

我們還為整行添加了一些邊框半徑。

  • 所有角：25px

商店模塊移動斷點

盒子陰影

通過添加微妙的框陰影來完成行設置。

  • 框陰影模糊強度：50px
  • 陰影顏色：rgba(0,0,0,0.1)

商店模塊移動斷點

將商店模塊添加到列

內容

現在，是時候插入我們的 Shop 模塊了。 我們使用的是 4 列佈局。

  • 列佈局：4 列

商店模塊移動斷點

覆蓋

轉到模塊的設計選項卡並更改覆蓋顏色。

  • 疊加圖標顏色：#29c6a6
  • 疊加背景顏色：rgba(255,255,255,0.75)

商店模塊移動斷點

圖片

也更改圖像設置。

  • 所有角：10px

商店模塊移動斷點

  • 框陰影模糊強度：50px
  • 陰影顏色：rgba(0,0,0,0.11)

商店模塊移動斷點

標題文字設置

繼續相應地修改標題文本設置：

  • 標題字體：普拉塔
  • 標題文字大小：30 像素（桌面）、25 像素（平板電腦）、20 像素（手機）

商店模塊移動斷點

價格文本設置

接下來，對價格文本設置進行一些更改。

  • 價格字體：蒙特塞拉特
  • 價格字體重量：中等
  • 價格文字大小：18px（桌面）、16px（平板電腦）、14px（手機）

商店模塊移動斷點

間距

通過添加一些頂部填充來完成模塊設置。

  • 頂部填充：50px

商店模塊移動斷點

將代碼模塊添加到列

完成整個 Shop Module 設計後，就可以使用 CSS 修改 Shop Module 移動列斷點了。 我們將把 CSS 代碼添加到我們設計中的代碼模塊中。 繼續並在商店模塊正下方添加一個新的代碼模塊。

商店模塊移動斷點

插入 CSS 代碼

我們將一列移動斷點減少到 300 像素寬度。 這意味著大多數現代智能手機將顯示兩種產品並排顯示，而不是一種。 為了實現這一點，我們將向代碼模塊添加以下 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 代碼以更改移動斷點後，您可以保存所有 Theme Builder 更改並在您的商店頁面上查看結果！

商店模塊移動斷點

商店模塊移動斷點

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

移動的

商店模塊移動斷點

桌面

商店模塊移動斷點

最後的想法

在這篇文章中，我們向您展示瞭如何更改商店模塊的移動列斷點，這使您可以在當今大多數現代智能手機上顯示彼此相鄰的兩種產品。 這是減少所需的移動滾動並同時向訪問者展示更多產品的絕佳方式。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。