Divi 產品亮點：Divi Den Pro – 佈局庫

Divi Den Pro – Layout Library 是一款第三方插件，具有大量預先設計的 Divi 元素庫，可幫助您更快地構建網站。 它包括一個獨特的用戶界面，可搜索和排序，使佈局易於查找。 在本文中，我們將了解 Divi Den Pro – 佈局庫，以幫助您確定它是否適合您的 Divi 設計工具箱。

安裝 Divi Den Pro – 佈局庫

安裝 Divi Den Pro – Layout Library 很簡單。 它的工作原理與上傳任何插件相同，但您需要登錄您的 Divi Marketplace 帳戶才能在 Divi 中使用它。 首先，要安裝，請轉到：

1. 插件
2. 添新
3. 上傳插件
4. 選擇文件
5. 現在安裝

接下來，安裝插件後，照常激活它，您將看到一個新菜單添加到您的儀表板。

1. 激活插件

佈局庫內容

Divi Den Pro – 佈局庫帶有 2615 個庫項目。 這包括 1988 個部分和模塊、631 個佈局、39 個菜單和 18 個完整的網站設計。 所有項目都已預先設置樣式。 這些佈局針對不同的屏幕尺寸進行了標記、測試和優化。

有幾種方法可以在您的 Divi 佈局中使用它們。 您將在 Divi Den Pro DM 菜單和 Divi Theme Builder 中找到佈局。 Divi Den Pro DM 菜單是使用它們的最簡單方法。 您可以按關鍵字和類別搜索它們，並將它們導入您的 Divi 庫。

Divi Den Pro DM 菜單

您會在 WordPress 儀表板中找到一個名為 Divi Den Pro DM 的新菜單項。 該菜單包含許多鏈接，您還可以在菜單本身中找到這些鏈接作為選項卡。

佈局查找器

第一個選項卡是佈局查找器。 這包括一個搜索框，左側帶有過濾器，右側帶有結果。 它還包括選項卡，因此您可以查看所有佈局、僅免費佈局或僅查看專業佈局。 過濾器顯示該類型的佈局數量。 它們分為佈局、部分、模塊、類別、集合、Divi Theme Builder 和 Plugin Theme Builder。

結果區域顯示佈局的縮略圖。 如果佈局大於容器，縮略圖將在懸停時滾動。 您可以在另一個選項卡中查看佈局，將佈局保存到您的 Divi 庫，或將佈局作為 JSON 文件下載到您的計算機。

選擇一個過濾器會打開它以顯示選項。 我打開了 Collections，它顯示了 Divi Den 中佈局的名稱。 選擇一個會在右側區域顯示該集合中的佈局。

我單擊查看佈局，它在另一個選項卡的 Divi Den 頁面上打開了演示。 該頁面顯示多個佈局、部分等。我將鼠標懸停在頂部中心的圖像上以顯示其懸停效果。

最新的

最新選項卡顯示來自 Divi Den 博客的最新帖子。 這是了解佈局庫中新增功能的好方法。

教程

教程選項卡包括所有教授如何使用 Divi Den Pro – 佈局庫的教程。 它們包括在您單擊教程時顯示的嵌入式視頻，因此您可以直接從 Divi Den 儀表板學習而無需離開 WordPress。 這有助於提高可用性，因此如果您需要幫助，可以在這裡找到。

主題生成器

Theme Builder 選項卡將佈局分為 Divi Theme Builder 和 Plugin Theme Builder。 它顯示了集合、頁麵類型等。這些也被添加到 Divi Theme Builder 中。 您還可以從此處啟動 Theme Builder。

Plugin Theme Builder 有一個打開 Theme Customizer 的鏈接。

主題定制器為頁面、博客和全局設置添加了三個新的定制器選項卡。 這包括添加的功能，例如彈出式定制器、粘性欄、更多圖標、返回頂部按鈕、即將推出的頁面、模板定制等等。

自定義 CSS 文件

“自定義 CSS 文件”選項卡提供來自 Divi Den 佈局的自定義 CSS，您可以復制和修改它們。 單擊其中一個會在另一個選項卡中打開 CSS。 嵌入式視頻展示瞭如何使用自定義 CSS。

先進的

高級選項卡包括白標籤選項卡和更多選項選項卡。 White Label 可讓您重新命名插件以匹配您的品牌。

更多選項選項卡允許您在 Divi Builder 元素中移動 Divi Den Pro 選項卡。 這是默認啟用的。

Divi Builder 中的 Divi Den Pro 佈局庫

Divi Den Pro 的選項卡 - 佈局庫已添加到模塊模式。

選擇選項卡會打開菜單，您可以在其中選擇所需的佈局。 佈局以 JSON 文件的形式下載，因此如果要使用它們，您需要將它們上傳到頁面和帖子。

Divi Theme Builder 中的 Divi Den Pro 佈局庫

Divi Den Pro – Layout Library 界面也被添加到 Divi Theme Builder 屏幕的底部。 它的工作方式與在 WordPress 儀表板中的工作方式相同。

它在主題生成器中的工作方式與在頁面和帖子中的工作方式相同。

Divi Den Pro 佈局庫示例

