如何使用 Divi 的 Theme Builder 創建全站點 Woo 產品頁面模板

Divi 的新主題生成器使我們構建 Divi 網站的方式自動化。 例如，在設計產品頁面時，我們只需完成一次創建過程，然後我們就可以將設計分配給我們所有的產品頁面。 這正是我們將在今天的用例教程中向您展示的內容。 我們將指導您使用 Divi 設置站點範圍的 woo 產品頁面模板。 我們將首先設計一個特定產品的默認 woo 產品頁面，使其與絲網印刷佈局包相匹配。 我們將繼續將佈局保存到我們的 Divi 庫，然後將其用作我們創建的新模板上的全局主體。

讓我們開始吧！

預覽

免費下載示例產品頁面模板

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

下載文件

免費下載

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

下載

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

1. 在現有產品上啟用 Divi Builder

啟用分區和修改頁面設置

有兩種方法可以創建產品頁面模板； 您可以開始編輯產品頁面模板中的全局主體，也可以先在單個產品頁面上創建設計。 我個人更喜歡先在單個產品頁面上創建設計。 它允許您在一次將其實際應用於所有產品頁面之前發佈設計並查看實時結果。 這就是我們今天將採用的方法，所以繼續打開您現有的頁面之一併將頁面佈局更改為全角。

切換到 Visual Builder

在頁面設置中更改頁面佈局後，您可以開始在前端構建。

2. 自定義佈局以匹配網站/佈局包的樣式

背景顏色

在 Visual Builder 中，您可以注意到您需要的所有 woo 元素。 我們將更改其中一些模塊的設置以使其與絲網印刷佈局包相匹配。 我們所做的更改很小，只是幫助您將某種設計風格應用到您的產品頁面。 如果您正在處理個人項目，請根據需要隨意進行自定義，但對於本教程，我們將盡量保持簡單。 我們將從修改一些背景顏色開始。

• Woo Cart Notice 模塊：背景色

打開 Woo Cart Notice Module 並更改其背景顏色。

• 背景顏色：#29314f

• Woo 標籤模塊：標籤文本/背景顏色

繼續打開 Woo 選項卡模塊，然後更改選項卡文本和背景顏色。

• 活動標籤背景顏色：#ffffff
• 非活動選項卡背景顏色：#29314f
• 活動標籤文本顏色：#000000
• 標籤文本顏色：#ffffff

正文設置

我們還想對以下模塊的正文進行一些更改：

• Woo 麵包屑模塊：文本設置
• Woo 添加到購物車模塊：文本設置
• Woo 描述模塊：文本設置
• Woo 元模塊：文本設置
• Woo 標籤模塊：文本設置
• Woo 標籤模塊：標籤文本設置

打開上面列出的每個模塊並更改文本大小和文本行高如下：

• 文字大小：16px（桌面和平板電腦），14px（手機）
• 文本行高：2em（桌面和平板電腦），1.7em（手機）

標題文字設置

我們也在改變我們標題的風格。 我們將對這些模塊中的每一個應用更改：

• Woo 標題模塊：標題文本設置
• Woo 相關產品模塊：標題文本設置
• Woo 相關產品模塊：產品標題文本設置

我們唯一要更改的兩件事是標題字體和標題字體粗細。

• 標題字體：Roboto
• 標題字體粗細：粗體

鏈接顏色

繼續，我們要確保突出顯示可點擊的項目。 我們將更改以下兩個模塊的鏈接文本顏色：

• Woo 麵包屑模塊：鏈接文本顏色
• Woo 元模塊：鏈接文本顏色

這是我們使用的顏色代碼：

• 鏈接文字顏色：#ff7145

價格文本設置

我們還想設置價格文本的樣式，從 Woo 價格模塊開始。

• Woo 價格模塊：價格文本設置

更改價格文本設置如下：

• 價格字體：Roboto
• 價格字體粗細：粗體
• 價格文字顏色：#ff7145

接下來打開 Woo 相關產品模塊。

• Woo 相關產品模塊：價格文本設置

並對價格文本設置進行一些更改：

• 價格字體：Roboto
• 價格字體粗細：粗體
• 價格文字顏色：#ff7145
• 價格文字大小：16px

按鈕設置

我們的產品頁面上也有兩個按鈕，每個按鈕都需要設置樣式。

• Woo Cart 通知模塊：按鈕設置
• Woo 添加到購物車模塊：按鈕設置

更改模塊的按鈕設置如下：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：14px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ff7145
• 按鈕邊框寬度：2px
• 按鈕邊框顏色：#ff7145

• 按鈕邊框半徑：100px
• 按鈕字母間距：1px
• 按鈕字體：Roboto
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

• 頂部填充：20px
• 底部填充：20px
• 左填充：30px
• 右填充：30px

額外細節

我們希望對產品頁面設計應用一些額外的更改，從頁面第二行的第 2 列背景開始。

• 第 2 列：背景顏色

使用以下顏色代碼：

• 背景顏色：#efefef

我們也在修改第 2 列的間距。

• 第 2 列：間距

使用以下間距值：

• 頂部填充：50px
• 底部填充：50px
• 左填充：50px
• 右填充：50px

最後但並非最不重要的一點是，我們要為 Woo 添加到購物車模塊的字段設置設置樣式。

• Woo 添加到購物車模塊：字段設置

應用以下更改：

• 字段背景顏色：#efefef
• 字段文本顏色：#7f7f7f
• 字段字體：Roboto
• 字段字體粗細：粗體

3. 創建新的產品模板並在正文區域導入產品頁面佈局

將產品頁面佈局保存到 Divi 庫

完成產品頁面設計後，您可以將整個佈局保存到您的 Divi 庫中。

轉到 Divi 主題生成器

是時候將佈局變成產品頁面模板了！ 為此，請導航到 Divi 設置中的 Theme Builder。

添加新模板

單擊“添加新模板”繼續。

在模板設置的“使用於”選項卡中選擇“所有產品”，使模板一次應用於所有產品。

從庫中添加自定義正文

然後，單擊“添加全局主體”。 我們將選擇剛剛保存到 Divi 庫中的佈局，而不是從頭開始構建自定義主體。

轉到“您保存的佈局”選項卡以選擇您保存的佈局。

4. 在現有產品上保存主題生成器選項和查看模板

一旦創建了模板的主體，就只剩下一件事要做了； 保存更改。 一旦您的新模板被保存，您就可以預覽您的每個產品，並註意到應用了相同的正文模板！

預覽

最後的想法

在這篇文章中，我們向您展示瞭如何創建站點範圍的產品頁面模板。 我們首先使用 Divi 的 woo 模塊修改現有產品頁面。 我們對產品頁面進行了一些最小的更改，以使其與絲網印刷佈局包相匹配。 我們繼續將產品頁面佈局保存到我們的 Divi 庫。 然後，我們創建了一個新模板並將佈局上傳到我們的產品頁面模板的正文中，使其適用於我們的整個網站。 我們希望本教程可以幫助您使用 Divi 的新主題生成器構建漂亮的電子商務網站！ 如果您有任何疑問，請確保在下面的評論部分發表評論。

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