如何使用Divi為兒童產品製作有趣的產品頁面模板

兒童產品網站風格獨特。 他們往往很有趣，色彩繽紛，並能激發微笑。 您現在可以使用 Divi 主題構建器和可自定義的 woo 模塊更輕鬆地創建兒童產品的 WooCommerce 商店。 為什麼不通過獨特而有趣的設計讓它更特別一點呢？ 在這篇文章中，我們將向您展示如何在主題構建器中創建一個適用於您所有產品的兒童產品頁面模板。 它最適合具有透明背景的產品圖像。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們開始重新創建設計之前，讓我們來看看不同屏幕尺寸的結果。

桌面

移動的

免費下載有趣的兒童產品模板

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

下載文件

免費下載

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

下載

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

1. 兒童產品模板的設計準備

從產品照片中刪除背景

在開始兒童產品設計之前，我們要做的第一件事是準備圖像。 從產品圖像中刪除背景。 您可以使用 Adob​​e Photoshop、Adobe Illustrator 或 remove.bg 實現此目的。 在產品周圍留出一些空間，使其在設計中佔據良好位置。 最終圖像的最佳尺寸是 600X400 像素。

創建背景設計

第二步是創建背景設計以放置在圖像後面。 這種具有重疊形狀的設計可以在 Adob​​e Illustrator 中輕鬆創建。 或者，您可以在上面的可下載文件夾中找到此背景圖片。 如果要創建背景，請執行以下步驟：

• 創建（或來源）一個形狀。
• 給形狀你想要的顏色。
• 複製形狀。
• 以與原始顏色相似的色調進行著色。
• 旋轉第二個形狀以創建一個漂亮的構圖。
• 為兩個形狀添加一些透明度。
• 添加與最終設計中的背景顏色相同的背景。
• 保存為 1750X1650 像素左右的 JPG。

2. 創建/添加新的 Woocommerce 產品

產品數據

一旦我們準備好產品圖片和背景設計，就可以創建兒童產品了。 要創建與我們完全一樣的設計，請插入以下信息。

• 標題：木字母積木
• 詳細說明：這些天然木塊非常適合孩子們以有趣和創造性的方式學習字母和數字。 邊框為小手指圓潤，油漆無毒。
• 舊售價：12,99
• 新售價：7,99
• 特色圖片：剪下木塊圖像。 首選尺寸：600 x 400 像素
• 屬性：見下文

在屬性選項卡中，輸入附加信息模塊的值。

• 材質：天然松木
• 油漆：無毒白色油漆
• 油漆顏色：白色、藍色、綠色、紫紅色

3. 在 Theme Builder 中創建新模板

打開 Divi Theme Builder 並添加新模板

現在是時候轉到 Divi 主題構建器了。 我們將在那裡構建設計。 添加一個新模板。

開始為所有產品構建自定義主體

在所有產品上使用此模板並開始構建身體。

主題生成器專業提示：

在主題構建器中創建產品設計時，請始終在另一個窗口中打開產品頁面以檢查更改。

4. 重現孩子們的產品設計

添加新部分

背景

在主體模板構建器中，您會注意到一個部分。 打開該部分並更改背景顏色。

• 背景顏色：淡粉色#f9f2f2

添加新行

列結構

現在，添加一個有 2 列的新行。

漿紗

然後，調整行的大小。

• 自定義天溝寬度：2
• 寬度：90%
• 最大寬度：90%

第 1 列設置

背景

在第 1 列的設置中，添加您使用重疊形狀創建的背景圖像設計。

• 背景圖片

間距

然後，相應地調整間距。

• 頂部和底部填充：5vw
• 左右填充
  • 平板電腦：2vw
  • 電話：0vw

第 2 列設置

間距

移至第 2 列並按如下方式調整間距值。

• 頂部填充：1vw
• 底部填充：
  • 平板電腦 + 手機：1vw
