Divi 插件亮點：Divi 模塊生成器

Divi Builder 包含許多模塊，可幫助您將幾乎任何設計元素添加到佈局中，但是如果您想創建自己的模塊怎麼辦？ 一個名為 Divi Module Builder 的第三方插件為您提供了這種能力。

在本文中，我將介紹該插件並了解它可以做什麼以及使用起來有多簡單。 它需要 Divi 3.0.50 或更高版本，並且適用於 Divi 和 Extra。 它可以從開發者的網站獲得：DiviPlugins.com。

安裝 Divi 模塊生成器

激活插件後，單擊DMB 激活頁面。 或者，您可以通過轉到儀表板中的自定義模塊並單擊許可證來查看此屏幕。

輸入您的許可證密鑰，然後單擊激活許可證。 儀表板中添加了一個名為Custom Modules 的新菜單。 在此菜單中，您將找到構建模塊所需的一切。

添加模塊

模塊是在儀表板菜單中的自定義模塊、添加模塊下創建的。 您將使用兩個區域來創建模塊。 左側的區域是您將創建字段的地方。 右側的區域是您將添加字段將使用的代碼的地方。 您可以使模塊標准或全寬。 您可以在準備好後保存草稿或發布。 模塊發布後，它將出現在 Divi Builder 中。

字段

您的模塊可以有任意數量的字段。 每個字段中都有字段屬性。 以下是對每個字段屬性的詳細介紹：

字段標籤– 將在模塊的內容選項卡中顯示為字段標題的標籤。

字段標識符– 您將用於在 HTML 中引用字段的唯一值。 僅使用小寫字母、數字和下劃線作為字段標識符。

字段描述- 添加您自己的描述以解釋該字段的用途。 這將顯示在模塊內容選項卡的輸入下方。 此字段是可選的，但我建議添加信息或示例來幫助用戶。

字段類型- 確定用戶看到的輸入類型。 從下拉框中選擇多種字段類型，包括文本、文本區域、顏色、圖像、是/否切換和圖標。

設計選項卡- 在模塊的設計中為此字段添加字體控件。 如果您選擇文本或文本區域，您將看到此選項。 您必須通過在 HTML 中添加一個類來確定要應用字體控件的元素。

隱藏字段- 讓用戶控制 HTML 輸出中元素的字體，而不讓他們控制該元素的內容。 只有在選擇了文本或文本區域字段類型時，此選項才可用。

添加字段標籤、標識符、描述、選擇字段類型、啟用設計選項卡或選擇隱藏字段。 通過單擊每個字段上的向上/向下箭頭重新排列字段。 每個部分和字段都提供了說明和示例。

代碼

添加自定義 HTML、PHP、CSS 和 JavaScript 以控制輸出。 HTML 字段可以接受自定義查詢和 PHP。 您需要先啟用 PHP，然後它才能識別代碼。 否則它會在屏幕上打印代碼。 HTML 和 PHP 都使用字段標識符來引用字段。

代碼快捷方式作為代碼字段下的按鈕提供。 這包括標籤和字段標識符。 添加您的字段標識符，然後它在代碼區域的底部可用，您可以單擊以將它們添加到您的代碼中。 HTML 標識符顯示為橙色按鈕，PHP 顯示為綠色。 您可以使用的不僅僅是快捷方式，但這些都是為了幫助加快開發時間。

創建模塊

這是創建模塊的快速示例。 標題將是出現在 Divi Builder 模塊上的名稱。 我添加了字段標籤、描述，選擇了 Text 作為字段類型，並創建了一個字段標識符。

我保存為草稿，因此標識符將出現在 HTML 快捷方式中。 接下來，我從快捷方式中選擇了 H1 標籤，將光標置於標籤之間，並從 HTML 快捷方式中選擇了標籤。 完成後，我點擊發布。 結果應該是一個帶有用戶可以輸入文本的字段的模塊。 輸出將文本顯示為標題 1。

該模塊現在出現在 Divi Builder 中。 我可以像任何 Divi 模塊一樣添加到頁面。

“內容”選項卡包含我隨標籤添加的字段。

該模塊顯示我在字段中輸入的文本。 由於我添加了 HTML 以將其顯示為 H1，因此文本自動具有 H1 屬性。 我可以添加“設計”選項卡以包含更多自定義功能。 這將需要一些代碼來正確定位該字段。

