如何使用 Divi 的 WooCommerce 模塊創建乾淨大膽的產品頁面（免費下載！）

大膽的產品頁面有一種特殊的方式來吸引訪問者的注意力。 通過 Divi 的新 WooCommerce 模塊更新，您可以快速將舊產品頁面變成您和您的訪問者都會喜歡的干淨大膽的頁面。 在今天的教程中，我們將從頭開始重新創建一個粗體的產品頁面，您也可以免費下載 JSON 文件！ 本教程將展示 Divi 的新 WooCommerce 模塊的多功能性，以及如何立即創建一個高度專業的電子商務網站。

讓我們開始吧！

預覽

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

免費下載乾淨大膽的產品頁面佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

1. 添加/打開 WooCommerce 產品

產品詳情

打開現有產品或創建新產品。 如果您想獲得與本文預覽中顯示的完全相同的結果，請確保添加以下產品詳細信息：

• 標題
• 簡短的介紹
• 詳細描述
• 類別
• 特色圖片
• 價錢

啟用 Divi Builder 並修改產品頁面設置

完成產品詳細信息後，啟用 Divi 並將頁面佈局更改為“全角”。

切換到 Visual Builder

繼續切換到 Visual Builder。

刪除頁面上的原始產品部分

在那裡，您會看到原始產品頁面信息被合併到一個部分中。 我們將從頭開始重新創建我們乾淨大膽的設計，因此請隨時刪除此部分。

2. 使用 Divi 的 Visual Builder 創建乾淨和大膽的產品頁面

添加常規部分 #1

間距

是時候開始創建我們大膽的產品頁面了！ 添加一個新的常規部分並更改該部分的間距設置。

• 頂部填充：200px
• 底部填充：0px

溢出

要確保沒有任何內容超出部分容器，並且頁面上不會發生水平滾動，請在可見性設置中隱藏部分的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加行

列結構

繼續使用以下列結構添加新行：

背景顏色

在不添加任何模塊的情況下，打開行設置並更改行的背景顏色。

• 背景顏色：#f4f4f4

漿紗

也修改行的最大寬度。

• 最大寬度：1000px

間距

然後，轉到間距設置並添加一些自定義的頂部和底部填充。

• 頂部填充：150px
• 底部填充：150px

邊界

我們也在行的左上角和右上角添加“50px”邊框半徑。

溢出

通過使溢出可見來完成行的設置。

• 水平溢出：可見
• 垂直溢出：可見

將 Woo 麵包屑模塊添加到列

動態內容

是時候開始添加模塊了！ 我們需要它的第一個模塊是 Woo Breadcrumb 模塊。

• 產品：本產品

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：深紅色文字
• 文字字體粗細：粗體
• 文本字體樣式：大寫
• 文字大小：20px
• 文字字母間距：4px

鏈接文字設置

也對鏈接文本設置進行了一些更改。

• 鏈接字體粗細：輕
• 鏈接文字顏色：#e02b20

間距

然後，轉到間距設置並在不同的屏幕尺寸中添加一些自定義邊距值。

• 下邊距：80px
• 左邊距：50px（桌面和平板電腦），20px（手機）
• 右邊距：50px（桌面和平板電腦），20px（手機）

將 Woo 標題模塊添加到列

動態內容

本專欄中我們需要的下一個也是最後一個模塊是 Woo Title 模塊。

• 產品：本產品

標題文字設置

更改模塊的標題文本設置如下：

• 標題字體：蒙特塞拉特
• 標題字體粗細：重
• 標題文本對齊：居中
• 標題文字顏色：#000000
• 標題文字大小：250 像素（桌面）、150 像素（平板電腦）、80 像素（手機）
• 標題行高度：0.9em

間距

通過添加一些負的左右邊距來增加模塊的寬度。

• 左邊距：-150px（桌面）、-100px（平板）、-50px（手機）
• 右邊距：-150px（桌面）、-100px（平板）、-50px（手機）

添加常規部分 #2

間距

在上一節的正下方添加另一節。 修改部分的填充值如下：

• 頂部填充：0px
• 底部填充：200px

添加行

列結構

繼續使用以下列結構添加新行：

背景顏色

在不添加任何模塊的情況下，打開行設置並更改行的背景顏色。

• 背景顏色：#f4f4f4

漿紗

接下來增加行的最大寬度。

• 最大寬度：1000px

間距

也添加一些自定義底部填充。

• 底部填充：150px

邊界

然後，轉到邊框設置並將“50px”邊框半徑應用到左下角和右下角。

