如何用Divi 5的字體設計變量替換字體

字體更新可能是頭痛。更改標題字體，突然之間，您正在跟踪它出現的每個位置。錯過了一兩個標題，您的設計立即感到沮喪。手動更新字體會引起不一致。

Divi 5用字體變量和預設解決了此問題。您可以設置一個字體一次，讓系統處理其餘部分，而不是追逐每個實例。排版保持乾淨和統一，無論您使用多少個模塊。看看它的簡單。

為什麼靜態字體可以創建問題

靜態字體設置創建了一個並發症的網絡，隨著時間的流逝而變得更糟。當您將字體直接添加到每個元素中時，您會在數百個不同的地方散佈排版選擇。

您可以使用Playfair顯示器建立一個網站，用於標題和Poppins進行身體文本。幾個月後，您想切換到更現代的字體堆棧。現在，您可以瀏覽每個模塊，每個預設，每個自定義設置，以查找這些字體居住的位置。甚至想念一個埋葬在證明部分深處的標題，您的設計看起來可能會破碎。

當您手動更新字體一一時，您可能會意外使用不同的尺寸或權重。您將大多數標題更新為32px，但錯過了一些保持28px的標題。現在，您曾經的粘合劑設計感覺不平衡。

這種分散的方法將簡單的字體變化為主要項目。需要花費幾分鐘的時間才能進行繁瑣的狩獵和更新。您花費的時間更多的時間管理排版，而不是實際設計。

您應該使用的是：Divi 5的設計變量和預設

設計變量存儲您的設計設置，您可以在任何地方重複使用。設置一個字體一次，將其保存為設計變量，然後在您的網站上使用它。稍後更改變量，以及使用IT的所有元素自動更新。

Divi提供六種變量類型：數字，文本，圖像，鏈接，顏色和字體。兩個默認字體變量已準備就緒：一個用於標題，一個用於身體文本。變量管理器位於數據庫圖標下的左側欄中。

這些變量在不支持它們的字段中起作用，例如數字字段，字體字段和間距設置。單擊任何受支持字段旁邊的變量圖標以查看您的選項。

哪個選項組預設會做

選項組預設保存特定樣式組，例如排版，邊界或間距，而不是整個模塊。例如，您可以創建一個僅用於標題字體和尺寸的預設。

當您應用選項組預設時，僅更改該樣式區域。其餘的模塊保持不變。您可以在一個元素上結合不同的預設，而不會出現問題。將設計變量與選項組預設混合，以提高靈活性。創建使用變量的預設。當您更新變量時，所有使用它的預設也更新。

分步指南，以創建Divi 5的動態字體系統

設置字體變量大約需要二十分鐘。一旦工作，字體更改就會立即在您的整個網站上發生。這是到達那裡的方法：

1。為新系統創建字體變量

通過單擊左側欄上的數據庫圖標打開變量管理器。轉到“字體”選項卡。您會看到兩個默認變量：一個用於標題，一個用於身體文本。

• 設置主字體：單擊標題變量。選擇您的字體家庭和重量，然後節省。對於身體文本，請執行同樣的操作，但請選擇簡潔且易於閱讀的內容。
• 如果需要，請添加更多字體：有些設計需要額外的字體來引號，推薦或特殊文本。單擊“添加新變量”，並給它一個清晰的名稱。
• 填寫所有詳細信息：每個變量都可以容納您的字體系列，重量，樣式和其他設置。當您想增加重點時，請使用大膽的重量來成為頭條新聞，定期重量的身體文本和斜體。
• 保持您的名字簡單：而不是混淆標籤，而是稱其為“引用字體”或“突出顯示字體”。
• 請記住要保存：您的更改不會粘住，直到您點擊“保存”按鈕。

大多數網站只需要標題和身體字體。僅添加滿足特殊設計需求的額外變量，而不是小型文本調整。更少的變量使創建新內容變得更加容易。

2。添加字體大小的數字變量

切換到變量管理器中的數字選項卡。在這裡，您可以創建與字體一起使用的尺寸變量。將這些視為您的排版量表。

從標題尺寸開始。創建名為H1，H2，H3等的變量。將每個設置為不同的尺寸，對您的設計有意義。您可以使用適應其他屏幕的尺寸（例如Clamp（）等常規像素值或響應式單元（例如Clamp（））。

身體文本也需要其大小變量。將其稱為“體型”之類的東西，並將其設置為舒適的閱讀尺寸，通常在16px至18px左右。

您還可以為特殊文本需求創建變量。也許您需要標題的“小文本”變量，或者需要一個用於證明的“大文本”變量。清楚地命名它們，以便您記住它們以後的用途。

這些數字變量在您需要一致的尺寸的任何地方都可以使用。使用它們進行線路高度，間距或任何在您網站上多次出現的測量值。當您更新一個數字變量時，使用它的所有內容會自動更改。

