使用Divi 5設計變量創建尺寸和間距系統

Divi 5為您提供了一種結構化的方法，可以在整個網站上定義，管理和重新使用尺寸和間隔決策。使用設計變量和預設，您可以創建一個易於維護，調整和復制的可擴展設計系統。

在這篇文章中，我們將向您展示如何在系統中進行思考，並將帶您通過構建全面的尺寸和間距系統。

Divi 5已準備好在您創建的任何新站點上使用，但建議您（暫時）遷移現有站點。

為什麼使用尺寸和間距系統？

大多數Divi用戶都希望在佈局，邊距和排版方面保持一致性。但是很少有人會儘早定義這些標準。或者，如果您這樣做，則可能是通過風格的兒童主題來完成的。現在，您可以：

訂閱我們的YouTube頻道

1. 定義一個數字變量一次（例如16px或夾具（16px，4vw，48px））
2. 將其分配給模塊/元素預設
3. 或選項組預設（例如間距或尺寸）
4. 稍後更新變量，並查看更改反映在網站範圍內
5. 整體上使用更少的CSS來縮小頁面

在其他站點建設者的情況下，設計人員傾向於大力依靠CSS框架，以應用一致的間距和尺寸，同時使用可以從項目中採用的系統。使用Divi 5，您可以使用Divi的設計變量創建自己的“設計框架”，而無需觸摸單個代碼。

元素大小，填充和邊緣

每個Web元素都有三個組件，影響整體間距和大小：

• 元素大小：由寬度和高度定義的元素的核心內容大小。
• 填充：在元素中添加的空間，增加了其可點擊區域和視覺尺寸。
• 邊距：在元素之外添加的空間，將其從其他元素推開。

分區元素的實例

通常，這就是您可以期望在Divi中使用填充和利潤的方式：

• 部分通常具有頂部和底部填充（不是邊距），以在頁面內創建垂直間距。
• 行通常從垂直填充物中受益，但否則讓內容填充它們。
• 列主要關注用於創建列間隙的邊距。
• 模塊通常使用底部邊緣清楚地分開堆疊元素，但餘量的數量取決於視覺分組。

Divi的默認間距值

使用Divi的Web Design的初學者甚至可能沒有意識到Divi開箱即用為您做出一些間隔決定。經驗豐富的設計師經常將其調整以匹配他們的目標，但是這些默認設備使大多數人都可以快速開始自己的項目。

這些默認值可能會有所幫助，但是設計師通常更喜歡設定自己的間距標準。如果您想查看未設置默認填充的頁面的樣子，則可以執行此操作：

1. 轉到任何元素，在“設計”選項卡下找到“間距”選項組。
2. 打開默認選項組，並將頂部和底部填充設置為0 （零）。
3. 保存默認間距OG預設，以將其應用於每個元素。

如果沒有Divi的默認設置，這將向您顯示頁面的外觀。它看起來不會那麼好，但是您將開始看到創建自己的設計系統需要做的事情（或者您可以使用Divi的默認設置並在您看到合適的情況下進行更改）。

使用8分間距

8點刻度是一個佈局方案，其中使用8的增量構建間距值。因此，您不使用任意值（例如13px或27px），而是堅持諸如8、16、24、32、40、48之類的值。

該系統有幫助：

• 使用一致的尺寸進行垂直和水平節奏保持垂直和水平節奏
• 確保間距堆疊在斷點上乾淨
• 加快決策（選擇更少=更快的設計）

您可以根據您的偏好或秤類型使用PX或REM中的比例。例如，當基本字體大小為16px時，16px變為1REM。

頁面的模型將您的注意力分組到選擇區域，並以垂直間距將訪問者推向頁面上

垂直間距告訴讀者在哪裡聚焦。與更緊密的間距聚集在一起的項目自然被視為彼此相關。通過更多空間分開的事物表明了一個新想法。

如何創建尺寸和間距系統

您的尺寸和空間的系統包括兩件事：設置變量或代幣，這些變量或令牌將在整個設計中使用，並始終在整個站點設計中使用這些變量。這是您可以通過Divi做到這一點的方法。

步驟1：在設計變量管理器中創建數字變量

Divi 5引入了一個可重複使用數值的視覺接口。每個數字變量包括：

1. 一個易於回憶的名稱（例如，gap-sm，text-h1），不太長
2. 數字值或函數calc（）或clamp（）
3. CSS單元（PX，REM，％，大眾等）

由於具有變量管理器，因此您無需在單獨的樣式表中編寫CSS變量。您可以在設計變量管理器中設置所有這些，然後從視覺構建器中的輸入字段中選擇它們。

