Divi 插件亮點 - Divi Overlays

Divi Overlays 是 Divi 的插件，DiviLife 是社區成員 Tim Strifler 的第三方 Divi 開發公司。 它允許您使用 Divi Builder 輕鬆創建彈出窗口。 它不僅僅是一個模態。 您可以創建全屏疊加，並使用 Divi Builder 在疊加中添加您想要的任何類型的內容，然後用頁面上的任何內容觸發它，包括按鈕、鏈接、圖像等。您可以調整背景顏色、字體顏色，然後選擇開場動畫。

疊加層可以包括表格、定價表、購物車、視頻、圖像、下載鏈接、地圖等等。 您甚至可以將其設置為在頁面加載時打開疊加層。 它們使您無需等待頁面加載即可顯示其他內容。

使用 Divi Builder 的能力當然意味著您可以訪問每個模塊和設置來創建您的疊加層。 這意味著您可以訪問近 40 個模塊，並且可以使用來自其他插件的短代碼。 通過訪問此數量模塊，您只會受到您的想像力的限制。

下載： Divi Overlays 下載

在本概述中，我將介紹 1.1 版，其中包括客戶要求的一些新功能。 最後，我將介紹一些您可以在 2.0 版中看到的功能。 對於示例，我使用的是多用途線框套件 vol。 1. 讓我們深入了解……

安裝

像任何高級插件一樣上傳、安裝和激活插件。 激活後，您需要輸入許可證密鑰。 轉到設置並在儀表板中選擇Divi Overlays Activation 。

輸入 API 密鑰和電子郵件（來自您在 DiviLife 的帳戶），然後選擇Save Changes 。 現在您已準備好開始創建疊加層。

添加新的 Divi 疊加層

疊加層是與您的內容分開創建的，然後使用簡單的代碼從您的內容中打開。

要創建疊加層，請轉到Divi Overlays並在儀表板中選擇Add New 。 從這裡您可以選擇使用 Divi Builder。 這與使用 Divi Builder 的任何普通頁面或帖子的工作原理相同，包括特殊的 Divi 插件和模塊，您甚至可以使用 Divi Leads 運行 A/B 測試。 他們甚至在一個全局模塊中工作。 您還可以導入和導出您的疊加層。

從右上角的下拉框中選擇疊加動畫和設置。 在 Divi Builder 下是背景和字體顏色的選擇。

右側添加了一些設置。 一個名為 Divi Overlay Animation 的框包括一個下拉框，您可以在其中從 11 個動畫中進行選擇。 這決定了疊加在屏幕上的顯示方式。

添加了一個複選框以防止主頁面在屏幕上顯示覆蓋層時滾動。 這使用戶保持在屏幕上的相同位置，因此當他們關閉覆蓋時，他們知道他們在哪裡。 如果他們單擊多個按鈕之一打開疊加層，這將特別有用。 這樣他們就知道他們點擊了哪個按鈕並且不會失去他們在屏幕上的位置。

我添加了一個視頻模塊並為疊加動畫選擇了精靈，並選擇了防止主頁滾動。

現在我已經創建了覆蓋層，我可以在頁面上使用它。 要做到這一點，到航空維修疊加在儀表盤和選擇航空維修重疊，以查看可用的疊加列表。 要使用覆蓋複製您要使用的代碼並將其粘貼到適當的位置。 讓我們來看看如何詳細地做到這一點。

鏈接是使用 CSS ID 創建的。 複製 CSS ID 並添加一個開始 <a id= 和結束 </a> 標籤，如示例中所示。

在這個例子中，我使用了一個登陸頁面。 我想向文本、應用商店徽標、手機圖像添加觸發器，創建一個按鈕，並在菜單中放置一個鏈接。

文字鏈接

複製內容簡碼並將其粘貼到頁面上的代碼或文本模塊（任何接受簡碼的模塊）中。 我將其粘貼到代碼模塊中。 您可以在此模塊中放置任意數量的 Divi Overlay 短代碼。 將模塊放在哪裡並不重要。 我建議您進行測試以確保該模塊不會影響您的佈局。

我想使用文本 WATCH A DEMO 作為打開視頻的鏈接。 為此，請從儀表板屏幕的疊加列表中復制 CSS ID。

將代碼粘貼到您的文本模塊中，並像這樣設置文本格式：

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

在這種情況下，文本已經嵌入到一些 HTML 中，但沒關係。 只需將代碼放置在 HTML 中的正確位置即可。

文本現在是藍色的，表示它是一個鏈接。

當我單擊文本時，我會看到我在疊加層中放置了鏈接的視頻。 疊加層以我選擇的動畫打開。

圖片鏈接

有兩種方法可以將 CSS ID 添加到圖像。 您應該使用的方法取決於圖像在您的內容中的放置方式。 這裡有兩個例子：

文本模塊

我想讓應用商店圖片可以點擊，但我希望它提供一些選項和信息，而不是帶你去應用商店。 這需要一個新的覆蓋層，這也需要代碼模塊中的新短代碼。

