使用Divi 5創建基於間隙的間距系統

一致的間距是一個精美的專業網站的基礎。您可以依靠單個系統來使佈局在您的網站上保持清潔和平衡，而不是一個一個單個元素管理利潤。

借助Divi 5的新設計變量和Flexbox功能，您現在可以直接在Visual Builder中構建一個基於間隙的間距系統，而無需自定義編碼。讓我們看看！

為什麼傳統的間距方法不足

利潤和填充似乎很簡單。在這裡添加一些空間，調整那裡的填充物。但是這種方法很容易變得凌亂。這是它在實踐中的表現：

您在一個文本塊上設置了30px的邊距。然後，您需要一個按鈕周圍的空間，因此添加20px。

另一個模塊需要呼吸空間，因此您選擇40px。目前每個決定都感覺不錯，但是您正在建造紙牌屋。

切換到移動設備，一切看起來都可能破壞。那些精心選擇的像素值不會翻譯。您的間距在台式機上看起來很完美，但在較小的屏幕尺寸上不平衡。因此，您可以創建特定於移動的值，然後創建平板電腦值。

現在，您正在管理三個不同的間距系統。這種分裂方法使您的網站上保持一致的視覺節奏。

差距屬性如何使間距變得簡單

間隙屬性的工作方式不同於傳統邊緣。您不會單獨應用間距。相反，您在父容器上設置了間距規則。容器自動處理所有子元素之間的間距。

啟用FlexBox，您將獲得兩個差距控件：水平和垂直。將水平差距設置為24px，所有子元素之間的空間之間的空間水平為24px。將垂直差距設置為15px，堆疊元素獲得15px的垂直空間。

這適用於Flexbox容器中的任何內容。文本模塊，圖像，按鈕，分隔線以及您放入的其他內容都具有相同的一致間距。您無需挖掘單個模塊並分別調整其邊距；差距屬性處理間距數學。

傳統方法是隨機的間距選擇：這裡的10px，20px，其他地方40px。這些分散的值會導致不一致，並使很難知道適用哪個間距。 GAP屬性通過對所有元素使用一個一致的規則來刪除猜測。

這種方法仍然有局限性。您仍然需要記住所使用的每個值，並在需要的任何地方手動應用它。您必須猜測什麼值在哪裡有效。設置這些值後，改變主意意味著找到每個值並手動更換它，留出錯誤和不一致的空間。

具有彈性箱和設計變量的基於間隙的間距系統是一種更好的方法。

如何在Divi 5中設置差距系統

構建基於間隙的間距系統聽起來很複雜，但是Divi 5使其令人驚訝地簡單。您不需要任何編碼知識或外部框架。 Visual Builder通過設計變量和Flexbox控件來處理所有內容。從創建間距變量到保存可重複使用的預設，我們將介紹每個步驟。

1。創建間距變量

Divi 5可以使用設計變量將差距值存儲在視覺構建器中。您構建一次間距系統，然後應用這些值，在出現flexbox控件的任何位置，不需要自定義CSS功能。

可以在視覺構建器的左側欄中找到變量管理器。單擊該圖標，然後打開數字選項卡，其中可以添加間距變量。

在這裡，您將創建可以在整個站點而不是硬編碼像素的值中使用的值。有幾個設計變量可用；我們不會在這篇文章中介紹這些內容，但我們有一個很棒的指南。

從您的基本間距單元開始。大多數設計師以8-12px作為基礎工作，但是您可以選擇4PX，10PX或任何適合您設計節奏的東西。除了像素外，您還可以在這裡使用高級單元。例如，我們從rem開始而不是像素（假設瀏覽器默認1REM = 16px）：

• GAP XS：0.75REM（僅具有圖標和文本的列的緊密關係〜12px）
• 差距S：1.25REM（具有文本塊的列的〜20px）
• GAP M：2REM（〜32px用於功能框，服務列）
• GAP L：3REM（主要內容部分，側邊欄佈局〜48px）

這些標籤不是固定的；您和您的團隊可以根據需要重命名。您還可以添加更多差距變量。 REM單元具有瀏覽器字體設置的規模，因此增加文本大小的訪問者會獲得比例間距。這可以提高可訪問性。

使用夾具製作可擴展的空白

我們也可以使用夾具（）。如果您不知道什麼是夾具（），我們將簡要解釋。但首先，考慮將以下內容添加到數字變量：

• 水平列縫隙：夾具（16px，2vw，32px）（用於卡，功能等之間的水平差距。）
• 垂直柱縫隙：夾具（16px，1.5VW，32px）（用於卡，功能等之間的垂直差距）

Clamp（）是一個安全使用的CSS單元。您給出三個值：最小，首选和最大值。瀏覽器嘗試首選值，但是如果它太小，則使用最小值，如果它太大，則使用最大值。

例如，水平柱間隙：夾具（16px，2vw，32px）。帶有屏幕寬度的縫隙縮放（2VW = 2％的視口）。它不會在小屏幕上或大屏幕上的32px以上的16px以下。這使間距保持平衡，而無需斷點或媒體查詢。

您可以使用任何值。我們選擇了這種方法，因為它易於維護，適應更改並產生更一致的結果。

2。在您的各節上啟用flexbox佈局

默認情況下，新部分使用FlexBox。對於較舊的站點，通過單擊設置圖標，打開“設計”選項卡，在佈局選項卡下選擇佈局樣式，然後選擇“ Flex”來轉換部分。對您的行和列進行相同的操作。

啟用FLEX後，您將獲得諸如合理內容的選項，以進行對齊和分配。對齊項目控件可讓您設置空間水平耗盡時的項目行為。

