關於Divi 5互動所需的一切

如果您想在沒有插件或自定義CSS的情況下以動態的彈出式，切換和滾動效果吸引訪客，您會喜歡最新的Divi 5 Public Alpha功能版本之一。 Divi 5中的交互使Divi用戶可以在視覺構建器內部創建引人入勝的交互式元素。在這篇文章中，我們將深入了解您需要了解的有關Divi 5交互，探索其功能，一些技巧和現實世界應用程序的所有信息，以幫助您熟悉該功能。

重要說明：Divi 5目前在公共alpha中，並針對新網站進行了優化。由於持續的開發以及與舊模塊的潛在兼容性問題，我們不建議遷移現有的4個站點。請繼續關注更新，因為Divi 5臨近完整髮布！

讓我們開始。

什麼是Divi 5互動？

Divi 5交互是一種構建器，可讓您直接在視覺構建器中為網站創建交互式元素。此功能不僅僅是彈出式構建器，還可以創建一系列自定義交互，從彈出窗口到滾動觸發的動畫，而無需觸摸一系列代碼。

訂閱我們的YouTube頻道

無縫集成到任何模塊，列，行或部分的高級選項卡中，相互作用提供了無限的靈活性來構建引人入勝的，以用戶為中心的體驗。

Divi 5相互作用的核心組成部分

Divi 5互動的核心是三個關鍵組成部分，可以將您的設計融為一體：

觸發事件

觸發器是啟動交互的事件。示例包括用戶操作，例如單擊按鈕或懸停在圖像上，基於滾動的事件，例如到達頁面上的特定點或基於時間的觸發器，例如頁面加載後的延遲。

可用觸發器包括：

• 單擊：用戶單擊按鈕，圖像或其他元素以啟動交互。
• 鼠標輸入/出口：用戶徘徊或留下元素。
• 視口輸入/退出：當用戶滾動時，元素進入或退出屏幕的可見區域。
• 負載：當頁面加載時，交互開始，並以可選的時間延遲。

例如，您可以在加載頁面後5秒觸發彈出窗口，或在用戶滾動時對元素進行動畫觸發。

效果行動

激活扳機後，效果確定發生了什麼。選項包括顯示或隱藏元素，以淡出淡出，秤，旋轉或應用預設過渡以進行一致樣式進行動畫動畫。

• 切換可見性：在可見和隱藏之間切換一個元素。
• 顯示/隱藏元素：使元素可見或隱藏。
• 切換預設：打開或關閉預設的設計元素，具有更換現有預設的能力。
• 添加預設：用於將預設樣式類添加到元素中。您也可以替換現有的預設。
• 刪除預設：用於從元素中刪除預設樣式。
• 切換屬性：添加或刪除元素的HTML屬性，例如CSS類或CSS ID。
• 添加屬性：這添加了當前不存在的特定HTML屬性值。
• 刪除屬性：刪除應用於元素的任何屬性。
• 切換cookie：添加或刪除cookie值。例如，當出現彈出窗口時，您可以設置cookie，並將其設置為僅使用Divi 5的條件設置出現。
• 添加cookie：添加一個可以在用戶瀏覽器中定義的cookie值。
• 刪除cookie：刪除先前指定的cookie。
• 滾動到元素：允許該頁面平滑滾動，將目標元素視為視圖。
• 鏡像鼠標運動：允許您設置遵循用戶鼠標運動的移動。選項包括翻譯，比例，不透明度，傾斜或旋轉。您還可以調整運動的靈敏度。

針對一個模塊

目標是交互影響的元素，例如模塊，行，列或整個部分。您可以針對頁面上的元素本身或其他元素，從而提供靈活性來創建複雜的交互。

Divi 5互動的關鍵特徵

Divi 5交互在其用戶友好和多功能功能集中脫穎而出：

• 無代碼接口：通過任何元素的高級選項卡中的直觀接口配置觸發器，效果和目標，而無需使用任何CSS或JavaScript。
• 各種交互類型：創建彈出窗口以進行鉛捕獲，為常見問題解答，為英雄部分的捲軸觸發淡出的淡出或類似於投資組合的視差鼠標效果。
• 輕巧的性能：直接建立在Divi 5中，相互作用消除了對第三方插件的需求，減少站點膨脹並改善了負載時間。
• 動態觸發組合：將多個觸發器（例如滾動事件與時間延遲）組合在一起，用於復雜的交互作用，例如用戶向下滾動後出現的彈出窗口。
• 響應式設計：使用Divi 5的可自定義響應性斷點自定義桌面，平板電腦和移動交互。

如何訪問和使用Divi 5互動

由於其在視覺構建器中的集成，在Divi 5中創建互動非常簡單。請按照以下簡單的步驟入門：

首先打開Divi 5中的頁面。選擇要添加交互的模塊，行，列或部分。例如，在頁面上選擇一個圖像模塊。

