關於Divi 5的可自定義斷點，您需要了解的一切

準備大大改善建立網站的方式。 Divi 5具有令人興奮的新功能，可自定義的斷點，這使您可以對網站的響應能力進行難以置信的控制。借助Divi 5的新可自定義斷點，您可以在所有設備上創建無縫的體驗。無論您是為大型桌面顯示器設計還是最小的移動屏幕，Divi 5都可以幫助確保您的網站每次看起來都完美。

在這篇文章中，我們將介紹您需要了解的有關此新功能的所有信息，並向您展示如何使用它！

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

通過可自定義的斷點下載Divi 5

使用可自定義的斷點，您現在可以微調網站的響應能力，以更好地適合不同的屏幕尺寸。無論您是設計超寬台式機還是寬闊的移動屏幕，Divi 5都將控制權放在您的手中。

我可以在網站上使用Divi 5嗎？

您可以在網站上使用Divi 5，但其可用性取決於您的特定用例。 Divi 5目前處於公共Alpha階段，這意味著它仍在積極開發和完善。雖然尚未在所有生產環境中推薦它，但在某些特定方案中，您可以在沒有問題的情況下開始使用它。

在本地和分期網站上使用Divi 5

Divi 5目前可用於本地和分期環境，使用戶可以安全地測試其新功能而不會影響其實時網站。由於Divi 5仍處於公共Alpha階段，因此這種方法可確保用戶可以嘗試Divi 5的改進，報告錯誤並提供反饋，同時保持其生產地點的穩定性。

您可以在新生產網站上安全地使用Divi 5

Divi 5穩定，準備啟動全新的網站。如果您是從頭開始的，則可以充分利用其快速性能，模塊化框架和防止未來的技術，而不必擔心向後兼容問題。但是，徹底的測試階段對於在遷移之前依靠廣泛的第三方整合的現有站點至關重要。在這一點上，我們仍然不建議將現有網站轉換為Divi 5。

了解Divi的可自定義斷點

斷點是響應設計的基本方面。它們充當閾值，您網站的內容會重新組織自己以確保最佳用戶體驗，無論有人在智能手機，平板電腦還是台式機上瀏覽。

Divi 5的斷點得到了顯著改善，比Divi的先前版本提供了更多的靈活性和控制。自定義最多七個斷點使您可以微調網站的響應能力，以適應更廣泛的設備和屏幕尺寸。

什麼是斷點？

斷點是特定的屏幕寬度，您的網站設計適應該屏幕寬度，以在不同設備上提供最佳的觀看體驗。斷點有助於確保您的內容保持可讀性，視覺吸引力且易於瀏覽，無論屏幕尺寸如何。

響應網站是使用CSS媒體查詢設計的，當屏幕達到特定寬度時，可以應用不同的樣式。當訪問者的屏幕尺寸越過定義的斷點時，該網站會自動調整其佈局，字體，間距或其他設計元素以保持可用性。

通過引入Divi 5中的更多斷點，您可以限制CSS媒體查詢以定義其他設備的斷點的需求。

我應該使用多少個斷點？

斷點的數量取決於聽眾的設備使用情況。用戶在各種屏幕尺寸上訪問網站，從小型智能手機到超寬的桌面屏幕。傳統上，網絡設計人員使用了三個標準斷點 - 台式機，平板電腦和移動設備 - 但Divi 5擴展了此功能，最多可自定義的斷點，以提高靈活性。

可以使更多的斷點放慢我的網站嗎？

不，在Divi 5中啟用更多斷點不會減慢您的網站。與較舊的處理響應式設計的方法不同，Divi 5的新框架是針對性能進行了優化的，可確保其他斷點不會為您的網站增加不必要的負載。

在網站或頁面級別上啟用了斷點嗎？

Divi 5中的斷點是在網站級別啟用和應用的，而不是在每頁上。啟用和自定義斷點後，它們將影響整個網站，確保所有頁面的一致，響應迅速的設計。您對斷點的任何更改都將普遍調整您的網站對不同屏幕大小的響應方式，而不是僅限於單個頁面。

可自定義的斷點在Divi中如何工作

Divi 5的高度靈活和直觀的系統非常適合管理斷點，使您可以更好地控製網站的響應設計。與以前的版本不同，Divi 5允許您自定義多達7個斷點，從而確保您的網站在每個設備上看起來都很完美。該系統旨在為用戶友好，同時為需要它們的人提供高級選項。

在哪裡找到斷點

在Divi 5中，斷點集成到您的頁面設置中，使其易於找到和自定義。您可以在視覺構建器中直接訪問它們，從而確保精簡的工作流程。

如何啟用斷點

通過單擊Divi單擊編輯，打開要編輯和激活視覺構建器的頁面。

單擊位於Visual Builder主任務欄中的省略號菜單（三個點）。

在設置中，您會找到一系列的切換開關，使您可以根據需要啟用或禁用斷點。

一旦激活，每個斷點將在任務欄中可見，使您可以在整個設計中進行更改，而無需單擊單個行或模塊中的響應式控件以調整設置。

您應該使用標準斷點還是自己？

Divi 5的標準斷點旨在覆蓋最常見的屏幕尺寸，包括手機，平板電腦和台式機。這些預定義的斷點對於許多設計師來說是足夠的，因為它們適合大多數用戶和設備。

但是，在某些情況下，創建自定義斷點可能是有益的。例如，如果您想容納超寬的監視器，可折疊智能手機或較小的平板電腦，則可以幫助您在這些用例中更改設計。

在Divi 5中使用自定義斷點

自定義響應斷點可用於解決設計怪癖或內容在較不常見的設備或屏幕分辨率上顯示問題。它們還可以通過僅加載給定屏幕尺寸的必要樣式來幫助提高網站性能，從而減少頁面加載時間。

