如何在 Divi 5（公共 Alpha 版）中掌握懸停效果

Divi 5 讓添加和編輯懸停效果變得比以往更容易。在本指南中，我們將引導您完成對懸停效果的所有關鍵改進，以及如何在 Divi 5 中使用它們以前所未有的方式簡化您的工作流程。

了解有關 Divi 5 Public Alpha 以及如何下載的更多資訊。

下載 Divi 5 公共 Alpha 版

了解 Divi 5（公共 Alpha 版）中的懸停效果

在 Divi 5 中，關於懸停效果的重大變化之一是它們現在更容易實現且更易於訪問。在 Divi 4 中，您必須手動為設定中的每個元素啟用懸停效果。此過程可能會很麻煩，因為您必須在應用任何變更之前找到特定選項並啟動懸停狀態。

憑藉 Divi 5 的新介面，懸停效果、響應式和黏性編輯模式完全集成，使它們可以立即存取。不再需要單獨啟用它們！

這項改進透過減少應用進階懸停狀態設計所需的步驟、加快工作流程並使創建動態互動更加直觀，簡化了設計流程。

Divi 5 懸停效果的主要改進

以下是 Divi 5 的一些關鍵改進，可以更快、更輕鬆地應用和編輯懸停效果：

• 正常模式和懸停模式之間的導航速度更快：透過一鍵切換，可以更輕鬆地在狀態之間切換並進行調整。
• 所有懸停設定都集中在一個面板中：不再有分散的設定。元素的所有懸停設定都可以在設定面板中輕鬆更新。
• 即時視覺回饋：即時預覽會顯示您製作的懸停效果變化，從而加快您的工作流程。
• 更好的組織和可見性設定：非活動設定呈現灰色，幫助您專注於可用選項。

這些改進簡化了創建具有懸停效果的動態互動式設計的過程。

想要更深入了解新設定嗎？查看了解 Divi 5 介面，了解它如何簡化您的設計工作流程。

取得 Divi 5 公開 Alpha 版

如何在 Divi 5（公共 Alpha 版）中掌握懸停效果

1.在一處存取和編輯所有懸停狀態設置

Divi 5 的懸停設定方便地顯示在設定面板中，讓您可以在一個地方快速存取所有內容。這個簡化的面板減少了為每個選項切換單獨的懸停效果的需要。換句話說，一旦在設定面板中選擇了懸停效果狀態，每個標籤（內容、設計和進階）下的所有選項現在將僅適用於元素的懸停狀態。

這使得添加自訂或複雜的懸停效果可以更快實現。

2.輕鬆管理不支援的懸停設置

在 Divi 5 中，不支援的懸停設定會自動變灰（無法存取），讓您可以快速查看哪些功能不適用於您正在處理的元素。這種可見性可以防止浪費時間嘗試清除那些在懸停狀態下可自訂的選項和不可自訂的選項，從而改善您的整體工作流程。

3.享受即時的即時視覺回饋

Divi 5 的即時視覺回饋是即時的。當您調整設定時，您會立即看到更改，從而減少猜測並允許您隨時隨地微調懸停效果。

4.在整個頁面中快速編輯懸停效果

在 Divi 5 中，當單擊其他元素時，設定面板保持懸停狀態。這使您可以透過點擊元素並進行更改來快速更新整個頁面元素的懸停效果。

5. 在前端自信地預覽懸停效果

在設定面板中啟動懸停狀態後，您只需單擊即可預覽任何元素的懸停狀態設計。懸停狀態將保持活動狀態，因此如果您的元素具有懸停效果，單擊該元素將立即顯示懸停狀態設計，並同時開啟該元素的懸停狀態設定。

正如您在下面的影片片段中看到的，您可以在前端預覽每個簡介的懸停狀態設計，它將顯示與預覽即時頁面相同的懸停效果。

因此，如果您想檢查頁面上的懸停狀態設計，只需單擊頁面上的某個元素即可立即顯示該元素的懸停狀態設計。這樣可以輕鬆確保您的懸停效果準確，而無需來回切換到即時頁面。

下載 Divi 5 公共 Alpha 版

如何在 Divi 5 中建立懸停效果：快速範例

現在我們已經介紹了 Divi 5 懸停效果的主要功能，讓我們透過一個快速範例向您展示在 Divi 5 中創建懸停效果是多麼容易：

1. 新增模組

在 Divi 視覺生成器中，新增您要自訂的模組。對於本範例，我們新增一個按鈕。

2. 訪問懸停設置

點擊模組以顯示設定面板。在右側側邊欄中，按一下懸停圖示以切換到懸停模式。

3. 自訂懸停效果

在懸停模式下，您可以變更各種樣式屬性，例如背景顏色、邊框、縮放或動畫。讓我們為按鈕添加一個變換效果，以便它在懸停時放大。

別忘了。 Divi 5 的簡化設定面板將所有控制項集中在一個面板中，因此請進行所需的更改，然後在完成後按一下「儲存」 。

請隨意測試不同的懸停效果設置，包括顏色和背景過渡、圖像和文字動畫、陰影效果以及用於縮放、旋轉或平移元素的變換控制。您還可以調整邊框樣式和濾鏡（例如模糊或亮度），並套用進階 CSS 動畫以獲得更具吸引力的使用者體驗。

Divi 5 是懸停效果設計的遊戲規則改變者

與Divi 4 相比，Divi 5 的懸停效果提供了無與倫比的易用性、速度和靈活性，簡化了您的設計流程。為您的網站添加互動元素變得比以往更加簡單。

準備好提升您網站的使用者體驗了嗎？立即下載 Divi 5 Public Alpha 並開始嘗試新的懸停效果，讓您的設計栩栩如生！

下載 Divi 5 公共 Alpha 版