現在，當我單擊應用程序徽標時，我會看到一個覆蓋圖，其中包含指向兩個不同應用程序商店的鏈接。 為了更好的 UX/UI，我會更改按鈕的圖形，但這顯示了在保持內容乾淨的同時提供多個選項的潛力。 在這個例子中，我將覆蓋背景設置為白色，不透明度為 90，字體顏色為深灰色。

圖像模塊

在上面的示例中，我將代碼添加到 HTML 中，因為圖像放置在文本模塊中。 另一種選擇是將圖像放置在圖像模塊中並使用自定義 CSS選項卡中的 CSS ID。

在此佈局中，移動電話位於圖像模塊中。 我將添加 CSS ID，以便打開視頻疊加層。

在鏈接 URL 中使用 #open-overlay（或帶有 # 符號的類似文本）。 現在我可以單擊圖像並打開疊加層。

按鈕鏈接

將覆蓋鏈接添加到按鈕與將其添加到圖像相同。 請記住將短代碼添加到代碼模塊中。

將 # 文本添加到按鈕的 URL。 我像以前一樣使用 #open-overlay 因為它是描述性的（我從 Tim Strifler 那裡偷來的，但不要告訴他）。

將 CSS ID 代碼添加到自定義 CSS選項卡。

就是這樣！ 新按鈕現在可以打開聯繫表單。

菜單鏈接

要創建菜單鏈接，請複制菜單 ID並轉到外觀、菜單，然後選擇要添加鏈接的菜單並加載它。 （有關更多信息，請參閱本文如何在 WordPress 中創建自定義菜單結構）。

選擇右上角的屏幕選項，然後選中標有鏈接關係 (XFN)的框。

選擇自定義鏈接。 添加 # 符號作為鏈接，添加您希望它顯示的文本，然後選擇添加到菜單。 將菜單 ID 粘貼到鏈接關係字段並保存菜單。 如果您尚未將菜單分配到“菜單設置”下的顯示位置，請務必將其分配給某個顯示位置。 在本例中，我將其設置為Primary Menu 。

菜單項現在出現在菜單結構中。 單擊它將打開疊加層。 這具有在導航結構和站點範圍內提供 CTA（號召性用語）的優點。

小工具

該插件還包括一個新的小部件區域。 使用小部件和任何其他方法的區別在於您放置短代碼的位置。 而不是一遍又一遍地將短代碼放置在模塊中，您可以將其放置一次，使其成為全球性的。 然後，您可以從任何頁面上的任何項目、側邊欄、主菜單或頁腳菜單觸發它。

這是我正在使用的多用途線框套件 vol 中的頁面。 1. 我想讓按鈕可點擊，以便它會在疊加層中打開視頻。 我將我的短代碼添加到小部件區域（通過將它們放置在文本小部件中）並將 CSS ID 添加到頁面上的圖像。

小部件中的短代碼甚至在小部件不可見的情況下也能工作。 我不必在頁面上放置側邊欄或在頁腳中放置任何小部件。 它之所以有效，是因為這個新的小部件區域在幕後加載。 如果您在此小部件區域中放置其他小部件，它們將顯示在頁面的左上角。 默認情況下，短代碼不顯示為文本，因此小部件可以保持不可見。

關閉覆蓋

可以使用角落中的 X、單擊覆蓋層的背景或按 Esc 鍵關閉覆蓋層。

另一種選擇是將關閉類添加到覆蓋中的鏈接。 使用此方法，您可以創建關閉按鈕或文本。 這允許您向 CTA 添加取消按鈕或使關閉按鈕更加明顯。

close 類如下所示：

class =“close-divi-overlay”>不，謝謝

進入 2.0

以下是一些值得期待的功能：

延時功能將允許在頁面加載後的設定時間打開疊加層，讓讀者在自動打開疊加層之前看到您的內容一段特定的時間。

像素功能將根據他們滾動的像素數或他們滾動的頁面百分比打開疊加層。

當讀者選擇後退按鈕或將光標放在地址欄上時，另一個選項將打開覆蓋。

文檔

DiviLife 網站上提供了文檔。 它包括您可以使用插件的各種方式的概述和示例。 文檔包括文本、視頻和示例代碼。

價錢

Divi Overlays 是一個高級插件。 在單個站點上使用 15 美元，三個站點 29 美元，無限站點 59 美元，終身無限許可證 129 美元。 每個許可證都包含所有核心功能和文檔。 前三個包括一年的更新和支持，而最後一個包括終身更新和支持。

最後的想法

Divi Overlays 是使用 Divi Builder 創建疊加層的好方法。 Divi Builder 允許您使用 Divi 模塊或來自其他插件的短代碼將幾乎任何類型的內容添加到疊加層。 很難想像 Divi Overlays 無法創建的疊加層。 在需要的地方添加代碼確實需要幾個步驟，但這很容易，文檔會引導您完成它。 回報遠遠超過學習使用它所需的幾分鐘。

我們希望聽到您的意見！ 你試過Divi Overlays嗎？ 請在評論中告訴我們您的體驗。

精選圖片來自brickclay/shutterstock.com