為 Divi 下載漂亮的全屏產品頁面

由於 WooCommerce 模塊已成為 Divi 的一部分，我們向您展示了一些您可以使用 Divi 的內置選項創建的產品頁面設計。 今天，我們向該列表添加了一個新教程，向您展示如何創建漂亮的全屏產品頁面。 我們將所有產品內容整合到一個部分中，同時創造出令人驚嘆的設計。 儘管我們限制了產品頁面上所需的垂直滾動，但無論如何設計都不會讓人難以抗拒。 我們還確保設計在小屏幕尺寸上保持美觀和響應。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載全屏產品佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

打開現有產品頁面

您需要做的第一件事是打開現有產品頁面或創建一個新頁面。 對於此特定佈局，我們在產品頁面中添加了以下元素：

• 產品名稱
• 特色圖片
• 簡短的介紹
• 描述
• 價錢

啟用分區和修改頁面設置

繼續啟用 Divi 並在頁面設置中更改頁面佈局。

切換到 Visual Builder

完成後，您可以切換到 Visual Builder。

刪除現有部分

在 Visual Builder 中，您會注意到一個包含默認產品頁面項目的部分。 您可以繼續刪除整個部分。 在本文的後續步驟中，我們將重新創建我們自己的替代設計。

添加新部分

間距

是時候開始創作了！ 添加新部分，打開部分設置並修改頂部和底部填充值。

• 頂部填充：5vw
• 底部填充：5vw

溢出

也隱藏該部分的溢出。

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

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並按如下方式調整大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

第 1 欄

Z索引

我們還在可見性設置中增加了第一列的 z 索引。

• Z指數：10

第 2 欄

漸變背景

接下來打開第 2 列設置並添加跨不同屏幕尺寸的漸變背景：

• 顏色 1：#ffcb49
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：中心
• 起始位置：66%（桌面），50%（平板電腦和手機）
• 最終位置：66%（台式機），50%（平板電腦和手機）

將 Woo 標題模塊添加到第 1 列

動態內容

是時候開始添加模塊了！ 在第 1 列中，我們唯一需要的模塊是 Woo Title 模塊。

• 產品：本產品

標題文字設置

轉到模塊的設計選項卡並按如下方式更改標題文本設置：

• 標題字體：蒙特塞拉特
• 標題字體粗細：超輕
• 標題文本對齊方式：左（桌面）、中心（平板電腦和手機）
• 標題文字大小：9vw

漿紗

也修改模塊的大小。

• 寬度：50vw（桌面），100%（平板電腦和手機）

間距

隨著間距設置。

• 上邊距：14vw（台式機），0vw（平板電腦和手機）
• 下邊距：5vw（平板電腦和手機）
• 左邊距：-11vw（桌面），2vw（平板電腦和手機）
• 右邊距：2vw（平板電腦和手機）

變換旋轉

最後但並非最不重要的一點是，在變換設置中旋轉整個模塊。

• 左：270deg（桌面），0deg（平板電腦和手機）

將 Woo 圖像模塊添加到第 2 列

動態內容

進入第二個模塊！ 在那裡，我們唯一需要的模塊是 Woo Image Module。

• 產品：本產品

圖像設置

轉到模塊的設計選項卡並按如下方式更改圖像設置：

• 圖像圓角：1vw（所有角）

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

漿紗

通過更改大小設置中的寬度和模塊對齊來完成 Woo 圖像模塊的設置。

• 寬度：35vw
• 模塊對齊：居中

將 Woo 描述模塊 #1 添加到第 3 列

動態內容

進入最後一欄！ 在那裡，我們需要的第一個模塊是 Woo 描述模塊。

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

文字設置

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

• 文字字體：蒙特塞拉特
• 文本字體樣式：大寫
• 文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 文字字母間距：-0.07vw
• 文本行高：1.8em

間距

也修改間距設置。

• 最高利潤率：9vw
• 左填充：2vw（桌面），5vw（平板電腦和手機）
• 右填充：5vw

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

動態內容

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

• 產品：本產品

價格文本設置

更改模塊的價格文本設置如下：

• 價格字體：蒙特塞拉特
• 價格文字顏色：#333333
• 價格文字大小：3vw（桌面）、7vw（平板電腦）、10vw（手機）
• 價格線高度：1.8em

間距

也修改間距設置。

• 最高利潤率：4vw
• 左填充：2vw（桌面），5vw（平板電腦和手機）
• 右填充：2vw（台式機），5vw（平板電腦和手機）

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

動態內容

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

• 產品：本產品

字段設置

更改模塊的字段設置如下：

• 字段背景顏色：#0a0900
• 字段文本顏色：#ffffff
• 字段字體：蒙特塞拉特

• 字段文本大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 場圓角：50vw（所有角落）

按鈕設置

也可以使用按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ffcb49
• 按鈕邊框寬度：0px

• 按鈕字體：蒙特塞拉特

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：4vw（桌面）、8vw（平板電腦）、10vw（手機）
• 右填充：4vw（桌面）、8vw（平板電腦）、10vw（手機）

間距

並通過在不同屏幕尺寸之間添加一些自定義間距值來完成模塊的設置。

• 最高利潤率：2vw
• 左邊距：-3vw（桌面），5vw（平板電腦和手機）
• 右邊距：5vw（平板電腦和手機）

將產品頁面變成模板

將頁面佈局保存到 Divi 庫

完成全屏產品頁面後，您可以使用 Divi 的 Theme Builder 將其用於您的每個產品。 為此，請將您剛剛創建的佈局保存在您的 Divi 庫中。

向主題生成器添加新模板

轉到 Divi 設置中的 Theme Builder 並添加一個新模板。

選擇要顯示此佈局的產品頁面。

將佈局上傳到模板的正文

然後，單擊“添加全局主體”並選擇“從庫添加”。

在“您保存的佈局”選項卡中選擇您的佈局。

並保存所有更改！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何重新創建一個漂亮的全屏產品頁面，您可以將其用於您正在設置的任何類型的電子商務網站。 我們匹配了各種 woo 模塊的設置，以創建令人驚嘆的結果並限制所需的垂直滾動。 我們希望這個設計也能激發您創建自己的全屏產品頁面！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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