導航到高級選項卡，然後單擊“交互”下拉列表。單擊其中的+添加交互按鈕。

我們希望為我們的圖像創建傾斜/變換鼠標驗效果。為此，我們需要創建兩個交互 - 一個用於圖像，另一個用於包含圖像的列。首先在管理標籤中給您的互動一個名稱，然後輸入以下設置：

• 觸發事件：鼠標輸入
• 效果行動：鏡像運動
• 目標模塊：圖像
• 時間延遲： 0
• 運動類型：翻譯
• 靈敏度： 10

所有設置到位後，單擊“保存交互”按鈕繼續。

接下來，我們將在列上創建變換交互。再次單擊 +添加交互。輸入以下設置以創建交互：

• 管理標籤：傾斜列
• 觸發事件：鼠標輸入
• 效果行動：鏡像運動
• 目標模塊：列
• 時間延遲： 0
• 運動類型：傾斜
• 靈敏度： 30

輸入設置後，您的互動應該看起來像這樣：

使用“預覽”按鈕查看您的交互。

您的頁面將出現在新標籤中，使您可以預覽和測試交互。

您可以創建的互動類型

以下是一些實用示例，以展示Divi 5交互的多功能性，並配有觸發器，效果和現實世界應用。

歡迎新訪客彈出窗口

彈出窗口非常適合敦促遊客報名參加新聞通訊，促銷或活動。使用Divi 5互動，您可以創建一個歡迎的彈出窗口，該彈出窗口在頁面加載後出現。

要創建此交互，您需要為彈出窗口創建一個部分並分配以下設置：

• 管理標籤：彈出窗口
• 觸發事件：加載
• 效果行動：顯示元素
• 目標模塊：部分（彈出） - 在創建交互之前，請確保命名您的部分
• 時間延遲： 5秒

我們還需要創建一個交互以關閉彈出窗口。最簡單的方法是將圖標模塊添加到彈出部分的右上角並分配以下設置：

• 管理標籤：關閉按鈕
• 觸發事件：單擊
• 效果動作：隱藏元素
• 目標模塊：部分（彈出）
• 時間延遲： 0

要控制彈出窗口的位置，請使用Divi 5的位置設置。在“高級”選項卡中，找到位置下拉菜單並將位置設置為固定。從那裡，選擇您希望彈出窗口出現在頁面上的位置。在此示例中，我們將其設置為中心。設置Z索引也是一個好主意，以便彈出窗口出現在頁面上的其他所有內容之上，例如99999 。

最後一步是將彈出窗口的可見性設置為隱藏在所有設備上。為此，請導航到“高級”選項卡，滾動到可見性下拉菜單，然後切換所有選項以隱藏所有設備上的彈出部分。

切換元素的可見性

切換非常適合創建可折疊的內容部分，例如常見問題解答，手風琴菜單，定價表或服務。它們允許用戶單擊擴展或折疊內容，以保持頁面清潔和交互式。例如，您可以揭示僅在單擊按鈕後才可見的完整服務列表。

為了創建此效果，您將在要設置的按鈕上設置一個交互作用，以作為部分的觸發器。輸入以下互動設置：

• 管理標籤：顯示服務
• 觸發事件：單擊
• 效果行動：顯示元素
• 目標模塊：部分（揭示服務）
• 時間延遲： 0

接下來，設置錨點鏈接以打開部分。打開按鈕的設置，然後在內容選項卡的“按鈕鏈接URL”字段中輸入#Services 。

單擊按鈕下方的功能部分，然後導航到高級選項卡。通過在CSS ID和類菜單下的CSS ID字段中添加服務來設置錨點。

在“高級”選項卡中，您還需要將該部分的可見性設置為隱藏，就像我們在彈出窗口中一樣。

小鼠運動效應

Divi 5交互使您可以在用戶徘徊在設計元素上時創建動態鼠標運動效果。例如，您可以將交互結合起來，在標題和父列中創建傾斜效果。

您需要首先創建標題的交互，以完成此交互。在圖像的高級選項卡中輸入以下設置：

• 管理標籤：動畫標題
• 觸發事件：鼠標輸入
• 效果行動：鏡像運動
• 目標模塊：文本
• 時間延遲： 0
• 運動類型：傾斜
• 靈敏度： 30

輸入設置時，它們應該看起來像下面的屏幕截圖。

接下來，通過使用以下設置在包含標題的列上設置交互：

• 管理標籤：列傾斜
• 觸發事件：鼠標輸入
• 效果行動：鏡像運動
• 目標模塊：列
• 時間延遲： 0
• 運動類型：傾斜
• 靈敏度： 50

完成後，您的設置應與下面的屏幕截圖相似。

基於預設的互動

您可以將Divi 5交互與預設旁邊使用，以與MouseOver或視口Enter/退出觸發器創建效果。例如，如果您想通過更改背景顏色或添加邊框陰影樣式來展示頁面上的一個部分，則可以使用交互來完成。在下面的示例中，當用戶徘徊在本節上時，背景顏色，寬度和邊界會發生變化。