溢出

通過確保溢出可見來完成行設置。

• 水平溢出：可見
• 垂直溢出：可見

第 1 列設置

動態背景圖片

完成常規行設置後，打開第 1 列設置並使用動態內容將產品的特色圖片添加到背景中。

• 背景圖片：特色圖片

間距

在接下來的列中添加一些底部填充。 這將允許背景圖像顯示出來。

• 底部填充：370 像素（桌面）、690 像素（平板電腦）、380 像素（手機）

將文本模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 在第 1 列中，我們唯一需要的模塊是文本模塊。 添加一些您選擇的內容。

背景顏色

接下來更改模塊的背景顏色。

• 背景顏色：#E02B20

文字設置

移至設計選項卡並修改文本設置。

• 文字字體：蒙特塞拉特
• 文字字體粗細：超粗
• 文本對齊：居中
• 文字顏色：#FFFFFF
• 文字大小：30px
• 文本行高：1em

漿紗

接下來在大小設置中縮小模塊的大小。

• 寬度：280px

間距

並通過添加一些自定義填充值將模塊變成正方形。 我們還使用負邊距創建頂部和左側重疊。

• 上邊距：-120px
• 左邊距：-120px
• 頂部填充：110px
• 底部填充：110px
• 左填充：50px
• 右填充：50px

邊界

要將正方形變成圓形，我們將向模塊的每個角添加“500px”邊框半徑。

變換旋轉

我們也會旋轉模塊。

• 左：330度

將文本模塊添加到第 2 列

添加 H2 內容

進入第二列！ 在那裡，我們需要的第一個模塊是常規文本模塊。 輸入您選擇的一些 H2 含量。

H2 文本設置

轉到設計選項卡並按如下方式更改 H2 文本設置：

• 標題 2 字體：蒙特塞拉特
• 標題 2 文字大小：35px

間距

接下來添加一些自定義邊距值。

• 上邊距：-70px（桌面），100px（平板和手機）
• 左邊距：100px（桌面），20px（平板和手機）
• 右邊距：20px（平板電腦和手機）

將 Woo 描述模塊添加到第 2 列

動態內容

我們在第 2 列中需要的第二個模塊是 Woo 描述模塊。

• 產品：本產品
• 描述類型：簡短描述

文字設置

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

• 文字字體：深紅色文字
• 文字大小：19px
• 文本行高：1.8em
• 文本對齊：對齊

間距

接下來修改模塊的間距值。

• 下邊距：50px
• 左邊距：100px（桌面），20px（平板和手機）
• 右邊距：-100px（桌面），20px（平板和手機）

將 Woo 價格模塊添加到第 2 列

動態內容

進入下一個模塊，即 Woo Price 模塊。

• 產品：本產品

價格文本設置

更改價格文本設置如下：

• 價格字體：蒙特塞拉特
• 價格字體重量：重
• 價格文字顏色：#000000
• 價格文字大小：50px

間距

接下來更改間距設置。

• 下邊距：50px
• 左邊距：100px（桌面），20px（平板和手機）
• 右邊距：20px（平板電腦和手機）

將 Woo 添加到購物車模塊添加到第 2 列

動態內容

我們需要完成此設計的下一個也是最後一個模塊是 Woo Add To Cart 模塊。

• 產品：本產品

文字設置

在文本設置中更改文本字體。

• 文字字體：蒙特塞拉特

字段設置

接下來修改字段設置。

• 字段背景顏色：#ffffff
• 字段文本顏色：#000000
• 頂部填充：66px
• 底部填充：66px
• 字段字體：蒙特塞拉特
• 字段字體重量：重

• 所有角：5px
• 底部字段邊框寬度：3px
• 字段邊框顏色：#e02b20

按鈕設置

繼續設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#E02B20
• 按鈕邊框寬度：0px

• 按鈕邊框半徑：5px
• 按鈕字體：蒙特塞拉特
• 按鈕字體粗細：超粗
• 按鈕字體樣式：大寫

• 頂部填充：50px
• 底部填充：50px
• 左內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 右內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

間距

通過在較小的屏幕尺寸上添加一些左右邊距值來完成模塊的設計，就大功告成了！

• 左邊距：20px（平板電腦和手機）
• 右邊距：20px（平板電腦和手機）

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新 WooCommerce 模塊創建一個令人驚嘆的粗體產品頁面，該頁面具有乾淨的外觀和感覺。 大膽的產品頁面以獨特的方式將您的產品置於聚光燈下。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

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