模塊

您可以在儀表板菜單中看到模塊列表。 轉到自定義模塊，模塊。 您可以在此處編輯或刪除您的模塊。 它顯示每個模塊的 PHP 是打開還是關閉。 如果你想克隆一個模塊，你必須在Settings 中查看它們。

自定義模塊設置

設置菜單提供了一個可以管理模塊的位置。 您可以查看已發布和草稿模塊。

您可以克隆它們，這為您提供了一個開始模塊的好地方，該模塊需要您在另一個模塊中使用的大量代碼。 您還可以編輯、禁用或啟用 PHP（如果您因代碼錯誤而被鎖定在編輯器之外，這會很有幫助 - 我這樣做並使用此功能來編輯模塊），以及導入和導出您的模塊。

添加依賴

您可以在此處添加第三方 CSS 和 Javascript 依賴項。 將它們添加為外部或內部 URL。 從下拉框中選擇 CSS 或 Javascript，添加名稱並添加 URL。 然後可以在任何頁面上使用它們。 它給出了一個使用 Font Awesome 的例子。 這是在一個位置創建依賴項然後在任何地方使用它的極好方法。

Divi 模塊生成器示例 - 自定義博客網格

我沒有創建一個“好的”模塊作為示例，而是展示了開發人員創建的很棒的示例——自定義博客網格（可在開發人員的網站上免費下載）。 它包括 3 個字段，HTML、PHP 和 CSS。 下面來看看每一個。

自定義博客網格模塊

字段 1 標記為類別，使用類別作為標識符，字段類型設置為文本。

字段 2 標記為黑白圖像效果。 標識符是過濾器，歸檔類型是是/否切換。 過濾器是在 CSS 中創建的。

字段 3 被標記為 Post Title 並使用 post_title 作為標識符。 字段類型設置為文本並啟用了設計選項卡。 我們將在模塊中看到此字段的自定義。 該字段在 HTML 中被賦予一個 H2 類。

PHP 被選中，以便它可以在 HTML 輸出代碼框中使用。

自定義 CSS 添加到 CSS 輸出框中。

這是Javascript。 您需要對 HTML、PHP、CSS 和 Javascript 有很好的了解才能充分利用此插件。 換句話說，這是一個面向開發人員的插件。

Divi Builder 中的自定義博客網格模塊

模塊發布後，您將在 Divi Builder 中找到它。

模塊中出現的設置及其標籤將根據您所做的選擇而有所不同。 此模塊允許您添加類別、啟用黑白效果並在“內容”選項卡中添加帖子標題。 它還包括背景設置（模塊的默認設置）。

為此模塊啟用了設計選項卡。 它包括文本、帖子標題文本、邊框、間距和動畫的設置。

自定義博客網格結果

結果是一個帶有懸停動畫的博客網格。 我啟用了黑白模式，因此除非我將鼠標懸停在圖像上，否則圖像將以黑白顯示。 我更喜歡這種懸停形式——在懸停時顯示圖像而不是模糊它。

在這個中，我禁用了黑白模式，更改了標題字體，並添加了背景漸變。 可以在代碼中添加更多調整來更改按鈕、添加覆蓋等。如果您可以編寫代碼，您幾乎可以讓它做任何您能想像的事情。

許可證和文件

共有三種許可證可供選擇：單一許可證、無限制許可證和終身許可證。 Unlimited 許可證涵蓋無限的網站，並包括 1 年的更新和支持。 Lifetime Unlimited Sites 許可證包括終身更新和支持。

開發人員的網站上提供了文檔。 包含示例代碼以及分步說明。

最後的想法

Divi Module Builder 是功能強大的插件，在正確的人手中具有很大的潛力。 由於它確實需要良好的代碼知識，因此並不適合所有人。 這為開發人員提供了創建和共享模塊的絕佳工具。 我喜歡您可以從一個站點導入和導出到另一個站點。 每個使用該模塊的站點都需要安裝插件。 如果您對代碼有很好的了解並且對創建自己的 Divi 模塊感興趣，那麼 Divi Module Builder 值得一看。

我們希望聽到您的意見。 您是否嘗試過 Divi Module Builder？ 請在評論中告訴我們您對此的看法。

特色圖片來自 aliaksei kruhlenia/shutterstock.com