• 左右填充：
  • 台式機：2vw
  • 平板電腦和手機：7vw

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

內容

現在是添加模塊的時候了。 首先，在第 1 列中，添加 woo 圖像模塊並在內容下選擇該產品。

• 產品：本產品

元素

然後，選擇將顯示在設計上的元素。

• 特色圖片：是
• 畫廊：沒有
• 銷售徽章：是

銷售徽章文本

在設計選項卡中，如下調整銷售徽章的值。

• 徽章顏色：透明
• 字體：Nunito
• 字體粗細：粗體
• 文字顏色：粉紅色#f24881
• 字體大小：
  • 台式機：5vw
  • 平板電腦：12vw
  • 電話：10vw

漿紗

然後，調整間距以使事情更適合。

• 頂部填充：
  • 台式機和平板電腦：1vw
  • 電話：2vw
• 底部填充：0vw
• 左右填充：0vw

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

內容

在第二列中，添加一個woo標題模塊並在內容選項卡中選擇該產品。

• 產品：本產品

背景

給模塊一個白色背景。

• 背景顏色：白色#ffffff

標題文字

然後，在 H1 級別設置標題文本的樣式。

• 標題級別：H1
• 字體：Nunito
• 字體粗細：超粗
• 文本對齊：居中
• 文字顏色：綠色深灰色 #314942
• 字體大小：
  • 台式機：2.6vw
  • 平板電腦和手機：6.4vw

間距

繼續調整模塊中的間距。

• 頂部和底部填充：
  • 台式機：1.5vw
  • 平板電腦和手機：2.5vw
• 左右填充：2vw

邊界

最後，調整桌面和響應式尺寸的邊框。

• 圓角：
  • 桌面：1vw 所有四個角
  • 平板電腦和手機：四個角均為 3vw

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

內容

在產品標題下方，添加一個woo描述模塊。 在內容選項卡中選擇描述類型和此產品。

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

背景

然後，給模塊一個背景色。

• 背景顏色：白色#ffffff

文本

轉到設計選項卡並設置文本樣式。

• 字體：Nunito
• 顏色：綠色深灰色#314942
• 尺寸：
  • 台式機：1vw
  • 平板電腦：2.5vw
  • 電話：3vw

間距

然後，調整模塊的間距。

• 最高保證金：
  • 台式機和平板電腦：-0.5vw
  • 電話：-3vw
• 頂部和底部填充：
  • 台式機：1.5vw
  • 平板電腦和手機：4vw
• 左右填充：
  • 台式機：2vw
  • 平板電腦和手機：6vw

邊界

最後，添加圓角。

• 圓角：
  • 桌面：1vw 所有四個角
  • 平板電腦和手機：四個角均為 3vw

將 Woo 附加信息模塊添加到第 2 列

內容

在 description 模塊下方，添加 woo 附加信息模塊。 在內容選項卡中選擇此產品。

• 產品：本產品

背景

然後，添加一個白色背景。

• 背景顏色：白色#ffffff

文本

在設計選項卡中，開始設置不同文本類型的樣式。 首先，適用於屬性值的文本。

• 字體：Nunito
• 樣式：斜體
• 顏色：綠色深灰色#314942
• 尺寸：
  • 台式機：0.8vw
  • 平板電腦：1.5vw
  • 電話：2vw

標題文字

其次，設置標題文本的樣式。

• 字體：Nunito
• 重量：超粗
• 顏色：粉色#f24881
• 尺寸：
  • 台式機：1.7vw
  • 平板電腦：3vw
  • 電話：3.5vw
• 線高：1em

屬性文本

第三，設置屬性文本的樣式。

• 字體：Nunito
• 重量：粗體
• 顏色：綠色深灰色#314942
• 尺寸：
  • 台式機：0.9vw
  • 平板電腦：2vw
  • 電話：3vw

間距

然後，如下調整間距。

