如何用Divi 5的設計變量代替靜態樣式

如果您一次調整顏色，填充或字體一次，那麼您可能會意識到可以更慢，容易出錯和無聊的手動樣式更改。

Divi 5引入了一種更聰明的處理方式。使用設計變量並查找和替換，您可以在佈局上更新靜態樣式，並在幾分鐘內構建可重複使用的設計系統。讓我們看看如何。

Divi 5已準備好在新網站上使用。

什麼是“靜態樣式”？

當您導入Divi佈局或使用預設計的部分時，已經設置了所有內容，例如字體，顏色，間距和邊界。如果佈局不使用預設，您會注意到這些值是在元素級別上應用的。

標題可能具有手動輸入的字體大小，按鈕可能會使用特定的顏色代碼，並且填充或間距可能使用固定的數字。這些直接應用的值稱為靜態樣式。

儘管起初它們看起來無害，但當您想進行更改時，它們可能很快成為一個問題。靜態樣式的問題是，它們需要更多時間來管理。如果要更改所有按鈕的顏色或在各節之間調整間距，則必須手動編輯每個按鈕。那是緩慢而令人沮喪的。

現在，想像一下，您正在手動更新完整的網站品牌或使用重複樣式的複雜佈局工作。許多設計師分享了這一過程的挫敗感。但是多年來，沒有可靠的方法來解決它。這就是為什麼我們在Divi 5中構建了更智能的解決方案的原因。

Divi 5如何使替換靜態樣式變得容易

我們使用Divi 5的目標之一是使您的設計工作流程更快，重複性降低。為了幫助您，我們添加了兩個強大的功能：設計變量，可讓您集中樣式並查找和替換，從而使您可以在佈局中立即更新它們。讓我們詳細了解它們。

設計變量可讓您定義全球樣式

使用Divi 5，您最終可以視覺上構建自己的設計框架，並使用它來快速修改品牌樣式。

Divi 5現在讓您將這些值保存為設計變量，而不是在每個模塊上手動應用相同的顏色，字體或間距。這些是可重複使用的值，您可以在整個站點中參考，以使設計更加一致和易於維護。

在Visual Builder內部，變量管理器可讓您以六種不同類型的方式創建和組織變量：顏色，字體，數字（例如間距或尺寸），文本，圖像和鏈接。

您可以使用一個清晰的名稱（例如部分填充）保存每個變量，因此查找和重複使用更容易。與手動編寫CSS變量不同，Divi的界面使您可以直觀地管理這些值而無需觸摸代碼。

應用這些保存變量也很容易。在自定義模塊時，轉到設置，找到變量管理器圖標，然後從列表中選擇您的變量。

當需要進行更改時，您會看到真正的優勢。假設您想在任何地方更改填充物。您只需在變量管理器中更新一個值，而不是編輯數十個模塊，然後在您的網站上更新。

注意在應用設置字段中實時更改的值？這就是全球設計系統的力量。

而且這也不僅限於設計樣式。要有效地管理重複的內容，您還可以保存文本，圖像和鏈接，例如地址，電子郵件或公司標語作為內容變量。不再需要復制paste，只需像動態內容一樣插入它，並且它將在您的網站上保持一致。

了解有關設計變量的所有信息

查找並替換使您可以從靜態樣式切換到全局樣式

Divi 5的查找和替換功能可讓您快速在佈局上快速更新樣式值，而無需單獨編輯每個模塊。它旨在幫助您更改靜態值，例如顏色，字體，間距或任何其他設置，這些設置僅需單擊幾下從單個起點重複的部分。

要使用它，請右鍵單擊視覺構建器內部的任何樣式字段，或懸停在懸空中，然後單擊三個點。您將在下拉列表中看到查找和替換選項。

這打開了一個新的查找並替換面板。在這裡，您可以進行所需的更改並批量應用它們。

• （1.）源元素：您要定位的設置（例如，文本，顏色或間距）。打開下拉列表，您會注意到它實際上是層次結構。
• （2.）查找值：要替換的確切值，例如特定字體或顏色代碼。
• （3.）替換值：您要應用的新值或變量。
• （4.）在位置找到並替換：選擇在何處應用更改。此模塊，部分或整個頁面。
• （5.）在元素類型中找到並替換：確定更改是否應適用於所有元素或僅特定模塊類型。
• （6.）僅替換相同的字段：啟用時，僅當設置和值完全匹配時，才會發生替換。

這是它的工作方式。假設您想更改頁面上使用的標題字體。我們將使用查找和替換面板，而不是通過模塊進行模塊。

當您從標題的設置打開它時，源元素是自動選擇的，因此您不必總是手動選擇它。

（您還可以單擊不同的元素，面板選項將自動調整。）

在查找值中，輸入要替換的值。就我們的示例而言，這是梅德拉一號，當前應用的字體。在替換值中，選擇要應用的新值。讓我們選擇Aclonica。

然後選擇是否要更新整個頁面中的所有實例，還是僅更新查找和替換位置中的列，行還是部分。由於我們要針對所有標題模塊，因此將查找並替換為元素類型作為所有元素。

就是這樣。只需點擊查找和替換，並且在幾秒鐘內更新了20個標題實例。注意身體文本和按鈕字體保持不變嗎？那是因為他們使用不同的值。這就是系統的精確性。

Divi僅在找到確切匹配的情況下應用更改。這意味著您可以自信地清理靜態樣式，而不會弄亂不需要更改的設計。但是，設計變量如何適合這裡？

他們就像蛋糕上的錦上添花。您還可以在替換值字段中使用設計變量。懸停在它上，單擊變量管理器圖標，然後插入一個保存的變量。

