Divi 產品亮點：Divi Designer Pack

Divi Designer Pack 是一個包含 720 多個設計元素的佈局包，您可以將其與 Divi Builder 一起使用，輕鬆創建您的下一個網站。 它帶有淺色和深色佈局以及頁面每個部分的各種設計。 在這篇文章中，我們將看看 Divi Designer Pack 附帶的一些佈局，看看這是否適合您。

讓我們開始吧！

安裝 Divi Designer Pack

Divi Designer Pack 以包含 Divi Library .json 文件的 .ZIP 文件形式提供。 佈局已打包，因此您可以根據需要安裝所有佈局、特定類別的所有佈局或特定類別的所有淺色或深色佈局。

要安裝佈局，請先在文件管理器中解壓縮 .ZIP 文件。 然後，打開您的 WordPress 儀表板並導航至 Divi Library 頁面。 單擊頂部的導入和導出，然後選擇導入選項卡。 選擇要導入的 .json 佈局包文件，然後選擇導入 Divi Builder 佈局。

導入佈局後，在 Divi Builder 中打開您的頁面。 單擊藍色加號圖標添加新部分，然後選擇從庫中添加。

在 Divi 庫中找到要使用的佈局。

然後，單擊“使用此部分”按鈕以在頁面上加載佈局。

Divi 設計師包

Divi Designer Pack 帶有 720 多種佈局，適用於具有淺色和深色設計的各種網站部分。 每個佈局都可以根據您的喜好進行定制，內容都可以替換為您自己的。 因為這個包有很多不同的佈局，我們不能在這篇文章中介紹所有的佈局。 我們將查看每個類別的一些佈局，讓您了解使用 Divi Designer Pack 可以獲得哪些設計。 您還可以在現場演示網站上查看所有佈局。

Divi Designer 設計部分

Divi Designer 關於部分

總共有 25 個關於部分的佈局。 佈局 2 有一個圖像和一個帶有數字的重疊文本框。 右側有文本，以及一些簡介模塊。

這是佈局 2 的深色版本。

佈局 11 採用雙色調設計，左側是一些文本，右側是圖像，一個 CTA 按鈕和一些帶有社交媒體圖標的宣傳模塊。

關於佈局 17 在圖像周圍使用漸變形狀。 左側有一些文本和一個 CTA 按鈕，以及一些帶有箭頭圖標的宣傳模塊。

Divi Designer 博客部分

總共有 7 個博客部分，有深色和淺色變化。 這些部分顯示您博客上的精選帖子。 佈局 1 具有簡單和簡約的設計，在圖像上具有放大懸停效果，在帖子標題上具有下劃線懸停效果。

第三個博客佈局在右上角有一個 CTA 按鈕和帶有輕微陰影懸停效果的卡片。

這是博客佈局 5 的深色變體。它具有懸停效果，為帖子標題添加下劃線並將卡片稍微向上移動。

博客佈局 7 的特色是一張卡片，頂部是帖子信息，中間是圖片，底部是閱讀更多按鈕。

Divi Designer 輪播部分

有 16 種不同的輪播設計，有幾種不同類型的輪播。 第一個例子是輪播 4，一個團隊成員輪播。 每張團隊成員卡片都有圖像、姓名、職位、描述和社交媒體圖標。

佈局 7 是推薦輪播。 這是黑暗的佈局。 每個輪播項目都有個人資料照片、推薦文本、姓名和職位。

Carousel 13 是一個博文輪播。 這是一個簡單的卡片佈局，博客類別位於圖像的右上角，帖子標題位於下方。

Divi Designer 聯繫方式

Divi Designer 帶有 20 個聯繫人部分佈局。 這是佈局 4，左側是一些文本和聯繫信息，右側是聯繫表格。

聯繫人佈局 6 是一個簡單的部分，左側有電話號碼、一些文本和 CTA 按鈕，右側有圖像。

佈局 15 的特點是左側是聯繫表格，右側是漸變背景上的聯繫信息。

這是佈局 15 的深色變體。

Divi Designer 櫃檯部分

總共有16個櫃檯佈局。 第一個佈局是獲取免費報價，左邊有一些文本和一個 CTA 按鈕，下面有一個圖像和一些數字計數器。

