您應該牢記的 7 個 Divi UX 最佳實踐

我認為我們都同意 Divi 的多功能性。 自定義和個性化您正在構建的任何網站有很多可能性。 如果您希望提高工作效率，這可能是您的理想職位。 我們將介紹您可能熟悉或不熟悉的 7 個 Divi UX 最佳實踐。 我將分享的 7 個技巧是我個人在每天與 Divi 合作時經常使用並從中受益的一些技巧。

讓我們開始吧！

1. 使用微動畫

您可能要記住的第一個 Divi UX 最佳實踐是使用微動畫而不是過多的動畫。 曾經有一段時間，一個網站擁有的動畫越多，它在公眾看來就越“定制化”或“先進”。 然而，那些時代已經過去了。 除了看起來很花哨之外，過多的動畫對人們在您網站上的整體用戶體驗沒有貢獻。 事實上，它們常常會使訪問者從真正重要的事情上分心。 選擇微動畫是可行的方法。 Divi 的動畫選項允許您自定義添加的任何動畫的速度和強度。 創建微動畫的關鍵是使用低動畫強度和稍長的動畫持續時間。

轉到設計元素的設計選項卡

打開您選擇的任何設計元素並轉到高級選項卡。 在那裡，您會找到動畫選項。

使用少量動畫強度

您可以選擇任何動畫類型並降低動畫強度。 你走得越低，動畫就越微妙。 通過增加動畫持續時間，您將確保動畫不會被忽視。

2. 手動優化響應

Divi 最大的優勢之一是，您可以輕鬆地使您正在創建的任何佈局都具有響應性。 事實上，Divi 已經為您完成了大部分工作。 從添加的那一刻起，您創建的所有內容都會變得具有響應性。 從那時起，唯一要做的就是手動更改設計元素。 例如，這包括根據屏幕大小更改您共享的副本的文本大小。

現在，行和列具有內置的預定義邊距值，該值根據屏幕大小而變化。 但是您不一定必須使用這些默認值。 例如，我發現許多流行的網站在較小的屏幕尺寸上使用較少的左右邊距。 這樣，您可以水平放置更多內容，這意味著需要更少的垂直滾動。

用於較小屏幕尺寸的默認左右邊距為 40px。 為了利用較小屏幕尺寸的整個寬度，我建議將此值替換為 25px。

讓我們一步一步地完成這個過程。

更改行大小

您需要做的第一件事是通過在行的大小設置中啟用以下選項來刪除部分、行和模塊之間的所有空間：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

添加部分或行填充

現在，我們仍然希望在節和行之間有足夠的空間。 您可以選擇是否要向正在處理的行或部分添加左右自定義填充。 將其添加到該行不會影響該部分中的其他行。 但另一方面，將其應用於部分將確保這些邊距在整個部分中保持不變，無論您添加多少行。

• 左填充：23vw（桌面）、30px（平板電腦）、25px（手機）
• 右內邊距：23vw（桌面）、30px（平板電腦）、25px（手機）

添加列填充

列和模塊之間的空間也很重要。 您可以根據不同的屏幕尺寸自定義這些值。

• 第 1 列右填充：1vw（台式機）、0vw（平板電腦和手機）
• 第 2 列左填充：1vw（台式機）、0vw（平板電腦和手機）
• 第 2 列右填充：1vw（台式機）、0vw（平板電腦和手機）
• 第 3 列左填充：1vw（台式機）、0vw（平板電腦和手機）

減小文本大小

想要 100% 利用您在較小屏幕尺寸上獲得的水平寬度嗎？ 雖然從筆記本電腦的角度來看，13px 的正文大小可能看起來很小，但對於移動設備來說通常已經足夠了。 結合上述步驟，嘗試從您的手機查看 13px 的正文大小，您就會明白我在說什麼！

3. 使用視口單位而不是像素

這也是我們在上一步中所做的事情之一。 為了確保您的網站在所有桌面屏幕尺寸上都保持響應，建議您使用視口單位而不是像素。 這將確保您的網站看起來很棒並且完全符合您的設計方式，即使在 27 英寸桌面顯示器上也是如此。

另一方面，較小的屏幕尺寸與 15 英寸和 27 英寸桌面屏幕的差別不大。 在創建垂直重疊時使用視口單位可能會有所幫助，但堅持左右填充/邊距的像素不會造成任何傷害。

