使用 Divi 的新高度和寬度選項來創建響應式設計

儘管它們通常不是訪問者註意到您的網站的第一件事，但寬度和高度 CSS 屬性有助於使您的網站保持一致並看起來很棒。 現在，使用 Divi 的新可拖動大小選項，您可以在構建器本身內部控制每個元素的寬度、最大寬度、最小高度、高度和最大高度。 這使您可以自由地創建在不同屏幕尺寸上具有高度響應性的網站。

現在，所有這些聽起來都很棒，但實際上如何將其轉化為一個漂亮的網站？ 這正是我們要在這篇文章中討論的內容。 我們將首先解釋 Divi 設置中可用的所有高度和寬度屬性之間的區別，然後在不同的場景中使用它們來使我們的頁面設計完全按照我們希望的方式運行。

讓我們開始吧！

訂閱我們的 YouTube 頻道

了解屬性之間的差異

在我們的日常設計過程中使用寬度和最大寬度之前，了解它們的作用很重要。 理論上的解釋是這樣的：

寬度 –設計元素的實際寬度。 如果這是 100%，則它與容器允許的寬度一樣寬。 寬度通常使用 % 表示。 寬度的百分比越低，設計元素就越窄。

最大寬度 -最大寬度對寬度有影響。 如果模塊的寬度設置為 100%，只要它保持在最大寬度值以下，它就會堅持該值。 一旦達到最大寬度值，它就不會超過它。

但這如何轉化為響應式設計？ 為了幫助解釋差異，我們將通過在全新頁面上啟用 Visual Builder 來創建視覺比較。 我們將添加一個包含一列行的部分。 然後，插入帶有一些內容、背景顏色和一些自定義填充的文本模塊。

改變寬度

當您將文本模塊的寬度更改為 80% 時，您將看到文本模塊的尺寸縮小。 也可以根據需要對齊模塊。

更改最大寬度

當您更改最大寬度時，指定的值只會從實際寬度超過最大寬度值的那一刻開始應用。 讓我們快速演示一下：

不超過

超過

除了寬度和最大寬度，您還可以在每個元素的大小設置中找到最小高度、高度和最大高度。 這就是你從這些術語理論上可以理解的：

最小高度 -要分配給元素的最小高度。 如果此值大於輸入的高度，則輸入的最小高度將占主導地位。

高度 -這定義了要分配給元素的實際高度。

最大高度 -一旦高度超過分配給高度的值，該值將成為新高度。

更改最小高度

如果您更改元素的最小高度，該值將成為標準。 測試時，您將自動實時看到文本模塊的高度變化。

改變高度

如果您將最小高度和高度結合起來，則必須確保高度大於最小高度。 如果不是，高度將被忽略。 在下面的兩個 GIF 中，您將能夠實時看到差異。

不超過

超過

更改最大高度

如果最大高度超過最小高度但小於高度，則最大高度將接管。 例如，如果您為最小高度分配比最大高度更高的值，則最小高度將占主導地位。

更改行的最大寬度

網頁設計的最佳實踐之一是為整個網站確定一個特定的最大寬度。 這有助於使所有內容在不同的屏幕尺寸上看起來都具有響應性。 它還可以幫助設計師創建準確的線框。

更改全局最大寬度

您可能知道也可能不知道，您可以通過轉到“常規設置”並繼續“佈局設置”，在主題定制器中為您的內容設置特定的默認最大寬度。 保持最大寬度不變有助於增強響應能力。

特別更改一行的最大寬度

通過新的可拖動大小更新，您還可以單獨定義行的最大寬度。 這對於使用更高的最大寬度更有意義的例外情況非常有用。

給模塊相同的高度

您應該記住的另一種技術側重於為相似的元素提供相同的高度。 這在美學上令人賞心悅目，並有助於訪問者輕鬆瀏覽內容。 有兩種常見的方法來解決這個問題：

使用列均衡器

第一種方法是 Divi 使用了很長時間的方法。 如果要為行中的每一列創建相同的高度，可以在行的大小設置中啟用列均衡器。 如果您使用列背景顏色，您會很快注意到差異。

為每個模塊分配高度

另一種方法是為您添加的模塊分配一個預定義的高度。

對齊模塊內的內容

為所有模塊指定高度後，您還可以調整內容的對齊方式。 為此，您可以使用自定義填充來手動確定模塊中的空白，或者使用幾行 CSS 代碼來自動對齊內容。

display: flex;
flex-wrap: wrap;
align-content: center;

選擇設計元素高度或寬度並將溢出變成滾動

您可以使用新的可拖動大小選項做的另一件很酷的事情是將溢出變成滾動。 這將輕鬆幫助您節省頁面空間並添加額外的交互。 這有兩個步驟； 為元素設置高度並更改可見性設置中的溢出。 首先更改元素的高度。

然後，轉到元素的可見性設置並將垂直溢出更改為滾動。

創建跨所有屏幕尺寸的全屏英雄部分

繼續下一個也是最後一個提示！ 想要創建一個全屏英雄部分？ 打開頁面上的英雄部分，轉到大小設置並更改高度。 為此使用高度視口單位很重要，以確保所有屏幕尺寸的所有內容都保持響應。

• 高度：100vh

想要在全屏英雄部分集中對齊內容嗎？ 還將以下自定義 CSS 代碼行添加到您部分的主要元素：

display: flex;
flex-wrap: wrap;
align-content: center;

最後的想法

在這篇文章中，我們已經討論了 Divi 的可拖動大小更新帶來的新寬度和高度選項。 我們已經向您展示了它們的工作原理以及如何使用它們為您正在構建的任何類型的網站創建響應式頁面設計。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。