佈局 9 的特點是頂部有一些文本，下方有帶圖標的數字計數器。

計數器佈局 11 有一個計數器欄，它會在頁面加載時填充。 這是黑暗的佈局。

櫃檯佈局 15 的特點是左側有文字和一個 CTA 按鈕，右側有更多文字，後面是數字計數器。

Divi Designer CTA 部分

Divi Designer Pack 中有 15 個 CTA 佈局。 第一個示例是佈局 5。它是一個 CTA 部分，突出顯示了一個移動應用程序，它具有可以鏈接到 Google Play 商店和 App Store 的圖像。

這是黑暗變體中的 CTA 佈局 7。 它有一個帶有圖標、文本和兩個 CTA 按鈕的深色疊加圖像。

Layout 9 具有一個帶有一些文本的 blurb 模塊和一個覆蓋圓角圖像的 CTA 按鈕。

Layout 10 具有一些文本和社交媒體圖標。

Divi Designer 常見問題解答部分

有 15 個常見問題解答部分佈局。 這是常見問題解答的第一部分。 它的一側是大圖像，右側是切換式常見問題解答。

這是常見問題解答第一部分的深色版本。

FAQ 佈局 4 具有全角切換佈局。

最後，FAQ 佈局 7 在左側切換 FAQ 問題，在右側切換圖像、一些文本和 CTA 按鈕。

Divi 設計師英雄部分

總共有 30 個英雄部分佈局。 第一個，佈局 8，左側有一些文本，右側有人物的透明圖像。

英雄佈局 9 的特點是帶有大英雄文本和搜索欄的深色背景圖像。 搜索欄下方是三張帶有描述文字和閱讀更多按鈕的圖像卡片。

佈局 19 使用大的深色背景圖像並具有一些文本和兩個按鈕。

Divi Designer 定價部分

還有 20 種定價佈局。 這是定價佈局 7。它具有粉紅色背景和兩張定價卡，右側有一些文字。 每張定價卡都有標題和副標題、價格、詳細信息和立即購買按鈕。

定價佈局 8 具有三個定價層。 標題和價格以及副標題位於左側。 功能在右側，帶有復選標記，立即購買按鈕在右側。 中間選項以綠色突出顯示。

佈局 12 包含三張卡片，每張卡片的頂部都有圖標、標題和副標題以及價格。 有一個綠色橫幅將頂部與功能分開，然後是一個功能列表，後面是一個按鈕。 每張卡片都有一個懸停效果，可以在懸停時向上移動卡片。

這是定價佈局 19 的深色版本。它在頂部有一些宣傳圖標以突出功能，以及三個定價計劃塊。

Divi Designer 服務部門

Divi Designer Pack 附帶 25 種服務佈局。 佈局 3 具有一個標題、三個帶有描述文本的深色背景上的簡介模塊和一個按鈕。

服務佈局 14 有三張卡片，頂部有一個圖標、一些描述文本、一個編號文本列表和一個查看詳細信息的鏈接。

佈局 19 具有一些標題文本和描述文本，以及六個帶有代表每個服務的圖標的簡介模塊。

這是服務佈局 25 的深色版本。它有四個服務部分，懸停效果使卡片變暗。

Divi Designer 滑塊部分

共有 15 種滑塊佈局。 滑塊佈局 1 具有一個小文本滑塊，每張幻燈片上都有一個數字、文本和一個按鈕。 滑塊上方有一個帶有綠色背景的標題部分，右側有一個圖像。

滑塊佈局 8 是帶有深色覆蓋層的大圖像滑塊。 左邊是文字，下面是按鈕。

滑塊佈局 12 在白色背景上有一個大背景圖像和文本幻燈片，隨著每張幻燈片的變化而變化。 每張幻燈片上還有一個按鈕。

Divi 設計師團隊部分

共有 25 個團隊部分佈局。 佈局 8 具有一個標題和三個具有懸停效果的團隊成員圖像。 當您將鼠標懸停在圖像上時，會出現一個深色疊加層，並顯示團隊成員的姓名、職位和社交媒體圖標。

這是佈局 8 的深色版本。

