Divi 5的相互作用（彈出，切換，鼠標效果等）

如今，我們很高興發布Divi 5的交互，這是一個強大的系統，用於創建諸如彈出式和切換之類的交互式元素，以及基於創意捲軸和基於鼠標運動的效果。

這不是彈出式建築商；這是一個建築商。創建觸發器，分配效果，選擇目標並將您的自定義互動栩栩如生。您可以使用該系統做很多令人驚奇的事情，我迫不及待地想向您展示其工作原理，所以讓我們跳入。

查看以下視頻以查看動作中的新功能。

建立自己的互動元素

您會在所有元素的高級選項卡中註意到一個新的交互組。單擊“添加交互”按鈕將打開交互編輯器，您可以在其中配置每個交互的觸發器，效果和目標。

扳機會啟動交互，例如單擊或懸停時。當觸發交互作用（例如切換可見性，預設或屬性）時，效果就會發生，目標是頁面上的受影響元素。

互動示例

在深入這些設置之前，讓我向您展示一些互動可以實現的示例。

示例1：建立彈出窗口

在下面的視頻示例中，我使用交互創建彈出窗口。

我在一個部分中添加了一個Enter視口觸發器，該觸發器將切換可見性效果應用於我的彈出窗口。本節進入我的視口，觸發彈出窗口的可見性，並在使用Divi的動畫設置時滑動。

此外，彈出窗口中的圖標模塊具有基於點擊的交互，該相互作用可在彈出窗口上切換可見度以關閉它。您可以創建任何類型的彈出式或浮動橫幅！

示例2：構建切換

在下面的視頻示例中，我使用互動來切換每月和年度定價表。

我在行中添加了兩個交互，以切換每年和每月定價部分交替的可見性。接下來，我添加了另外兩個交互，以切換兩個圖標模塊的可見性，從而為用戶提供了單擊時的其他反饋。

示例3：預設之間的過渡

最有力的效果之一是切換預設效應。由於預設允許您修改元素的設置，因此您可以做什麼沒有限制。當觸發器更改目標元素上的預設時，它可以以許多方式轉換。

在下面的視頻示例中，我設置了兩個交互，以在進入並退出視口時在行上添加和刪除預設。高光預設會改變行的背景顏色和比例，並增加一個盒子陰影，在用戶向下滾動頁面時引起人們的注意！

示例F：鼠標運動效果

相互作用系統的基於鼠標運動的效果非常有趣。

在下面的視頻示例中。我在英雄部分中添加了幾個相互作用，針對各種元素，具有不同敏感性的基於小鼠運動的影響。

相互作用觸發鼠標輸入，對隨著鼠標移動的變化元素應用不透明，運動和傾斜影響。我還向按鈕模塊添加了一個交互，該模塊可以切換預設以更改方形輪廓的樣式。

可能性是無限的！

我可以繼續進行不同的例子，很高興看到您想出的內容。

更仔細地查看交互編輯器，您可以看到一些我尚未提到的其他效果，例如將屬性，cookie和滾動到元素上。

例如，您可以使用屬性效果來更改元素的CSS類，ID或其他任何內容。

互動的第一版支持以下效果：

• 切換可見性- 自動在可見和隱藏狀態之間切換一個元素。
• 顯示元素- 使隱藏的元素可見。
• 隱藏元素- 使可見元素隱藏。
• 切換預設- 為元素打開/關閉預設，可選地更換現有預設。
• 添加預設- 將預設樣式類應用於元素，可選替換現有預設。
• 刪除預設- 從元素中刪除預設樣式類。
• 切換屬性- 添加或刪除元素的特定HTML屬性值，例如CSS類和ID。
• 添加屬性- 如果不存在，則將特定的HTML屬性值添加到元素。
• 刪除屬性- 從元素中刪除特定的HTML屬性值。
• 切換cookie - 從cookie中添加或刪除cookie值。例如，當彈出窗口在用戶看到彈出窗口時似乎正在跟踪時，設置cookie。然後，使用Divi的條件選項隱藏該用戶的未來頁面訪問中的彈出窗口。
• 添加cookie - 添加您定義的cookie和cookie值，並在訪問者的瀏覽器中定義。
  卸下cookie - 卸下指定的cookie。
• 滾動到元素- 平滑滾動頁面以將目標元素視為視圖。
• 鏡像鼠標的運動- 使目標元素使用可調敏感性的各種運動類型（翻譯，比例，不透明度，傾斜或旋轉）遵循觸發元件中的鼠標運動。

今天嘗試Divi 5

Divi 5的互動今天可以使用，這是今年將進入Divi的許多功能之一。

您可以隨著我們的進展，通過Divi 5及以後的最終版本，每兩週更新一次。根據您的優先級，您現在可以使用Divi 5來構建新網站或等到我們添加更多功能，任何最適合您的功能。

如Divi 5的原始多相發佈時間表中所述，Divi 5公共alpha就像“ Divi 5 Lite”。它缺少一些功能，並且可能不適合現有網站，但是如果您更喜歡Divi 4的體驗，就可以在新網站上使用。

我們希望您嘗試一下，如果您喜歡它，請使用它；當每個人都喜歡它時，我們將正式進行。

您嘗試過相對顏色嗎？

如果您錯過了它，我們最近發布了Divi 5的相對顏色，使Divi成為顏色管理和高級顏色系統的清晰領導者。它使您可以使用HSL創建具有嵌套顏色關係的數學上美麗的基於可變的顏色系統。您不想在此功能上睡覺。

觀看此視頻以獲取所有細節。

更多Divi 5更新正在進行

2025年是Divi 5年。乏味的工作在我們身後。我們建立了超級快速的基礎，現在是時候讓Divi捲土重來了。

如果您是在這裡進行Divi捲土重來，請給我們一個巨大的忙，並通過喜歡此視頻並發表評論來告訴我們。看到您為Divi加油對我們來說意義重大，餵養算法並傳播詞至關重要。

不要忘記在YouTube上關注我們並訂閱Divi新聞通訊，因此您永遠不會錯過更新。我很快就會見到您進行另一個Divi 5功能公告，我保證將在拐角處。