使用 Divi 的 Theme Builder 創建 WooCommerce 產品類別頁面
已發表: 2020-06-05類別頁面是任何電子商務網站的重要組成部分。 客戶瀏覽產品類別以找到他們需要的東西。 這就是為什麼您的類別頁面需要與產品頁面一樣好。 使用 Divi 的 Theme Builder，創建類別頁面模板比以往更容易。 在本教程中，我們將向您展示如何使用 Divi 的內置選項逐步創建類別頁面模板並為其設置樣式。 此外，我們將向您展示如何在 Themify WooCommerce 產品過濾器插件的幫助下使其可過濾。
並排打開兩個瀏覽器選項卡。 使用主題構建器的第一個選項卡和類別頁面的實時預覽的第二個選項卡。 以這種方式工作，以便隨時查看進度。 為方便起見，我們還添加了模板作為免費下載。
讓我們開始吧！
預覽
在我們開始重新創建模板之前，讓我們先來看看分類頁面模板在不同屏幕尺寸下的樣子。
桌面
移動的
免費下載 Woo 類別頁面模板
要使用免費的 Woo 類別頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 更新您的產品和類別
在構建模板之前，請確保您的產品按正確的類別進行組織。 檢查它們是否也被正確標記。 這些在設置產品過濾器插件時很重要。
2.設置插件
下載並安裝
下載 WooCommerce 產品過濾器。 導航到您的插件儀表板並上傳插件的 .zip 文件以進行安裝。 或者，在目錄中搜索插件。 該插件將在您的儀表板菜單中添加一個新選項卡。 確保你也激活了插件。
添加新過濾器表單
單擊儀表板中的插件選項卡。 在插件設置中，單擊按鈕以添加新的過濾器表單。
設置過濾器表單
要使您的可過濾側邊欄看起來與本文預覽中的一模一樣，請使用下面提到的設置。 之後您可以隨時調整這些設置。
- 佈局：垂直
- 空字段：如果為空則不顯示字段
- 產品分類：隱藏產品分類
- 分頁選項：無限滾動
- 復位鍵：無復位鍵
- 分類法之間的邏輯關係：AND
- 結果頁面模板：在同一頁面上顯示結果
創建類別字段
在主區域下方的菜單欄中，您將看到一系列選項卡。 將“類別”選項卡拖放到其下方的構建器中。 然後調整設置如下：
- 字段名稱：類別
- 包括兒童：是
- 顯示為：複選框
- 邏輯：或
- 順序：名稱，降序
- 佈局：水平，2 列
創建標籤字段
現在將“標籤”選項卡拖放到構建器中。 確保它位於“類別”選項卡下方。 調整設置如下：
- 字段標題：類型
- 顯示為：複選框
- 順序：名稱，降序
- 佈局：水平，2 列
- 彩色圖標
- 背景：透明
- 文字顏色：深棕色#44000d
單擊保存以生成簡碼
保存您的工作並關閉構建器。 您將在插件的主菜單中看到短代碼。 複製它，你以後會用到它。
3. 在 Theme Builder 中重新創建產品類別頁面模板
打開主題生成器/添加新模板
是時候開始重新創建模板了！ 打開您的主題構建器並添加一個新模板。
設置模板設置
在模板設置中，選擇“特定產品類別頁面”。 單擊要將此模板分配到的類別。 我們將選擇手工皮具。
添加自定義正文
然後，單擊“添加自定義正文”。
選擇構建自定義主體
我們將從頭開始重新創建此模板，因此請繼續選擇“構建自定義主體”。
從頭開始構建
進入可視化構建器後，再次選擇從頭開始構建的選項。
第 1 節設置
背景
進入模板編輯器後，您會注意到一個部分。 打開該部分並添加背景顏色。
- 背景顏色：透明藍灰色-rgba(68,66,109,0.02)
添加行
列結構
現在添加一個具有以下列結構的新行：
漿紗
調整下一行的大小設置。
- 天溝寬度：1
- 寬度
- 台式機：90%
- 平板電腦和手機：85%
- 最大寬度：1920px
間距
然後，在不同的屏幕尺寸上應用一些不同的間距值。
- 左右邊距
- 桌面：自動
- 平板電腦：55px
- 電話：30px
- 頂部填充：100px
將帖子標題模塊添加到第一列
元素
是時候添加模塊了，從第 1 列中的帖子標題模塊開始。僅啟用標題。
- 節目名稱：是
背景
接下來添加背景顏色。
- 顏色：#e8e8e8
標題文字
移至設計選項卡並設置標題文本的樣式。
- 職稱等級：H1
- 字體： Josefin Sans
- 重量：粗體
- 風格：TT
- 顏色：#44000d
- 尺寸
- 桌面：32px
- 平板電腦：28px
- 電話：30px
- 線高：1.2 em
間距
也調整間距。
- 頂部填充
- 台式機和平板電腦：100px
- 底部填充：80px
- 左填充
- 台式機和平板電腦：30px
- 右填充
- 台式機和平板電腦：30px
- 電話：10px
邊界
給模塊一些圓角。
- 圓角：15px 所有四個
盒子陰影
並添加一個微妙的框陰影。
- 框陰影：第二個選項
- 水平位置：12px
- 垂直位置：12px
- 模糊強度：20px
- 傳播強度：-5px
- 陰影顏色：#dddddd
將文本模塊添加到第一列
內容
在上一個模塊的正下方添加一個文本模塊。 在內容框中，添加您從插件中復制的簡碼。
- 正文：插件簡碼
背景
接下來添加背景顏色。
- 顏色：#e8e8e8
文本
為文本設置樣式。
- 字體： Josefin Sans
- 顏色：#44000d
- 尺寸
- 桌面：20px
- 平板電腦：18px
- 電話：16px
- 間距：1px
間距
調整間距設置。
- 上邊距：50px
- 頂部和底部填充：40px
- 左右填充：30px
邊界
然後，添加一些圓角。
- 圓角：15px 所有四個
盒子陰影
並通過添加一個微妙的框陰影來完成模塊設置。
- 框陰影：第二個選項
- 水平位置：12px
- 垂直位置：12px
- 模糊強度：20px
- 傳播強度：-5px
- 陰影顏色：#dddddd
將商店模塊添加到第二列
內容
進入下一欄！ 添加店鋪模塊，調整主要設置如下：
- 產品視圖類型：默認
- 使用當前頁面：是
- 列佈局：3 列
圖片
轉到設計選項卡並相應地設置圖像樣式：
- 圖像圓角：15px 所有四個
- 圖像框陰影：第二個選項
- 水平位置：6px
- 垂直位置：6px
- 模糊強度：18px
- 陰影顏色：#dddddd
標題文字
接下來為標題文本設置樣式。
- 字體： Josefin Sans
- 重量：半粗體
- 對齊方式：右
- 顏色：#44000d
- 尺寸
- 桌面：26px
- 平板電腦：24px
- 電話：17px
- 間距：2px
價格文本
不要忘記設置價格文本的樣式。
- 字體： Josefin Sans
- 對齊方式：右
- 顏色：#44000d
- 尺寸：15px
- 字母間距：2px
- 行高：46px
間距
調整間距設置。
- 頂部填充
- 平板電腦和手機：50px
- 左填充
- 桌面：50px
- 平板電腦和手機：0px
自定義 CSS
最後但並非最不重要的一點是，在高級選項卡中添加自定義的兩行 CSS 代碼，以在商店模塊中的不同元素之間生成一些空間。 就是這樣！
- 圖像：填充底部：20px
- 價格：padding-bottom：40px
padding-bottom: 20px;
padding-bottom: 40px;
預覽
我們已完成重新創建 WooCommerce 產品類別頁面模板。 我們再來看看不同屏幕尺寸下的成品設計。
桌面
移動的
最後的想法
此產品類別頁面模板可應用於您的 WooCommerce 商店中的所有類別和標籤。 在產品過濾器插件的幫助下，您可以添加適合您自己的商店和產品的過濾器設置。 您可以使用任何 Divi woo 模塊以任何您想要的方式個性化您的商店。 我們希望這個模板能幫助您為您的設計添加個性化的外觀。 如果您有任何問題或建議，請在評論中告訴我們！