大多數網站只需要標題和身體字體。僅添加滿足特殊設計需求的額外變量，而不是小型文本調整。更少的變量使創建新內容變得更加容易。

3。使用查找並替換以交換靜態字體

右鍵單擊模塊設置中的任何字體字段，以查看查找和替換選項。這打開了一個面板，Divi會自動加載當前字體設置。現在，您可以將該靜態字體與您的設計變量之一交換。

源元素字段顯示您從哪個模塊開始。您可以將其更改為您的頁面上的任何其他元素作為起點。

查找值顯示要替換的任何字體。與其選擇另一個靜態字體，不如將您的替換值設置為一個字體設計變量之一。

查找並更換字體尺寸的作品。右鍵單擊任何字體大小字段以訪問相同的替換面板。這使您可以將元素級別尺寸（例如24px）與數字變量交換。

查找手動設置字體大小的文本模塊。這些零散的尺寸設置會產生與靜態字體相同的問題。當您想調整排版刻度時，您最終會通過每個模塊尋找每個尺寸。用您的H1，H2，體型或其他數字變量替換這些靜態尺寸。

設置您的替換邊界

查找並替換發生更改的位置控件。選擇“整個頁面”以更新整個佈局的字體。選擇“當前元素和兒童”以限制對該特定部分以及嵌套在其中的任何內容的變化。

您還可以針對父容器或特定頁面區域。

查找並更換元素類型可幫助您專注於特定模塊。選擇“所有元素”以進行完整的字體交換，或選擇“模塊”以跳過容器和結構元素。通過僅針對某些模塊類型，您可以獲得更具體的特定內容。

避免意外更換

“唯一替換相同的字段”選項可防止不必要的更改。當您想替換字體時，請打開此操作，而不會影響可能共享相同值的其他設置。

即使您替換恰好稱為“ 10px”或類似的字體，這將使邊界半徑保持在10px。

如果沒有此設置，請查找並更換各處的目標值。啟用了IT，系統僅更改實際的字體字段，而將其他設計設置單獨使用。

4。通過您的字體系統工作

您需要單獨的查找和更換不同字體重量和样式的操作。您的網站可能會以常規和大膽的重量使用相同的字體系列。單獨處理每個變化，用您之前創建的適當的設計變量代替它們。

每次過程都相同：右鍵單擊字體字段，將替換值設置為設計變量，選擇範圍並應用更改。重複需要更新的每個靜態字體。

5。用變量創建預設

訪問任何文本模塊並導航到“設計”選項卡。找到字體，然後單擊預設圖標。從下拉菜單中選擇標題字體變量。將您的H1號變量應用於尺寸。

配置線高和間距值。將預設命名為“主要標題”並保存。單擊星圖將其設置為默認值。新的文本模塊將自動採用這些設置。所有具有相同標籤和任何樣式的現有模塊也將繼承這些設置。

您可以在每個標題級別重複此過程。每個預設都保持一致性，同時服用不同的目的。

這些版式預設與任何包含文本字段的模塊一起使用。 Blurb模塊，手風琴內容，證明和聯繫表都接受相同的預設。此跨模塊兼容性消除了重複的樣式任務。

選項組預設目標特定樣式類別。將標題預設應用於按鈕文本，同時保持按鈕的背景和邊框設置完整。

6。將新變量擴展到所有元素

右鍵單擊使用新變量的任何元素。從菜單中選擇“擴展屬性”。將源元素配置為您最近更新的模塊。

將位置設置為“整頁”以進行完整的更新。在屬性類型下，選擇“樣式”以專注於設計元素。

啟用“僅替換相同的字段”，以防止對填充，邊距或其他可能與您的字體大小相匹配的數字值的更改。選擇“所有元素”以更新模塊和容器，或者選擇“模塊”以專門針對內容元素。

處理較小部分而不是范圍內更新的複雜頁面。選擇“當前部分”以限制一次更改對一個區域。從您的標題部分開始。應用可變擴展，審查結果，然後繼續前往主要內容領域。最後完成頁腳部分。

這種有條理的方法可以及早確定格式衝突並控制更新過程。

Divi 5使版式更容易

您曾經從Playfair顯示屏切換到現代的內容並更新大多數標題，但是錯過了第三頁的證明。您的網站看上去不平衡了數週。

Divi 5的變量簡化了您網站的排版。從側邊欄中的數據庫圖標更改標題變量，每個文本模塊都會立即更新。包括該接觸形式的頁腳。

下次重新品牌時，您將更新兩個變量，而不是單擊五十個模塊。查找和更換工具會抓住您通常會錯過的東西。您的排版保持緊密，您的周末保持了您的狀態。