佈局 13 的左側有一個標題和文本，以及一個 CTA 按鈕。 右邊是三個圓形的團隊成員圖像。 與上一個設計類似，當您將鼠標懸停在圖像上時，會顯示團隊成員的姓名、職位和社交媒體圖標。

此設計採用 18 號佈局，並以帶有團隊成員照片、職位和社交媒體鏈接的卡片為特色。 右側是標題和說明，然後是 CTA 按鈕。

Divi 設計師推薦部分

有 25 個不同的推薦部分。 這是佈局 1，頂部有標題和正文，後面是三個推薦部分。 每個推薦信都有一個圖標、一個圖像、正文、姓名、職位和公司。

這部分是佈局 2。它有兩張推薦卡，帶有引號圖標、文本、圖像、名稱、職位和公司名稱，圖像背景帶有深色覆蓋層。 在左側，您可以找到一些標題文本、正文文本和一個 CTA 按鈕。

這是佈局 5 的深色版本，具有包含客戶推薦的彩色部分。

佈局 7 的左側有一個推薦滑塊，底部有圖像、推薦文本和名稱。 右側是標題文本、正文文本和 CTA 按鈕。

Divi Designer 主題生成器模板

接下來是主題構建器模板。 這些是頁眉、頁腳和正文模板，可以從 WordPress 儀表板的 Divi 設置中的主題構建器上傳。

Divi Designer 頁腳模板

共有 20 個頁腳模板。 首先是頁腳佈局 4。此設計在左側具有徽標、社交媒體圖標和版權聲明。 右邊是兩列菜單項。

頁腳佈局 13 在左側有聯繫表格，在右側有聯繫信息和社交媒體圖標。 還有一個帶有版權信息的子頁腳欄。

頁腳佈局 19 在左側具有徽標、地址和開放時間。 中間是菜單欄，右邊是時事通訊註冊表單和社交媒體鏈接。 最底部是版權聲明。

Divi Designer 標題模板

Divi Designer Pack 中也有 20 個標題模板。 這是標題 7。它有一個綠色的二級菜單欄，上面有聯繫信息和一個 CTA 按鈕。 主菜單欄左側有徽標，右側有菜單項。

標題佈局 8 的特點是聯繫信息，頂部有一個內聯徽標。 下面是菜單項。

標題佈局 13 在左側具有一些社交媒體圖標，在中間有一個徽標，在右側有一個 CTA 按鈕。 下面是菜單項，左對齊，搜索欄右對齊。

Divi Designer 404 模板

有 25 種不同的 404 頁面模板。 第一個設計，佈局 6，在 404 錯誤文本後面有字母“OOPS”。 此佈局還有一個橙色按鈕可轉到主頁。

這是佈局 9。它具有一些大的陰影文本和 404 錯誤，以及一個返回主頁的按鈕和一些社交媒體圖標。

佈局 12 以大字體顯示 404 號碼，並有一個返回主頁的按鈕。

Divi Designer 博客模板

Divi Designer 博客頁面模板

Divi Designer Pack 附帶了 20 個博客模板。 博客佈局 1 具有帶有標題和按鈕的圖像標題。 帖子列在左側，帶有特色圖片、帖子信息和閱讀更多按鈕。 右側有一個側邊欄，帶有搜索欄、最近的帖子和最近的評論。 底部是另一張覆蓋了文字的圖像。

這是博客佈局 1 的深色版本。

博客佈局 8 具有一些彎曲的部分分隔符和頂部帶有文本和按鈕的標題部分。 博客帖子採用卡片式佈局，包含圖像、帖子詳細信息和閱讀更多按鈕。 頁面底部是另一個文本部分。

博客佈局 18 的特點是帶有文本和按鈕的標題部分，後面是兩個博客欄。 左欄顯示帶有大特色圖片的帖子。 右欄僅包含帖子的詳細信息和閱讀更多按鈕。 最後，頁腳中還有一些附加文本。

Divi Designer 帖子模板

該包附帶 20 種不同的帖子模板。 帖子佈局 4 的特色圖片位於頁面的最頂部，帖子標題、帖子信息和一個按鈕疊加在一起。 接下來是帖子內容和評論。 右側有一個側邊欄，其中包含搜索欄、最近的帖子和最近的評論。 頁面底部是一些附加文本。

