如何通過Divi 5的互動構建彈出窗口（免費下載）

彈出窗口是吸引網站上關注和推動參與度的絕佳工具。無論您是想增加電子郵件列表，推廣特殊報價還是指導訪問者採取特定操作，精心設計的彈出窗口都可以使一切與眾不同。隨著Divi 5交互的發布，創建自定義，動態的彈出窗口從未如此簡單。

在這篇文章中，我們將使用Divi 5的互動功能引導您創建彈出窗口。讓我們潛入！

什麼是Divi 5互動？

Divi 5交互是一項集成到視覺構建器中的新功能，旨在使網站更具動態和引人入勝。它允許您根據用戶操作或頁面事件（例如點擊，徘徊或滾動）創建自定義動畫和響應。與靜態設計不同，交互使您可以通過Divi熟悉的界面來創建彈出窗口，切換，鼠標運動和滾動效果。

訂閱我們的YouTube頻道

Divi互動的關鍵組成部分

Divi 5中的每一個互動都由三個核心組成部分組成：

• 觸發器：啟動交互的事件，例如單擊，懸停或輸入視口的元素。
• 效果：激活觸發器時發生的動作，例如切換可見性，應用預設樣式或更改屬性。
• 目標：受相互作用影響的特定元素，該元素可以是同一元素，另一部分，行，列或模塊在其管理標籤標識的頁面上。

這些組件可以一起工作，使您可以使用簡單的無代碼接口創建複雜的交互。

為什麼您應該使用互動來創建彈出窗口

Divi 5互動提供了構建彈出窗口的幾個優勢：

• 您不需要任何插件：與傳統的彈出式構建器不同，Divi 5交互直接在視覺構建器中構建，從而消除了對第三方插件的需求。
• 位於Visual Builder中：您可以使用Divi熟悉的界面，模塊和样式選項來構建彈出窗口，從而使任何技能水平的用戶都很容易。
• 多功能選項和效果：將彈出窗口與其他交互作用（例如基於滾動的動畫或鼠標移動效果）相結合，以創造獨特的引人入勝的體驗。
• 完全控制：自定義觸發器，效果和目標，以為您的特定目標創建彈出窗口，而無需編寫代碼。

在Divi 5中建立彈出式彈出窗口的分步指南

在Divi 5中創建彈出窗口非常簡單，使您的網站現有設計變得容易。在本節中，我們將演示創建彈出窗口以匹配我們的預製佈局之一，向您展示如何樣式的彈出窗口的容易，並將交互設置以以定時的延遲來顯示彈出窗口。

1。安裝佈局包

對於本教程，我們將從我們的佈局包設計之一開始，然後構建具有相同樣式的彈出窗口來簡化事物。為此，請單擊視覺構建器左上角的 +圖標。

出現對話框時，請從可用選項中選擇預製佈局。

單擊在線學習佈局包裝縮略圖以突出顯示可用的頁面。

選擇著陸頁設計，然後單擊使用此佈局將其加載到視覺構建器中。

導入佈局包的最後一步是選擇是否導入預設。選擇後，單擊導入按鈕。

2。為彈出窗口創建一個部分

現在，將佈局包導入，我們必須在頁面底部為彈出窗口創建一個新部分。滾動到頁面末尾並添加新部分。

單擊圖標以插入新行。在偏移列下選擇第二個選項。

3。設計彈出窗口

現在，我們可以開始在彈出窗口中添加內容。當出現“插入模塊或行”對話框時，單擊以添加標題模塊。

輸入“想要15％的折扣？”在“內容”選項卡下的標題字段中。

為了在整個頁面上保持一致的設計，您可以使用Divi 5的屬性功能來複製另一個標題模塊的設置為我們的彈出窗口。在上面的部分中，將懸停在標題模塊上，右鍵單擊，然後單擊複製屬性。

接下來，將懸停在我們剛剛創建的標題模塊上，右鍵單擊，選擇粘貼屬性，然後單擊粘貼文本設計屬性。這將粘貼其他標題模塊的樣式，從而允許設計一致性。

在標題模塊下，添加一個新的文本模塊。

與標題模塊一樣，在上面的部分中找到文本模塊，右鍵單擊，然後選擇“複製屬性” 。從那裡，單擊新的文本模塊，點擊粘貼屬性，然後粘貼文本設計屬性。

您可以將文本添加到文本字段中，也可以使用Divi AI為您生成。

接下來，我們將在文本模塊下添加電子郵件選擇模塊。