以下是一組完整的數字變量，以匹配8點設計系統。您不必使用它，但它可以使您了解可能的事情。

這就是將其填寫在變量管理器中的樣子。

請注意，這些間距值將在Divi 5的即將到來的Flexbox功能中有所幫助

步驟2：計劃您的8分間距系統

您的頁面通常包含重複的元素模式。尋找常見組或群集，例如：

• 標題，段落，按鈕
• 小標題，大標題，段落
• 圖標，段落
• 包含多個元素的卡片

借助您最初的線框（或占位符設計），您將有機會創建潛在的模式。您還將創建不適合您必須決定如何處理的模式的東西。但這都是設計的一部分。

您可以在無花果上或直接創建帶有佔位符元素的線框頁面來執行此操作。只需將所有您可以佈置在頁面上的所有內容即可。您可以使用稱為“測量所有內容”的鍍鉻擴展名，以幫助您在開始調整這些方面（首先使用Divi的默認間距）可視化間距。

要使用擴展名，請從Chrome擴展工具欄中激活它。然後單擊您感興趣的頁面上的元素，將工具集中在該元素上。從那裡開始，將鼠標移動以測量當前選擇的元素和其他元素之間的各個方面。

步驟3：將數字變量分配給選項組預設

使用頁面的線框設置和設計變量，您可以開始對頁面進行間距和尺寸相關的更改。您可以首先從內容組開始。讓我們專注於英雄部分中的標題，段落和按鈕。

帶有佔位符內容和字體/字體尺寸的線框

請注意，在這一點上，您需要已經設置了排版的初稿。這包括字體，字體尺寸和線高/字母間距。沒有這個，一旦建立印刷系統，您很可能會重新平衡所有尺寸。

排版大小選項的示例設置為數字變量

現在，我們想評估設計中正在應用什麼默認間距。為此，您可以在帖子中查看圖表，並將其與我們在英雄部分中所做的事情進行比較。顯然，有一個（＃1）和兩個行（＃2和＃3）。現在，我們將默認行頂/底部填充設置為零。

接下來，我們有兩個部分間距的選項：我們可以將填充物設置為零並稍後弄清楚，否則我們可以在默認元素預設中設置一些初步的頂部和底部填充，以使各節看起來像這樣：

• 桌面：頂部和底部填充設置為Space-XXXL
• 平板電腦：頂部和底部填充設置為Space-XXL
• 手機：頂部和底部填充設置為Space-XL

但是，您要做的完全取決於您和最終設置的間距設計變量（如果您願意將其作為自己的默認設置）。我們現在擁有的（默認行填充設置為零和自定義部分填充）：

步驟4：模塊間距

接下來要做的是在各節/行中的模塊之間的間距上工作。關鍵是選擇一種將間距應用於模塊的一致方法。

您有選項，您可以通過多種方式將間距拆分：

• 將間距應用於邊緣頂
• 將間距應用於邊距底部
• 在邊距和邊緣底之間均勻地施加間距

重要的是要記住，默認情況下，許多模塊都具有餘量底部，因此我建議您在設置間距範式時開始使用該約定，然後從那裡開始。對於初學者，您可以將頂部/底部邊緣設置為零，以查看模塊之間的間距如何，而沒有默認的默認設置。

在本節中，我們將0PX應用於餘量頂部和底部，以查看所有這些模塊，而無需默認間距

現在，我們可以開始將間距設計變量分配給這些模塊的邊距底部，以創建間距系統。我們將從標題和身體文字開始。

當您開始使用模塊間距看到模式時，您可能需要將這些間距選擇添加到默認元素預設中。並且由於您需要為偏差的元素創建間距規則，因此可以創建自定義元素預設。新元素將從那裡使用默認預設，但是您可以快速為各種情況選擇自定義元素預設。

您將如何使用Divi 5進行尺寸和間距？

創建一個間距和尺寸系統，您很滿意，歸結為練習基本面並傾向於手頭的工具。 Divi 5正在為WordPress網站創建事實上的設計系統。它具有很大的靈活性的最佳位置，但是很容易纏繞您的頭。

如果您從未考慮過創建設計系統，則Divi允許您從設計變量和預設級別考慮它，而不僅僅是在單個模塊或元素級別上。這可以幫助您比以往任何時候都更快地將基本設計決策應用於元素。

您會嘗試8點系統，還是計劃其他計劃？另外，這是您第一次考慮Divi的默認間距嗎？它使設計具有Divi Automatic的設計，但是對於專業設計師而言，您可能需要更改其中的一些默認設置以實現您的像素完美視野。

Divi 5已準備好在您創建的任何新站點上使用。