在這裡，您可以發現差距控件，它們具有單獨的水平和垂直滑塊，以在一排內的列或模塊之間設置間距。

3。使用變量應用差距值

一旦在Divi的變量管理器中設置了差距變量，將它們應用於Flexbox Gap設置，通過動態內容系統將變得簡單。導航到您的佈局設置，並懸停在水平或垂直間隙字段中的標籤上，以揭示動態內容圖標。

單擊動態內容圖標以打開“變量選擇”對話框。您保存的差距變量出現在此菜單中。

您可能已經註意到，我們根據使用它們的上下文添加了兩組差距。讓我們深入了解為什麼：

夾具間隙：在彈性列之間

您的夾具間隙將通過Divi的Flexbox設置在“容器”級別上工作。

應用水平列隙[夾具（16px，2vw，32px）]當您並排排列的列時，就像一排的三張服務卡一樣。選擇後，Divi會自動將其應用於間隙設置。該字段將顯示您的變量名稱，確認連接。這將在第1列，第2列和第3列之間創建比例的水平間距，當佈局方向設置為行。

應用垂直列隙[夾具（16px，1.5vw，32px）]當您的佈局方向設置為列時，垂直堆疊項目。當佈局方向設置為列時，這將按比例從上到下空間。

當帶有行方向包裹到多行的列（例如每行三列排列的六張卡片）時，請應用兩個差距。水平差距在每一行中散發物品，而垂直縫隙本身則將行空間。

基本差距：行之內的內容

您的基本差距控制每列內部內容件之間的關係。當標題後面是同一列中的段落和按鈕時，請考慮在它們之間使用差距XS（0.75REM）。

如果需要在兩個列之間進行顯著間距，請考慮使用差距S（1.25REM）對於具有多個文本元素的內容組或GAP L（3REM），尤其是如果將列的佈局方向設置為行時。

設計變量優勢

設計變量比手動打字值有多個好處。由於標籤可以是上下文，因此它們在不記住像素或REM值的情況下保持間距保持一致。

當您更改間距理念時，請在變量管理器中更新變量以更新網站上使用的每個差距。

當團隊成員輸入不同的值時，此視覺方法還避免了間隔錯誤。差距變量創建了一種用於間距的通用語言，使佈局與您設置的設計標准保持一致。這對於與許多貢獻者的大型項目特別有用，或者在客戶編輯或添加頁面時客戶交換後。

4。設置響應差距

手機的水平空間有限。您的三列服務佈局在台式機上看起來很棒，但是在360px手機屏幕上變得狹窄而僵硬。

Divi 5為您提供了七個可自定義的斷點，可以使用：電話，電話寬，平板電腦，平板電腦寬，桌面，寬屏和超寬。每個斷點獨立起作用。您可以更改佈局方向，交換差距變量，或在移動設備上調整對齊方式，而無需弄亂桌面。這使您可以針對佈局需要更改的精確屏幕寬度。

切換到電話斷點，然後將佈局方向從“行”更改為“列”。清除水平間隙選項，因為您的列垂直堆疊而不是為水平空間而戰。

隨著視口寬度的變化，基於夾具的垂直間隙會自動縮小並自動增長。在小型手機屏幕上，2VW等於約7px，但夾具不會超過16px。在較大的屏幕上，2VW可能意味著18px，在更大的屏幕上，20px。

隨著屏幕尺寸的變化，間距在這些限制之間平穩增長。如果不手動設置不同的值，則您可以在移動設備上獲得緊密的間距，並在桌面上進行寬敞的間距。

基本間隙可能仍然需要每個斷點的手動調整。 GAP M可能在移動設備上感覺太緊。切換到您的移動斷點，然後應用差距L而不是垂直差距選項。

您還可以創建特定於移動的變量，例如“ Gap Mobile S”或“ Gap Mobile L”，並將其應用於手機和平板電腦斷點。但是，在大多數情況下，基本基礎和夾具差距效果很好。

5。將您的配置保存為預設

您的間隙系統現在運行良好。設計變量使您可以通過與您一起工作的視覺界面進行控制。但是，一遍又一遍地設置Flexbox配置會很快舊。您必須調整佈局方向，對齊和包裝設置。然後，將差距變量應用於每個新部分。這個過程吃了時間。

選項組預設解決此問題。它存儲您完整的FlexBox設置，包括佈局方向，對齊，包裝，理由以及參考設計變量的水平和垂直間隙。

配置所有Flexbox設置後，將懸停在佈局樣式面板上。您會看到選項組預設圖標。

單擊它，然後選擇“從當前樣式創建預設”。根據佈局的作用來命名：“三列網格”，“服務網格”或“卡片顯示”。

預設將Flexbox配置傳遞到任何容器。它不會復制背景顏色，字體或其他視覺樣式。

將您的“三列網格”預設應用於任何行。它會自動設置相同的間距，對齊和包裝行為。每行或列都可以在使用相同的佈局結構時保持其視覺外觀。

您花費更少的時間來重新創建已經完善的設置。視覺標識在每個部分中保持獨特。結構基礎在您的網站上保持一致。您的差距系統保持迅速實現，並且您經過驗證的佈局模式將有效地重複使用。

每次使用Divi 5獲得完美的間距

隨著Divi 5的新彈性箱和設計變量，一致的間距變得毫不費力。 GAP控制設備之間的平衡佈局，而變量可確保更新在整個網站中都會進行單一更改反映。

您可以獲得一個清晰的系統，而不是恆定修復。設置一次間距，將其重複使用，並專注於為訪客設計出色的體驗。