了解Divi 5中觸發器，效果和目標之間的差異

Divi 5的新互動使用一個簡單的模型 - 觸發，效果，目標。分開開始它，發生的事情以及什麼變化，您可以在佈局中創建清晰的，協調的運動。在這篇文章中，我們將解釋每個部分，展示它們如何結合在一起，然後瀏覽一個可以重複使用的快速示例。讓我們開始！

什麼是觸發因素，效果和目標？

Divi 5中的相互作用是由三個一起工作的運動部件構建的。觸發器設置了運動中的事物，效果決定了響應的外觀，目標定義了哪些元素變化。

訂閱我們的YouTube頻道

設置互動時，Divi會要求您填寫所有三個部分：

單獨了解每個角色將使它們更容易看到它們如何連接到一個完整的系統。

觸發是開始的

每個互動都以稱為觸發的起始動作開始。這是用戶採取的第一步，例如鼠標單擊，懸停或頁面加載，它可以啟動操作。例如，將鼠標移到定價卡上，將鏈條置於運動中。

觸發器本身無濟於事。它需要回應。

效果是發生的

一旦扳機發射，效果就會隨之而來。在這裡，您可以決定反應，例如傾斜，褪色，比例，模糊或任何運動混合。圖片略微縮放同一定價卡，並在光標徘徊時添加更深的陰影 - 這就是效果。

最後，您需要決定在哪裡應用效果。

目標是改變

目標只是觸發觸發時會更改的元素。懸停是一種常用的交互作用，但僅影響元素本身。換句話說，啟動交互的元素（觸發器）也是更改（目標）的元素。

例如，懸停在列上可以製作相同的列秤，因為它也是目標。

這使一切都局限於一個元素。您仍然可以在Divi 5中以這種方式進行設置，但是您不再限於它。

現在，觸發器和目標可能會有所不同，這為您提供了更多的控制。例如，當光標進入部分時，即使沒有觸摸，按鈕也會縮放。在這種情況下，按鈕是目標。

他們如何一起工作

既然我們已經看到了每個部分，那麼當您將它們連接到鏈條中時，真正的力量就會出現：

• 觸發火災：訪問者做一些事情，例如單擊，移動鼠標，輸入，離開或加載頁面。
• 效果定義：您決定顯示哪種視覺或運動響應。
• 目標適用：該更改土地在您選擇的元素上。

想想它像接線電路。開關翻轉，電流流動，燈泡亮起。

在Divi 5中，您可以以任何喜歡的方式接線該電路。圓柱上的懸停可以傾斜其按鈕。頁面負載可以在英雄圖像中消失。單擊可以同時對幾個模塊進行動畫，從而使該部分感到協調。

這是當互動停止感覺像是一個更好的懸停並開始像設計語言一樣開始工作的時候。您不再堅持一個元素對自己的反應。您可以鏈，交錯並傳播響應以連接整個佈局。

了解有關Divi 5互動的所有內容

Divi 5中的公式

Divi 5的互動的美麗在於它們不是隨機的附加組件。他們遵循清晰的公式：觸發→效果→目標。一旦將其視為可重複的模式，建立復雜的互動就會變得簡單且一致。

讓我們將這個公式付諸實踐，向您展示它們如何一起工作。在此示例中，讓我們創建一個聯繫表格，當用戶單擊按鈕時，該表格會在屏幕上彈出。

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

• 觸發事件：單擊（我們已經決定，當用戶單擊按鈕時，該事件將觸發）
• 效果行動：顯示元素（隱藏的觸點表格）
• 目標模塊：（聯繫人）是分配給聯繫部分的標籤。

接下來，設置錨點鏈接以打開聯繫部分。首先，打開“聯繫表”的部分設置，然後轉到“高級”選項卡。在CSS ID和類中，設置CSS ID ：聯繫人。

然後，轉到按鈕的設置，然後在按鈕鏈接URL字段中輸入#Contact。

最後，將表單的初始狀態設置為“隱藏”，以便僅在觸發時才會出現。打開“聯繫表”的部分設置，轉到“高級”選項卡，然後在Visib itility下選擇要隱藏的斷點。

現在測試它。單擊按鈕，然後出現隱藏的聯繫部分。

簡單的流（單擊→顯示→觸點表格）與您重複使用彈出窗口，切換，輕柔的啟示或橫跨部分的動畫相同。一旦您在觸發，效果和目標方面思考，可能性就會迅速開放。

今天嘗試在Divi 5中進行互動

你有模式。現在將其在真實頁面上工作。打開測試佈局並建立一個小型互動效果，您可以在十分鐘內完成。選擇您在客戶端網站上實際使用的內容。

這裡有一些迷你提示來滾動：

• 鼠標進入部分，使其按鈕刻度巧妙
• 單擊“聯繫”按鈕揭示了藏匿的表格
• 鼠標留在卡上傾斜
• 頁面負載在英雄圖像中逐漸消失，然後稍後標題

在評論中讓我們知道您是否使用了Divi 5的互動功能，以及您對此的看法！