為了創建此效果，您首先需要創建一個預設以顯示鼠標之前和之後的部分。在此示例中，我們創建了兩個 - 一個具有純黃色背景，另一個具有各種效果和綠色背景。

創建預設後，您可以使用交互來切換懸停的更改。首先創建與以下設置的第一個交互：

• 管理標籤：黃色背景
• 觸發事件：鼠標輸入
• 效果動作：切換預設
• 目標模塊：部分（定價）
• 時間延遲： 1秒
• 預設：黃色背景

接下來，通過輸入以下設置來為鼠標折疊創建第二個交互：

• 管理標籤：綠色背景
• 觸發事件：鼠標退出
• 效果動作：切換預設
• 目標模塊：部分（定價）
• 時間延遲： 0
• 預設：綠色預設

使用Divi 5互動的好處

Divi 5交互作用為構建網站提供了強大的簡化方法，提供了一系列優勢，使其成為Divi用戶的出色功能。這是一個更深入的了解，為什麼此功能是Divi 5的如此有用的補充：

1。無需插件

由於Divi 5交互被集成到Divi的核心中，因此它消除了對第三方插件創建彈出窗口和其他交互的需求。這種本機方法減少了您網站上運行的腳本數量，從而導致加載時間更快並改善了性能指標。

例如，Divi 5 Interactions不再依靠彈出插件，而是處理視覺構建器中的所有內容，從而確保了精益的代碼庫和更流暢的用戶體驗。這也意味著更少的更新和降低插件衝突的風險，從而使您的網站更可靠。

2。它是用戶友好的

Divi 5交互是直觀設計的，只需要幾下即可創建交互。初學者可以快速掌握基礎知識，而專業開發人員可以無需編寫一行代碼即可進入複雜的組合。

交互設置在任何元素的高級選項卡中都整齊地組織，並帶有清晰的標籤和工具提示，可引導您完成整個過程。例如，設置彈出窗口需要單擊幾下才能選擇觸發器和效果，從而使任何人都可以輕鬆使用。

3。自定義自由

Divi 5互動及其巨大設置（觸發器，效果和目標）的靈活性使您可以為網站的訪問者創造獨特的體驗。您可以將多個觸發器混合在一起，例如將基於滾動的視口與時間延遲相結合，以創建複雜的交互作用，例如促銷橫幅，該宣傳橫幅在用戶滾動後沿著頁面中間滾動而逐漸消失。

針對任何模塊，行，列或部分的能力意味著您可以在需要的地方精確地應用效果，無論是對單個按鈕進行動畫還是轉換整個英雄部分。

4。增強的用戶參與度

交互式元素通過使網站更加沉浸式和響應迅速來增強用戶參與度。 Divi 5互動可以通過鼓勵互動來幫助您保持網站的訪問者，例如單擊切換以揭示替代定價或觸發彈出窗口以捕獲導線。例如，餐廳網站可以使用捲軸觸發的動畫來揭示菜單部分。

入門的實用技巧

為了充分利用Divi 5相互作用，請從戰略上使用以確保最佳結果。以下是指導您完成整個過程的一些技巧：

• 開始簡單：從彈出窗口或切換等簡單的交互開始，以在處理鼠標移動或多觸發動畫之類的先進效果之前熟悉該功能。
• 使用管理標籤字段：標記您的交互和元素至關重要，尤其是在具有多個部分的複雜頁面上。在每個模塊的“內容”選項卡中添加名稱字段中的名稱可以使您可以保持有組織的內容並輕鬆識別正確的目標元素。
• 使用預設： Divi 5的預設系統非常適合節省時間和跨互動的一致性。預設允許您定義可重複使用的樣式，例如淡入淡出的動畫或顏色過渡，並將其應用於多個元素。
• 徹底測試：始終使用Divi 5的預覽功能預覽您的交互，以便在發布之前捕獲任何問題。您還可以使用Divi 5的可自定義響應式斷點來測試所有設備上的交互作用。

通過Divi 5互動來提升您的網站

Divi 5互動是創建引人入勝的無代碼交互元素以增強您網站的用戶體驗的完美功能。從捕獲的彈出窗口導致滾動觸發的動畫，使您的設計栩栩如生，此功能使任何人都可以構建動態，專業的網站而無需觸摸代碼。它的輕巧集成和多樣化的觸發選擇使其成為現代網絡設計的重要工具。

準備開始了嗎？下載最新的Divi 5 alpha，然後潛入互動中，以創建彈出窗口，切換內容，滾動效果等。快速注意：Divi 5已準備好用於新網站，但我們不建議在現有網站上使用它。

在下面發表評論或在我們的社交媒體渠道上與我們分享您的創作。我們很想見他們！