Divi 產品亮點：DiviCommerce

DiviCommerce 是 Divi 的第三方子主題，專為構建在線商店而設計。 它包含大量頁面和功能，可創建脫穎而出的 WooCommerce 商店。 在這篇文章中，我們將了解 DiviCommerce 的頁面和功能，以幫助您確定它是否是適合您需求的 Divi 子主題。

安裝 DiviCommerce

我發現安裝 DiviCommerce 非常直觀。 像安裝任何 WordPress 主題一樣安裝它，但使用 Divi 作為活動主題。 轉到“外觀” > “主題” > “添加新主題” 。

選擇“上傳主題” ，單擊“選擇文件” ，選擇計算機上的 DiviCommerce 壓縮文件，然後單擊“立即安裝” 。

接下來，單擊“激活” 。

最後，選擇DC 演示導入>輕鬆演示導入。

選擇要導入的文件，然後單擊“導入演示內容” 。 我建議使用默認設置。

演示內容導入後，單擊“刪除演示內容和導入功能” 。 您的網站現在看起來像帶有虛擬圖像的演示，以顯示所需的尺寸。 添加您的內容，您的網站就可以使用了。

DiviCommerce 頁面

DiviCommerce 共有 26 個頁面，其中包括 6 個主頁，旨在創建多種類型的在線商店。 它還包括 3 個商店頁面、2 個產品頁面、2 個結帳頁面、5 個頁眉、2 個頁腳和許多附加內容。 功能包括 Ajax 產品過濾器、購物車彈出窗口、產品 Ajax 搜索、彈出表單和 WooCommerce 變體樣本。

讓我們看一下佈局。 我將把較大的佈局分成較小的組，以便它們更容易管理和顯示下載的子主題和產品演示中的圖像。

DiviCommerce 主頁一號

英雄部分顯示帶有 CTA 的全屏圖像。

接下來是新來者部分。 這包括產品卡的懸停效果。 兩列部分顯示鏈接到商店的圖像。 這些圖像包括肯·伯恩斯效果。 接下來是另一個具有懸停效果的商店部分。 這是產品演示的頂部部分。

第一個主頁佈局的下半部分顯示了另一個全屏 CTA、特色產品、獨特的交易倒計時、博客和圖像。

DiviCommerce 之家二號

第二個主頁顯示帶有 CTA 的全屏滑塊。

頁面的上半部分包括商店類別的 CTA、獨特的商店部分（一側有兩種產品，另一側有 CTA）、商店部分和全角電子郵件註冊表單。 所有產品卡和按鈕都包含懸停效果。

《Home Two》的後半部分顯示了商店部分、全屏背景圖像、博客和圖像上的卡片中的交易倒計時器。

DiviCommerce 之家三

Home Three 的上半部分顯示全角 CTA、包含新品的商店部分、用於類別 CTA 的兩列四張圖像的部分以及寬電子郵件表單。

佈局的後半部分顯示商店部分、帶有背景圖像的博客部分和帶有客戶圖像的部分。

DiviCommerce 主頁四

第四個主頁包括一個帶有兩個圖像的獨特英雄部分。 一張比另一張長，文本和 CTA 與兩張圖像重疊。 它還包括類別圖像，標題位於卡片底部和商店部分。

佈局的後半部分顯示兩個大類別 CTA、一個商店部分、一個帶有倒計時器的交易部分以及一個帶有背景圖像的博客。

DiviCommerce 主頁五

第五個主頁顯示全屏英雄部分，右側有 CTA。 它有很大一部分類別圖像，其中有五個較小的圖像和三個較大的圖像。 商店的三個部分展示了新品、特價商品和暢銷商品。 此佈局還包括全角電子郵件表單和客戶圖像。

DiviCommerce 六號屋

第六個主頁是最獨特的。 它在英雄部分顯示銷售倒計時器。 每個商店部分都將標題以大文本形式放置在該部分的左側。 接下來是兩個圖像 CTA，其中包括與圖像重疊的標題和按鈕。 另一個類別部分包括帶有懸停時消失的框陰影的圖像。 此佈局還包括電子郵件表單和客戶圖像。

DiviCommerce 商店一

第一個商店頁面顯示一個全角圖像，帶有頁面標題，後跟四列中的產品，左側有排序過濾器和側邊欄。 側邊欄包括類別、大小和顏色選項。 產品在懸停時顯示框陰影。

DiviCommerce 商店二號

