如何使用 Divi 創建日本美學靈感的產品頁面模板
已發表: 2019-11-21您是否正在為您的在線商店尋找乾淨且簡約的產品頁面設計？ 今天，我們有一個靈感來自日本美學的設計。 這是極簡日本雜誌和網站的常見風格。 它可以輕鬆閱讀文本，查看產品而不會分心。 按照下面的教程為您自己的產品重新創建此模板。 您也可以免費下載模板 JSON 文件！
讓我們開始吧。
預覽
在開始之前，讓我們看一下設計在不同設備上的外觀。
桌面
移動的
免費下載產品頁面模板
要使用免費的產品頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 添加/打開 Woocommerce 產品
產品數據
打開或創建一個新的 WooCommerce 產品。 要重新創建這種受日本美學啟發的產品設計，您需要填寫以下詳細信息：
- 名稱：書法集
- 描述：日本書法集，包含創作精美字體藝術所需的所有工具。 黑墨、馬毛刷、石鎚、攪拌碗、日本剪刀和防滲紙。
- 價格：31
- 類別：美術用品
- 特色圖片：產品的橫向圖片。
- 圖庫：4張相同尺寸的風景圖片
- 屬性：見下文
屬性選項卡包含 woo 附加信息模塊的信息。 要添加此信息，請選擇屬性選項卡並創建一個自定義屬性，如下所示：
- 包括什麼：
- 1 刷
- 1碗
- 1個墨水瓶
- 1把剪刀
- 1 河石
- 1 令紙
啟用 Divi Builder 和修改頁面設置
準備好所有產品數據後，啟用 Divi Builder 並將頁面佈局更改為“全角”。
切換到可視化生成器
現在，切換到可視化構建器。 單擊“在前端構建”按鈕。
刪除默認產品部分
由於我們要從頭開始設計此產品頁面，因此刪除整個默認部分。 這將為您提供一個空白畫布。
2. 重現日式設計
添加新部分
讓我們開始重新創建日本美學產品頁面！ 添加一個新的常規部分。
背景
打開部分設置並更改背景顏色。
- 背景顏色：非常淺的灰色#f2f2f2
漿紗
接下來，調整大小。
- 寬度：100%
- 最大寬度：100%
間距
然後，間距值如下：
- 頂部填充：
- 桌面：0vw
- 平板電腦 + 手機：2vw
- 底部填充：
- 台式機 + 平板電腦：2vw
添加第一行
列結構
添加新行並選擇以下列結構：
漿紗
在添加任何模塊之前，請按如下方式調整行的大小設置：
- 寬度：
- 台式機：80%
- 平板電腦 + 手機：63%
間距
此外，調整間距值。
- 頂部 + 底部邊距：0vw
- 頂部 + 底部填充：0vw
添加 Woo 麵包屑模塊
內容
現在，添加第一個模塊； 嗚麵包屑。
- 產品：本產品
文本
在設計選項卡中，按如下方式設置文本樣式：
- 字體：Duru Sans
- 字體樣式：TT
- 顏色：黑色#000000
- 尺寸：
- 台式機：0.7vw
- 平板電腦：1.5vw
- 電話：1.7vw
- 字母間距：2px
漿紗
然後，調整大小。
- 寬度：100%
間距
最後，調整間距。
- 最高保證金：
- 桌面：3em
- 平板電腦 + 手機：0em
- 底部邊距：
- 台式機 + 平板電腦：1em
- 電話：0em
- 頂部 + 底部填充：1em
- 左填充：2em
添加第二行
列結構
使用以下列結構添加第二行：
漿紗
打開行設置並更改不同屏幕尺寸的寬度。
- 寬度：
- 台式機：80%
- 平板電腦 + 手機：65%
間距
同樣調整間距。
- 頂部填充：0vw
列 1 + 2 設置
背景
繼續列設置。 第 1 列和第 2 列的樣式相同。 從背景開始。
- 顏色：白色#ffffff
邊界
並為兩列添加邊框樣式。
- 邊框樣式：所有四個邊
- 邊框寬度：4px
- 顏色：#333333
將 Woo 圖像模塊添加到第 1 列
內容
是時候開始添加模塊了！ 我們將需要第 1 列中的 woo 圖像模塊。
- 產品：本產品
元素
調整元素選項卡中的開關，如下所示：
- 特色圖片：開
- 顯示圖庫圖片：關閉
- 顯示銷售徽章：關閉
將 Woo 標題模塊添加到第 1 列
內容
在圖像下方，添加一個 woo 標題模塊。 選擇內容。
- 產品：本產品
標題文字
在設計選項卡中，設置文本樣式。
- 標題標題級別：H1
- H1 字體：Droid Sans
- H1 字體樣式：TT
- H1 顏色：深灰色 #333333
- 字母間距：5px
- 線高：1em
間距
然後，調整間距值。
- 最高保證金：
- 平板電腦 + 手機：0vw
- 頂部填充：0vw
- 底部填充：
- 台式機：1.5vw
- 平板電腦：3.5vw
- 電話：6vw
- 左填充：
- 台式機：2vw
- 平板電腦 + 手機：5vw
- 右填充：
- 台式機 + 平板電腦：0vw
邊界
通過添加邊框完成模塊的設置。
- 邊框樣式：底部邊框
- 寬度：4px
- 顏色：深灰色#333333
將 Woo 描述模塊添加到第 1 列
內容
繼續，添加一個woo描述模塊。 選擇內容和描述類型。
- 產品：本產品
- 描述類型： 描述
文本
然後，將文本樣式設置如下：
- 字體：Duru Sans
- 字體樣式：TT
- 顏色：深灰色#333333
- 尺寸：
- 台式機：0.8vw
- 平板電腦：1.4vw
- 電話：1.8vw
- 字母間距：3px
- 線高：2em
間距
通過在不同的屏幕尺寸上添加一些自定義填充來完成模塊設置。
- 頂部 + 底部填充：0vw
- 左 + 右填充：
- 台式機：2vw
- 平板電腦 + 手機：5vw
將 Woo 價格模塊添加到第 1 列
內容
接下來，在列中添加 woo price 模塊並選擇產品。
- 產品：本產品
價格文本
樣式價格文本如下：
- 字體：Duru Sans
- 顏色：深灰色#333333
- 尺寸：
- 台式機：1.5vw
- 平板電腦：3.2vw
- 電話：4vw
- 字母間距：3px
- 線高：1em
間距
調整間距設置。
- 底部邊距：
- 台式機：1vw
- 平板電腦：3vw
- 電話：4vw
- 頂部填充：
- 台式機：1vw
- 平板電腦：3.3vw
- 電話：5vw
- 底部填充：0vw
- 左填充：
- 平板電腦 + 手機：5vw
- 右填充：
- 台式機：2vw
- 平板+手機：3vw
邊界
最後，添加邊框。
- 邊框樣式：頂部邊框
- 邊框寬度：4px
- 顏色：深灰色#333333
將 Woo 添加到購物車模塊添加到第 1 列
內容
在價格下方，添加添加到購物車模塊並選擇產品。
- 產品：本產品
元素
切換元素如下：
- 顯示數量字段：關閉
- 顯示庫存：開
背景
還要添加背景顏色。
- 背景顏色：深灰色#333333
按鈕
在設計選項卡中，按如下所示設置按鈕樣式：
- 字體大小：
- 台式機：1vw
- 平板電腦：2.6vw
- 電話：3.1vw
- 顏色：白色#ffffff
- 邊框寬度：0px
- 字母間距：3px
- 字體：Duru Sans
- 字體：TT
間距
接下來，調整間距。
- 頂部 + 底部填充：0.5vw
- 左填充：1vw
邊界
最後，添加邊框。
- 邊框樣式：頂部邊框
- 寬度：4px
- 顏色：深灰色#333333
將 Woo 附加信息模塊添加到第 2 列
內容
轉到第二列並添加一個額外的信息模塊。 選擇產品。
- 產品：本產品
元素
切換元素設置如下：
- 節目名稱：開
文本
在設計選項卡中，設置文本樣式。
- 字體：Duru Sans
- 字體樣式： I + TT
- 顏色：深灰色#333333
- 尺寸：
- 台式機：0.7vw
- 平板電腦：1.5vw
- 電話：2.4vw
- 字母間距：2px
- 線高：1.5em
標題文字
接下來為標題文本設置樣式。
- 字體：Duru Sans
- 字體樣式：TT
- 顏色：深灰色#333333
- 尺寸：
- 台式機：1vw
- 平板電腦：2vw
- 電話：2.2vw
- 字母間距：3px
- 線高：1.5em
屬性文本
不要忘記設置屬性文本的樣式。
- 字體：Duru Sans
- 字體樣式：TT
- 顏色：深灰色#333333
- 尺寸：
- 台式機：0.7vw
- 平板電腦：2vw
- 電話：2.4vw
- 字母間距：2px
間距
然後，調整間距。
- 頂部填充：
- 台式機：1vw
- 平板+手機：3vw
- 底部填充：
- 台式機 + 平板電腦：1vw
- 左填充：
- 台式機：2vw
- 平板電腦 + 手機：5vw
- 右填充：
- 電話：3vw
將 Woo Gallery 模塊添加到第 2 列
內容
我們需要完成設計的最後一個模塊是 woo 畫廊模塊。 選擇產品。
- 產品：本產品
佈局
轉到設計選項卡並更改佈局。
- 佈局：滑塊
間距
然後，調整間距設置如下：
- 最高保證金：
- 桌面：-2vw
- 平板電腦：-4vw
- 電話：-6vw
- 頂部填充：0vw
邊界
最後，添加邊框。
- 邊框樣式：頂部邊框
- 寬度：4px
- 顏色：深灰色#333333
3.轉換為Divi Theme Builder的模板
保存到 Divi 庫
現在我們已經完成了設計，是時候將我們的產品頁面佈局保存到 Divi 庫了。 如果您的產品佈局沒有類別，請創建一個。
- 另存為：佈局
- 姓名： 日式產品大師
- 類別：產品佈局。
打開 Divi Theme Builder 並創建新模板
為了在您的所有產品頁面上使用此設計，您需要在主題構建器中為其創建一個模板。 在主題構建器頁面中，添加一個新模板。 從下拉菜單中選擇“所有產品”。 如果您只想將此設計用於您的部分產品，您可以調整設置。
從 Divi 庫添加自定義正文
單擊“添加自定義正文”並在下拉菜單中選擇“從庫中添加”。
在保存的佈局中查找佈局並應用
在佈局窗口中，單擊保存的佈局並查找我們剛剛創建的佈局。
保存對主題生成器的更改
不要忘記將更改保存到主題構建器。
預覽
該模板現在將應用於您網站上的所有產品。 讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
這是一個包裹！
在這篇文章中，我們向您展示瞭如何創建一個日本美學靈感的產品頁面。 款式簡潔大方，非常適合展示精緻或手工製品。 我們還向您展示瞭如何使用 Divi 主題構建器將佈局轉換為模板。 用你的新 Divi + WooCommerce 項目試試這個設計，告訴我們你的想法。