上面的一節具有電子郵件選擇模塊，因此您可以復制其屬性並將其粘貼到我們添加到彈出窗口的新電子郵件選擇中。

最後一步是在彈出窗口的右列中添加圖像。找到圖像模塊，然後將其添加到我們佈局的第二列中。

上傳圖像並將其添加到圖像模塊中。至此，您的部分看起來應該與此相似：

4。創建一個關閉按鈕

現在，我們的彈出窗口的設計已經到位，我們需要在其上方添加新的一行，以添加一個關閉的按鈕圖標。這將使您的訪問者在方便的情況下關閉彈出窗口。單擊綠色 +圖標以添加新行。

當出現“插入行”對話框時，單擊“等價”列下的單列佈局以將其添加到該部分。

單擊以將圖標模塊添加到行中。

從可用選項中選擇關閉圖標。可以通過將“關閉”輸入圖標列表上方的搜索框來輕鬆找到。

切換到“設計”選項卡並輸入以下設計設置：

• 圖標顏色： ＃5344B9
• 圖標大小： 36px
• 對準：對

最後一步是將包含我們彈出窗口內容的兩列行上方移動。使用圖層視圖將行重新排列到正確的順序中。在那裡，將部分重命名為“彈出”部分。

5。調整該部分的設置

在創建我們的交互之前，我們必須確保彈出窗口的尺寸適當尺寸，以適應瀏覽器的寬度。我們不希望它是一個全寬的彈出窗口，因此請導航到設計以進行一些調整。展開尺寸下拉菜單以顯示設置。

在寬度範圍內，輸入80％的寬度。接下來，將部分對齊選項設置為中心。

在邊界下，設置一個10px邊框半徑。

我們還將添加一個盒子陰影，以便我們的彈出窗口在其餘內容上脫穎而出。找到盒子陰影下拉菜單並將其展開。在盒子陰影下，選擇預設1 。

最後，前往“內容”選項卡，為我們的彈出部分的背景添加顏色。

6。創建互動以顯示彈出窗口

有了設計，我們可以設置互動。我們將彈出部分設置為顯示在頁面上的用戶降落後5秒鐘。導航到本節的高級選項卡，並找到“交互”下拉菜單。單擊 +添加互動以開始。

從可用選項中選擇加載。此設置將允許彈出窗口出現在頁面加載中。

出現“編輯交互對話框”時，輸入以下設置，然後單擊“保存：

• 管理標籤：彈出互動
• 觸發事件：加載
• 效果行動：顯示元素
• 目標模塊：部分（彈出）
• 時間延遲： 5秒

接下來，我們需要為關閉按鈕添加一個交互。在彈出部分的第一行中選擇圖標模塊。導航到高級選項卡，單擊+添加交互，然後輸入以下設置並保存：

• 管理標籤：關閉彈出窗口
• 觸發事件：單擊
• 效果動作：切換可見性
• 目標模塊：部分（彈出）
• 時間延遲： 0

7.通過Divi 5的可自定義響應式斷點測試和完善您的彈出窗口

在進行最後一步之前，最好使用Divi 5的可自定義響應性斷點來確保您的彈出窗口在所有屏幕尺寸上看起來都不錯。在Divi 5中，現在有7個斷點可供選擇。

默認情況下，僅啟用了三個。擁有7可以使您可以在更多斷點上測試彈出窗口，從而確保具有任何屏幕尺寸的無縫用戶體驗。要允許所有7個，請單擊Admin Bar頂部中間的Ellipsis菜單。從那裡，通過將其切換為所有斷點來啟用所有斷點。

Divi 5的新Flexbox佈局系統使您可以輕鬆進行更改，以確保在任何設備上彈出窗口看起來都很好。例如，您可以使用Divi 5的更改列結構字段來更改較小設備上顯示的列數。此選項將一鍵單擊將內容堆疊在移動設備上。

8。設置顯示選項

為了使您的彈出窗口正確顯示，我們需要調整彈出部分的可見性，定位和Z索引。這將使您的彈出窗口可以顯示您想要的位置，將其隱藏到該顯示的時間，並確保它顯示在頁面其餘部分內容之上。

導航到彈出部分的高級選項卡。找到可見性下拉菜單。單擊以禁用所有視圖（電話，平板電腦和桌面）的部分。

接下來，單擊位置下拉菜單。設置固定的位置並選擇偏移原點。最後，添加一個99999的Z索引，以確保彈出窗口顯示在頁面其餘部分內容上方。