4. 擴展文本方向的樣式

人們會在您的網站上迅速注意到的一件事，甚至是下意識的，就是您在構建的設計中的一致性。 這包括但不限於您在整個頁面中使用的文本方向。 Divi 的用戶體驗最佳實踐之一是通過檢查文本方向來完成設計。 如果經過深思熟慮和發揮作用，您肯定可以在頁面中組合不同的文本方向。 但是，當您在一個特定部分中組合不同的文本方向時，這會變得更加困難。 最佳場景； 您在整個頁面中保持一個文本方向。 但是，如果您想嘗試更多，請嘗試至少為每個部分保留一種文本方向。 您可以通過查看所有不同的設計元素來做到這一點，或者您可以使用 Divi 的效率功能之一來為您完成工作。

只需幾個步驟，您就可以確保在整個頁面或部分中使用相同的文本方向和一致性。

讓我們來完成這些步驟。

打開任何包含文本的模塊

打開頁面上包含文本的任何模塊並轉到文本設置。

右鍵單擊文本方向選項

右鍵單擊您可以在文本設置中找到的文本方向選項，然後選擇“擴展樣式”選項。

在整個部分或整個頁面中擴展選擇的文本方向

現在，根據您希望文本方向在整個頁面中的一致性，您可以選擇在整個佈局或特定部分中擴展您選擇的文本方向。

5. 在 Visual Builder 和 Wireframe 模式之間來回切換

Divi 的 Visual Builder 的一大優點是您甚至不必在後端或前端編輯內容之間做出選擇。 兩者之間的轉換實際上不到一秒鐘。 我認為，如果將兩者結合起來，您可以獲得最佳水平的生產力和概覽。 特別是如果您要處理佈局中的多個重疊，切換到線框模式可以幫助您快速進行更改。 或者，如果您希望將某個設計元素拖放到頁面上的其他位置，則可以通過切換到線框模式並拖動該特定元素而無需無休止地滾動，從而更輕鬆地實現。

您是否知道您可以打開設計元素的模態並在 Visual Builder 和線框模式之間切換，同時仍保持模態打開？ 這使您可以在設計的後端進行更改，並隨時觀察新的設計設置是否到位。

6. 直接在頁面上導入/導出佈局

到目前為止，我們都已經習慣了預製佈局、保存的佈局和 Divi 庫。 但是假設您正在本地主機上處理特定頁面，並且希望在完成後將其上傳到實時網站，而無需經歷以下麻煩：

• 將佈局保存到您的 Divi 庫
• 轉到您的 Divi 庫並導出 JSON 文件
• 轉到您的實時網站的 Divi 庫
• 上傳 JSON 文件
• 轉到您的實時網站頁面
• 從您保存的佈局上傳 JSON 文件

然後，您只需使用頁面上的導入/導出選項即可。 這將允許您創建一個 JSON 文件，而無需訪問 Divi 庫。

與導出佈局的方式相同，您將能夠將佈局導入到新頁面。 但是要知道，一旦選擇了這種方法，您將無法將佈局導入到實時網站上的 Divi 庫中。 只能直接到一個頁面。

7. 定期使用“縮小”選項以保持透視

這可能是我最喜歡的 Divi UX 功能之一。 我相信我們以前都做過； 打開一個新的常規選項卡或隱身窗口以查看我們製作的頁面的結果。 然後，使用 Chrome 擴展程序或 Firefox 插件獲取整個頁面的打印屏幕。 所有這些都是為了讓您對您正在處理的佈局有一個全新的認識，並查看所有內容是否適合整個頁面結構。

雖然我仍然建議偶爾這樣做，但您不必在短時間內多次這樣做。 相反，請使用 Visual Builder 中的縮小選項。 這不僅可以為您提供所需的視角，還可以幫助您快速更改，而無需離開頁面。

最後的想法

在這篇文章中，我們向您展示了 7 種不同的 Divi 最佳實踐，它們將幫助您在使用 Divi 創建網站時提高工作效率。 創建任何類型的網站時，這些提示肯定會派上用場！ 如果您有任何問題或建議，請務必在下方評論區留言！

特色圖片由 aurielaki/shutterstock.com 提供