• 最高保證金：
  • 台式機和平板電腦：-0.5vw
  • 電話：-3vw
• 頂部填充：
  • 台式機：1.5vw
  • 平板電腦：3vw
  • 電話：5vw
• 左填充：1vw
• 右填充：
  • 台式機：2vw
  • 平板電腦和手機：5vw

邊界

最後，添加圓角。

• 圓角：
  • 桌面：1vw 所有四個角
  • 平板電腦和手機：四個角均為 3vw

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

內容

添加 woo 價格模塊並在內容選項卡中選擇此產品。

• 產品：本產品

背景

此外，為模塊添加粉紅色背景以使其脫穎而出。

• 背景顏色：粉紅色#f24881

銷售舊價格文本

轉到設計選項卡並設置銷售舊價格的樣式。

* 當您為產品添加新舊銷售價格時，woo 價格模塊不會在主題構建器中同時顯示它們。 檢查實際產品頁面以了解最終設計的外觀。

• 字體：Nunito
• 顏色：白色#ffffff
• 尺寸：
  • 台式機：1.5vw
  • 平板電腦：2.5vw
  • 電話：3vvw

銷售新價格文本

繼續設置新價格的樣式。

• 字體：Nunito
• 重量：粗體
• 顏色：白色#ffffff
• 尺寸：
  • 台式機：2vw
  • 平板電腦：2vw
  • 電話：4vw
• 字母間距：1px

間距

然後，調整模塊的間距。

• 最高保證金：
  • 台式機和平板電腦：-0.5vw
  • 電話：-3vw
• 頂部和底部填充：
  • 台式機：1.5vw
  • 平板電腦和手機：
• 左右填充：
  • 台式機：2vw
  • 平板電腦和手機：5vw

邊界

最後，添加圓角。

• 圓角：
  • 桌面：1vw 所有四個角
  • 平板電腦和手機：四個角均為 3vw

最終設計

這就是實際產品上的設計與主題構建器中的設計。

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

內容

在價格模塊下方，放置一個 woo add to cart 模塊。 在內容選項卡中選擇此產品。

* 當您添加 woo add to cart 模塊時，您會注意到頂部有一個用於顏色選項的下拉菜單。 如果您沒有在產品頁面上指定此項，它將不會出現在您的最終設計中。 您可以通過在主題構建器中構建時檢查實時產品來確定。

• 產品：本產品

元素

繼續，選擇將顯示在模塊中的元素。

• 數量字段：關閉
• 庫存：關閉

背景

然後，添加白色背景色。

• 背景顏色：白色#ffffff

按鈕

現在是樣式按鈕的時候了。 按如下方式添加值。

• 字體大小：
  • 台式機：2vw
  • 平板電腦：3vw
  • 電話：5vw
• 文字顏色：粉紅色#f24881
• 背景顏色：白色#ffffff
• 字母間距：1px
• 字體：Nunito
• 重量：重
• 上下邊距：-0.3vw

間距

然後，調整模塊的間距。

• 最高保證金：
  • 台式機和平板電腦：-0.5vw
  • 平板電腦：-3vw
• 頂部和底部填充：0vw
• 左右邊距：0vw

邊界

最後，添加一個圓形邊框。

• 圓角：
  • 桌面：1vw 所有四個角
  • 平板電腦和手機：四個角均為 3vw

預覽

讓我們最後看看不同屏幕尺寸的最終設計。 兒童產品設計模板現在將適用於您商店中的所有產品。 確保您返回檢查圖像尺寸以確保它們都適合。

桌面

移動的

這是兒童產品頁面的包裝！

在這篇文章中，我們向您展示瞭如何重新設計兒童產品頁面。 這種帶有柔和邊緣的設計、有趣的背景設計和愉快的色彩將使您的所有產品看起來都很誘人，隨時可以購買。 我們希望您喜歡這個設計，並會用它來激發您自己的 Divi 創作。 在評論中留下您的想法！