商店二包含一個全角圖像，將產品放在一列中，並添加了一個有趣的產品過濾器，用戶可以在商店部分上方按類別、尺寸和顏色進行過濾。 它還包括排序過濾器並在頁面底部添加分頁。 過濾器在懸停時打開。

DiviCommerce 商店三

第三店不包含全角圖像。 它將商店類別與圖像一起放置在頁面頂部。 商店部分包括側邊欄、過濾器、懸停效果和分頁。

產品頁一

第一個產品頁面在左側顯示一個大的特色圖像，在右側顯示產品選項。 當您滾動時，產品選項保持不變。 頁面頂部的麵包屑向客戶顯示他們在導航結構中的位置。

特色圖像之後是一組縮略圖和另一張大圖像。 一旦大圖像到達產品選項區域，選項就會隨頁面滾動。

接下來是描述和運輸信息以及評論部分。

最後，還有一個部分，客戶可以添加自己的評論。

產品第二頁

第二個產品頁面遵循第一個產品頁面的設計，但將描述和運輸信息添加到切換中的產品選項區域。

頁面底部添加了客戶可能感興趣的產品部分。產品卡在懸停時添加了框陰影。

購物車彈出窗口

將產品添加到購物車時，會出現購物車彈出窗口。 它包括一個用於添加優惠券代碼的字段、一個包含類似產品的滑塊和一個結賬按鈕。

購物車頁面

DiviCommerce 包括一個樣式化的購物車頁面。 購物車信息包括框陰影。 這些按鈕是紅色的，以匹配子主題的設計。

結帳第一頁

它有兩個結帳頁面。 這是第一個結賬頁面。 它將訂單和付款信息放在結賬表格的右側。 第二個結賬頁面將此信息放置在表單下方，並將公司信息放置在表單右側。

關於我們

“關於我們”頁面顯示了引人注目的傾斜圖像。 該頁面還包括一​​個全角圖像、幾個文本區域和幾個較大的圖像。

聯繫我們

“聯繫我們”頁面顯示帶有簡介的聯繫信息、顯示聯繫表單、常見問題解答切換，並包含全角地圖。

DiviCommerce 標題

DiviCommerce 包括 5 個標頭。 它們包括多個可以使用、刪除或交換到另一個標頭的部分。

標題一

第一個標題在頂部添加了一個銷售欄，並包括搜索、帳戶登錄和右側彈出購物車的鏈接。 徽標和菜單位於左側。

標題二

標題二將搜索框放置在頂部欄中。 購物車和菜單互換。

標題三

第三個標題將菜單放置在中心和底部的新欄中，並將搜索移動到中心。

標題四

第四個標題將徽標和菜單居中，將搜索放在左側，將購物車放在右側。

標題五

最後，第五個標題將搜索框放置在頂部欄中，將徽標和菜單移至左側，並將購物車放置在右側。

DiviCommerce 頁腳

DiviCommerce 包括兩個頁腳。 兩者都適用於電子商務。

頁腳一

第一頁腳包括兩個部分。 第一部分包含以文本形式提供的信息的簡介。 第二部分包括用於徽標的圖像模塊、社交媒體關注模塊以及用於信息和鏈接的大量文本模塊。

頁腳二

第二個頁腳用電子郵件表單替換了頂部部分。 第二部分將社交媒體關注按鈕移至其自己的列中的右側。

DiviCommerce 彈出窗口

DiviCommerce 包括一個用 Divi Builder 製作的彈出窗口和一個名為 Popup Maker 的插件。 彈出窗口本身會顯示一個電子郵件表單，一側有註冊號召性用語，另一側有圖像。 它包括一個覆蓋層和一個關閉按鈕。

DiviCommerce 搜索

Ajax 搜索會在您鍵入時列出類別和產品。 搜索速度很快，結果保持開放狀態，允許客戶單擊結果中的任何內容。

在哪裡購買 DiviCommerce

DiviCommerce 在 Divi Marketplace 上有售，售價 25 美元。 它包括一年的支持和更新、無限制的網站使用以及 30 天退款保證。

結束對 DiviCommerce 的思考

這就是我們對 Divi 的 DiviCommerce 子主題的看法。 該子主題包含大量頁面和佈局，可用於構建任何類型的 WooCommerce 商店。 帶有子主題的五個額外插件添加了許多有趣的功能，例如購物車、彈出窗口和過濾器。 Ajax 功能速度很快，它們為網站提供了許多優雅且有用的工具，並在人群中脫穎而出。

我們希望聽到您的意見。 您嘗試過 DiviCommerce 子主題嗎？ 請在評論中告訴我們您的想法。