值得慶幸的是，Divi 5可以單擊幾下自定義這些響應式斷點非常容易。

響應式設備設置打開，將電話斷點設置為所需的寬度，然後重複其他設備的步驟。由於我們希望使該網站適用於較小的設備，因此我們將數字設置為手機的360px 。添加所需像素後，單擊“保存”按鈕繼續。

Divi 5會讓您知道您將要調整網站的斷點。單擊“更新”按鈕以確認更改。

我們將為其餘的屏幕尺寸添加以下斷點：

這些斷點涵蓋了一系列設備，以確保您的網站涵蓋大多數屏幕尺寸和用例：

• 電話： 767px涵蓋了大多數智能手機屏幕尺寸，包括舊型號，例如iPhone 8或三星G7。
• 電話寬： 860px覆蓋了景觀模式的大多數手機屏幕，包括iPhone 14 Pro（及以上）和現代Android設備。
• 平板電腦： 980px在肖像模式下（包括所有iPad）中的大多數平板電腦屏幕都有好處。
• 平板電腦寬： 1024px是大多數iPad和Samsung平板電腦中景觀視圖的標準配置。
• 寬屏： 1280px對於大多數較小的筆記本電腦（Windows或MacOS）來說是一個很好的寬度，包括MacBook Air，MacBook Pro 13“和可比的Windows設備。
• Ultrawide： 2560PX覆蓋較大的桌面屏幕，例如MacBook Pro 15英寸和16英寸筆記本電腦，iMac和標準的高清監視器。

自定義您的響應式設計內部預設

Divi 5最有力的方面之一是其可自定義的斷點如何與預設無縫集成。這使您可以在整個網站上創建一個真正響應迅速的設計。一個完美的例子是修改入門站點的H1預設，以確保所有H1在每個屏幕尺寸上看起來都完美。

首先單擊“英雄”部分中H1中的任何位置以提高其設置。

接下來，單擊模塊標題中的標題預設字段。

預設列表將出現。找到旁邊有藍色複選標記的預設。

懸停在主動預設上以揭示其設置。單擊設置圖標進行編輯。

單擊“設計”選項卡，然後將標題文本大小調整為所需的大小。

保持預設設置打開，然後單擊Divi 5任務欄中的下一個屏幕大小以調整標題的大小。

重複上述步驟，以調整其餘屏幕尺寸的標題預設。完成此操作後，單擊“保存預設”按鈕。

交換斷點時，大小變化將反映在標題預設中。

Divi 4與Divi 5中的響應式編輯

Divi一直是響應式設計的領導者，但是Divi 5將其提升到一個全新的水平。儘管Divi 4為創建響應式網站提供了堅實的基礎，但Divi 5帶來了使響應式編輯比以往任何時候都更直觀，靈活和強大的功能。仔細研究Divi 5如何改善Divi 4的功能。

斷點之間毫不費力的過渡

在Divi 4中，在斷點之間切換非常簡單，但涉及更多的時間，並且不如您在Divi 5中找到的過渡那麼光滑。

Divi 5通過更流暢，更直觀的界面來改善此工作流程。現在，您可以在斷點之間立即過渡，在調整時預覽設計，而無需滯後。這種新版本的Divi使您可以根據要查看的斷點進行即時設計更改。模式之間不再需要切換或恆定切換。這種無縫的體驗節省了時間，並確保了每個斷點中更加凝聚力和拋光的設計。

從3到7個斷點

Divi 4支持3個不同的斷點；這些也可以在Divi 5中找到。

• 桌面： 981px及以上
• 平板電腦： <980px
• 手機： <767px

儘管這些斷點涵蓋了基礎知識，但在容納現代觀眾使用的各種設備和屏幕尺寸時，它們有時會掉落。設計人員有時可能需要CSS媒體查詢來針對不同的屏幕尺寸，尤其是用於超寬的監視器或較小的移動設備。

Divi 5通過將斷點的數量擴展到7個可自定義的選項，從而解決了這一限制，從而更容易針對大量的設備。

• 電話： <767px
• 電話寬：< 860px
• 平板電腦： <980px
• 平板電腦寬：< 1024px
• 桌面： > 981px
• 寬屏： > 1280px
• 超寬： > 1440px

這種提高的靈活性使您可以為更廣泛的設備進行微調設計，從而確保您的網站在從緊湊型智能手機到大型高分辨率監視器的所有內容上看起來都很完美。例如，您現在可以在景觀模式下創建專用的平板電腦斷點，也可以為您的網站優化專業設置中使用的超範圍屏幕。

帆布縮放以完全控制

Divi 5最令人興奮的新功能之一是帆布縮放，這使設計師對他們的網站在不同分辨率上的顯示方式具有前所未有的控制。

這就是帆布縮放在Divi 4中的樣子：

Divi 5的Canvas Rescaling功能使整個體驗更加直觀。只需單擊幾下，您就可以將設計畫布縮放以匹配特定的屏幕分辨率，從而準確地顯示了您的網站在不同設備上的顯示方式。此功能可用於測試較小的移動屏幕或超寬桌面監視器，確保您的設計完美無瑕 - 在板上劃合。

Divi 5永遠包含在您的Divi終身會員中

Divi 5的可自定義斷點賦予設計師的能力，以更精確地創建響應式網站。無論您是完善現有佈局還是從頭開始建立網站，這些新工具都可以靈活地為每個屏幕尺寸製作完美的像素體驗。

Divi 5的最佳部分之一是，它將永遠包含在您的Divi會員資格中（無需支付額外費用）。如果您今天升級到Divi Lifetime會員資格，您將獲得（和更新）到Divi 5的一次性費用，並從未來幾年中受益於這種不斷發展的產品。