這將您的樣式鏈接到全球可重複使用的系統，該系統更容易更新更容易，更有效。這正是我們將使用設計變量替換所有靜態值的方式，以使未來的網站更容易更新。

了解有關查找和替換的所有內容

這兩個功能（以及更多功能）都可以在Divi 5中提供。建造者已被重新構想，以提供更快的性能，更智能的工作流程和更多的控制。老實說，閱讀它們令人興奮，但是當您自己體驗這些功能時，您會注意到真正的變化。

如何用保存變量替換靜態樣式

現在您知道我們將使用什麼工具了，是時候看到它們正在行動了。

為了使您完成整個過程，我以派店登陸頁面佈局為例。該佈局的設計細節（例如字體，顏色和間距）被用作靜態樣式。傳統的方式要求您按模塊自定義IT模塊。但是在本教程中，我們將使用剛剛涵蓋的工作流程逐步替換它們。

但是，在您潛水之前，請花一點時間掃描佈局以獲取圖案。尋找重複的樣式，例如跨按鈕使用的相同顏色，標題中相似的字體大小，部分之間的一致間距或相同的邊框設置。這些重複值是設計變量的最佳候選人，尤其是如果您以後可能會更改它們。

1。保存設計變量

在分析了Pie Shop佈局之後，我已經確定了一些在頁面上始終出現的值，並希望用我的首選樣式更新它們。其中包括：

• 行邊框寬度
• 按鈕填充
• 標題文字
• 正文
• 身體文字顏色

現在，它們被用作靜態樣式。因此，我不會將它們轉換為設計變量，而不是手動重複相同的設置。這為我提供了一個簡單，可重複使用的框架，只需單擊幾下即可更新頁面樣式。

讓我們從行上的邊框寬度開始。要創建和保存變量，請打開變量管理器並選擇類型。對於行的邊框寬度，我將選擇數字變量。接下來，命名您的變量並為其分配一個值。單擊保存變量。

保存後，該變量就可以單擊重複使用。它將顯示可以設置邊框寬度的任何地方。我將遵循相同的過程，以獲取標題文本，字體，文本顏色和按鈕填充。這些保存的變量現在構成了我佈局設計語言的基礎。你也一樣。

這樣，如果您決定在以後調整按鈕間距或更改字體，則無需一個一個一個一個一個。只需更新變量，其餘的就會自行更新。

2。使用查找並替換將靜態樣式切換到變量

準備好我們的設計變量後，下一步是使用查找和替換替換整個佈局的靜態值。讓我們從按鈕填充開始。

目前，每個按鈕都使用手動輸入的填充：頂部和底部的6px，左右的1Px。為了帶來一致性並使更新變得更容易，我創建了兩個變量：

• button-t =頂部和底部填充的12px。
• button-l =左右填充的32px。

要應用這些，我將打開任何按鈕的設置，轉到設計>間距>填充，右鍵單擊填充值，然後從選項中選擇查找和替換。

在查找和替換面板中，我將用來自變量管理器的保存變量替換現有的靜態值。

單擊查找並替換後，整個頁面上的所有五個按鈕實例都會立即更新以使用新的填充值。

您可以按照我們之前確定的任何其他靜態樣式遵循相同的步驟。使用查找並替換與保存的變量交換每個人，最終您將獲得與全局設計系統完全連接的佈局。

3。將您的首選樣式轉換為預設（可選）

對於本文的範圍，此步驟是可選的，但這是擴展您的設計系統的有力方法。

用變量替換靜態樣式後，您可以將這些模塊保存為選項組預設。例如，將邊框寬度的保存變量分配給行之後，我將該行保存為行邊框預設。

在預設中使用變量意味著您的設計系統的任何將來的更新，例如更改變量的值，都會使用該預設在所有模塊中自動反映所有模塊。無需重新申請或手動更新任何內容。

因此，我們不僅只需單擊幾下即可使用新品牌更新整個頁面，而且還創建了一個靈活的系統，使未來更新更快，更輕鬆且完全連接。它如何在真正的佈局中起作用？是時候看到行動了。

更新您的頁面樣式比以往任何時候都容易

我們從靜態樣式轉換為設計變量的原因很簡單：它們使更新更加容易。有了設計變量，編輯佈局變得非常簡單。

如果您想更改網站上的標題字體，則無需一個一個一個一個一個。只需打開變量管理器，更新您之前保存的字體值，並且更改適用於任何變量所使用的地方。

如果您使用設計變量，您的選項組預設也將自動更新。這可以使您的樣式保持連接，因此您不必在不同的模塊或頁面上重複相同的編輯。

當我早些時候定製餡餅商店佈局時，我沒有手動調整每個按鈕或標題。我只是編輯了保存的變量。我前面定義的字體，填充和顏色自動在整個頁面上應用。佈局遵循我已經構建的系統。

當然，在一個模塊中調整填充或更改顏色並不難。但是，當您在整個網站上更新數十種樣式時，差異很大。它不僅更快，而且更清潔，更可靠，而且容易出錯。

這是切換到變量的真正價值：您的整個設計變得易於管理。當您的客戶要求下個月的品牌更改時？您將在他們喝咖啡之前就完成。

通過查找和替換使散裝簡化

您不必每次設計時都必須從頭開始。有了Divi 5的系統，更新就不像是一件瑣事，而是向前邁出的簡單一步。

此工作流不僅在設置過程中有用。這就是使未來更新更容易的原因。無論您的客戶是否要求使用新字體，還是要測試其他品牌顏色，您都可以進行一次更改，並看到它在任何地方反映。

Divi 5旨在支持真實的人設計網站。而現在，您的設計系統可以與您的想法一樣靈活。