現在我們已經了解瞭如何使用 Divi Den Pro – Layout Library 界面，讓我們來看幾個示例。 我們將看看每種類型的一些。

佈局

接下來，我們將看看一些佈局。 我會將它們加載到 Divi Theme Builder 中。 一旦您將佈局保存到您的 Divi 庫中，它們就可以在您的佈局中使用。 搜索它們並選擇左側的類別。

商店著陸頁 V3 拉格納

這是 Shop Landing Page V3 Ragnar 的頂部。 它包括一個帶有電子郵件 CTA 的英雄部分。 商店部分顯示特色產品，並包括一個動畫覆蓋層，該覆蓋層在懸停時以大文本滾動消息。

這是 Shop Landing Page V3 Ragnar 的底部。 超大圖像創建商店 CTA 並包含動畫按鈕。 獨特的博客部分在一側顯示的文本後面顯示特色圖像。

職業頁面 V1 蒂娜

這是 Careers Page V1 Tina 的頂部部分。 它包括一個帶有重疊標題的主圖、帶有標註的介紹和兩列文本。 接下來是一段以卡片形式顯示的未平倉頭寸。

這是 Careers Page V1 Tina 的底部。 帶有懸停動畫的簡介提供信息，然後是 CTA 以發送 CV 和公司津貼的一部分。

舊時博客頁面

這個例子是舊時代博客頁面的頂部。 它包括一個英雄部分，在背景圖像上有一條消息和一個帶有懸停動畫的按鈕。 博客部分在左側顯示帶有大特色圖片的博客文章，在右側顯示帶有較小特色圖片的博文作為側邊欄。 一條黃線將博客部分與英雄部分分開。 所有的博客卡片都包含傾斜動畫。

這是舊時代博客頁面的底部。 它還使用黃線進行分隔，包括兩個三欄博客部分、一個大電子郵件表單和一個頁腳。

菜單頁面佈局傑米

這是菜單頁面佈局 Jamie 的頂部。 它包括一個英雄部分，其中帶有鏈接到各種食物菜單類別的圖標。 它們包括懸停動畫。 隨後是一個兩列的食物菜單，左側是圖像，右側是描述。 食物分為幾類。

菜單頁面佈局傑米

這是菜單頁面佈局 Jamie 的下半部分。 它延續了食物菜單，並包括帶有全角地圖的聯繫信息。

Showreel 主頁佈局

這是 Showreel 主頁佈局的頂部。 英雄部分包括一個按鈕，用於播放嵌入的視頻和全屏背景圖像上的幾個簡介。 接下來是一組用於顯示信息的選項卡。 帶有動畫覆蓋的大圖像鏈接到服務。

這是 Showreel 主頁佈局的底部部分。 它延續了大圖像，並包括另一部分圖像，用於帶有傾斜疊加動畫的服務。 它還包括樣式化的數字計數器、電子郵件表單和頁腳。

視覺進度條頁面 Freddie

這是 Visual Progress Bar Page Freddie。 它有一個優雅的佈局，但我想展示的主要元素是進度條。 這是佈局的英雄部分。 菜單位於屏幕底部。 滾動時，菜單會附加到屏幕頂部並顯示佈局的進度。

此示例中的部分是案例研究。 對於我滾動過去的每個部分，進度條都顯示為黃色。 本節的圖像包括傾斜效果。

部分

如果您將 Divi Den Pro – 佈局庫部分保存到您的 Divi 庫中，則會將 Divi Den Pro DM 選項卡添加到您的部分模式中。

Greatest Hits 音樂模組 Freddie

Greatest Hits Music Module Freddie 提供了一個帶有黑色背景和黃色懸停效果的風格化音頻播放器部分。

樣式庫演示

Styling Gallery Demo 提供了一個有趣的圖片庫，具有不同的邊框形狀和一塊顏色來分隔圖像。

臨塘工藝恩典

Styling Gallery Demo 提供了一個步驟列表。 它們水平放置，包括形狀圖像或顏色，以及懸停效果。

Thunderbolt 產品 Freddie

Thunderbolt Product Freddie 是一個產品部分，一側顯示產品滑塊，另一側顯示樣式信息。

阿魯拉時間線恩典

Alula Timeline Grace 創建了一個替代的垂直時間線，一側是圖像，另一側是信息。

模塊

儀表板中的“模塊”選項顯示按鈕。 這是我下載的一些。

我已將下載的所有按鈕添加到一個頁面中。 每個按鈕都包含引人入勝的懸停動畫。

在哪裡購買 Divi Den Pro 佈局庫

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

結束對 Divi Den Pro 佈局庫的思考

這就是我們對 Divi Den Pro – 佈局庫的看法。 這個庫中有很多佈局。 用戶界面很簡單。 佈局的搜索、排序、導入和下載非常直觀。 我發現部分和模塊上的鏈接比儀表板更受限制，一旦佈局在庫中，就可以通過選擇“從庫中添加”選項來使用它們。 如果您有興趣將數千個專業設計的佈局添加到您的 Divi 庫中，Divi Den Pro – 佈局庫值得一看。

我們希望收到你的來信。 您是否嘗試過 Divi Den Pro – 佈局庫？ 在評論中讓我們知道您的想法。