所有設置到位後，保存頁面並在另一個選項卡中預覽。頁面加載後應在5秒內顯示彈出窗口。您還應該能夠使用我們創建的密切相互作用來關閉彈出窗口。

高級彈出自定義選項

Divi 5互動使您可以將彈出窗口提升到一個新的水平，具有高級功能，例如顯示條件，效果結合，甚至使用Divi AI來生成彈出窗口。讓我們看一些可以使彈出窗口更先進的方式而無需自定義CSS或JavaScript片段。

顯示條件

您可以使用Divi的條件選項根據用戶行為（例如用戶角色）來顯示彈出窗口。例如，您只能顯示彈出窗口以登錄用戶以鼓勵註冊。

您還可以根據頁面訪問啟用條件顯示彈出窗口。例如，如果特定用戶已經訪問了頁面，則應禁用彈出窗口。您還可以將其設置為僅當用戶未訪問頁面時顯示。這對於通過其他頁面找到您的網站並單擊“主頁”的訪問者很有用。

結合效果

您可以通過基於滾動的動畫或鼠標移動效果來增強彈出窗口。可以通過選擇其他觸發器和效果來添加這些作為其他交互。交互可以組合，並且您可以創建的數字沒有限制。例如，您可以使用鼠標移動效果輕鬆地在彈出窗口中的圖像上應用交互。

Divi AI集成

通過使用Divi AI生成佈局來加快設計過程。您可以指示Divi AI創建特定的部分，包括您可以轉換為彈出窗口的部分。在下面的示例中，我們要求Divi AI為商業教練創建一個佈局，並配有CTA部分，我們可以變成彈出窗口。

有效彈出窗口的最佳實踐

為了確保您的彈出窗口改善用戶體驗並取得成果，請考慮以下最佳實踐：

1。保持用戶友好

避免使用定時延遲（5到10秒）而不是立即觸發器的侵入性彈出窗口。這使用戶有時間在提示之前與您的內容互動。太早啟動彈出窗口可能會分散注意力，導致用戶關閉彈出窗口，並可能錯過促銷，新聞通訊註冊或您希望他們採取的其他重要動作。

在彈出窗口上設置定時延遲，以避免失去用戶參與度。

此外，始終包含一個清晰，易於識別的關閉按鈕，以便用戶可以忽略彈出窗口並保持積極的瀏覽體驗。

2。優化性能

性能優化對於有效的彈出窗口至關重要。為了快速保持加載時間，請最大程度地減少重型動畫或大型，不優化的圖像。選擇壓縮的圖像並限制複雜的效果，以確保敏捷，無縫的體驗，尤其是對於較慢的連接或移動設備的用戶而言。這種方法提高了用戶滿意度，並支持更好的參與度和轉化率。

3.設計彈出式彈出式標準的彈出窗口

可訪問性是使所有用戶包含您的彈出窗口的另一個關鍵考慮。始終將描述性的Alt文本添加到圖像中，以幫助屏幕讀取器，確保文本和背景之間的高對比度可讀性，並使用16px或更大的字體尺寸可容納視覺障礙的用戶。

這些實踐有助於確保多樣化受眾可以訪問您的彈出窗口，並與Web可訪問性標准保持一致。

4。在所有屏幕尺寸上進行測試

最後，在所有屏幕尺寸上徹底測試您的彈出窗口，以確保在所有設備上都有一致的體驗。利用Divi 5的可自定義響應斷點，以確保您的彈出窗口看起來很棒，並且可以按照台式機，平板電腦和智能手機的方式發揮作用。

密切注意關閉按鈕，以確保其工作原理，並且該文本在較小的屏幕上可以清晰。此外，根據需要檢查間距，尺寸和佈局，以提供拋光，專業的外觀。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲取免費的每週Divi佈局包！

與Divi 5互動創建彈出窗口

Divi 5的互動功能使您可以通過直接在Visual Builder中構建自定義，引人入勝的設計來輕鬆創建彈出窗口。結合觸發器，效果和目標，您可以構建彈出窗口，以吸引註意力並驅動轉換，同時無縫匹配網站的設計。探索其他功能，例如模塊組和嵌套行，以創建更具動態的彈出佈局。

您準備好嘗試Divi 5嗎？下載最新的Divi 5 Public Alpha，實驗互動，並在下面的評論部分中分享您的想法。請在我們的社交媒體渠道上與我們分享您的創作，並訪問我們的博客，以獲取使用Divi 5的創新功能的更多教程。我們期待看到您創造的東西！