這是後期佈局 5 的深色版本。特色圖片位於頂部，帶有彎曲的分隔線。 帖子內容和評論位於深色背景上，後面是一個帶有圖像和疊加文本的部分，用於宣傳優惠。

佈局 11 從頂部的帖子標題開始，然後是大特色圖片。 然後，您可以找到帖子內容和評論。 右側有一張包含帖子信息的卡片。

帖子佈局 13 還在頂部顯示標題，然後是特色圖片。 帖子信息列在圖片下方。 接下來是帖子內容和評論，最後是相關帖子部分，顯示博客中其他帖子的卡片。

Divi 設計師 Woo 模板

Woo 模板是與 Woo Commerce 插件一起使用的佈局。

Divi Designer 購物車模板

包中包含 13 個購物車模板。 購物車佈局 1 具有藍色主題。 頂部有一個標題，後面是購物車，您可以在其中查看購物車內容、申請優惠券和更新購物車。 在此下方有一個返回商店按鈕。 右側是購物車總數，然後是繼續結帳按鈕。

購物車佈局 2 的標題帶有購物車圖標。 然後是購物車，您可以在其中看到產品。 緊接著左邊是一些優惠券信息，右邊是購物車總數和繼續結賬按鈕。

購物車佈局 8 以標題開頭，然後是購物車內容。 下面是一些宣傳圖標和返回商店按鈕。 接下來是購物車總數和繼續結帳按鈕。 右側是帶有一些常見問題解答的手風琴模塊。

這是購物車佈局 8 的深色版本。

Divi Designer 結帳模板

總共有 13 個結帳模板。 結帳佈局 3 在頂部具有指向商店和購物車頁面的鏈接，然後是優惠券輸入部分。 左下方是賬單明細和附加信息，右下方是訂單總額和付款。 這是深色版本。

這是第四個模板。 它在頂部有幾個鏈接到購物車和商店的圖標，然後是優惠券代碼條目。 左側是賬單明細和附加信息，右側是訂單總額和付款方式。

這是結帳佈局 4 的深色版本。

結帳佈局 10 的特點是頂部有標題和優惠券條目，後面是賬單明細和其他信息。 右側是訂單總計、付款和一些宣傳模塊。

Divi Designer 產品模板

還有 13 個產品模板。 這是佈局 2，它在頂部顯示了產品的大圖像。 接下來是產品名稱、成本、描述和添加到購物車按鈕。 以下是相關產品和評論。

產品佈局 6 具有較暗的背景，左側是產品照片，右側是產品信息，帶有添加到購物車按鈕。 以下是描述、評論和相關產品。

產品佈局 10 有一個卡片佈局，左側有產品信息和添加到購物車按鈕。 右邊是產品圖片。 以下是評論和相關產品。

這是產品佈局 10 的深色版本。

Divi Designer 商店模板

最後，還有 10 個商店模板隨 Divi Designer Pack 一起提供。 這是佈局 4，它的特點是帶有圖像的標題，然後是側邊欄和產品。 底部是一些帶有大圖標的 blurb 模塊。

商店佈局 8 的特點是帶有文本和圖像的標題，下方帶有邊框的產品，然後是一些簡介模塊。

這是商店佈局8的深色版本。

最後，商店佈局 9 的特點是帶有圖像的標題，然後是左側的產品和右側的側邊欄，然後是底部的一些宣傳模塊。

購買 Divi Designer Pack

Divi Designer Pack 在 Divi Marketplace 中可用。 無限網站使用和終身更新的費用為 19 美元。 該價格還包括 30 天退款保證。

最後的想法

我們只是觸及了本文中的冰山一角，在 Divi Designer Pack 中還有更多佈局等待您去發現，所有佈局都有不同的風格和用途。 當然，每個佈局都可以完全根據您自己的內容進行定制，並根據您的特定用例進行更改，您可以組合許多不同的部分佈局以輕鬆創建整頁佈局。 要預覽您使用 Divi Designer Pack 獲得的所有不同佈局，請查看現場演示。

我們很想听到您的聲音！ 您是否嘗試過 Divi Designer Pack？ 在評論中讓我們知道您的想法！