如何通過查找和替換快速更改佈局包樣式

更新完整佈局包的設計聽起來很簡單，直到您意識到必須在五到六個不同頁面上更改相同的樣式。由於這些樣式被用作靜態值，即使是一個小更新，例如更改字體或調整部分填充，在逐頁完成時也會耗時。

但是，如果您只需單擊幾下即可更新所有這些重複的樣式，該怎麼辦？這正是在Divi 5中找到和替換的方法。無論您是交換字體，更換顏色還是調整間距，此功能都可以幫助您立即對整個佈局進行更改。我們將向您展示如何使用它清理和重新安裝整個佈局包。

Divi 5中的發現和替換是什麼

查找和替換是Divi 5中的功能，可讓您快速在佈局上快速更新重複的樣式值。無論是字體，顏色代碼，填充，甚至是陰影效果，您現在都可以一次更改該值並在多個元素上應用它。

那麼，這實際上是如何工作的？它從視覺構建器中的任何模塊開始。懸停在樣式字段之上，例如文本顏色或字體大小，您會看到一個三點圖標。單擊（或右鍵單擊字段），然後選擇查找和替換。

這打開了一個面板，您可以在其中定義要替換的值，應該是什麼值以及在何處應用更改。您可以將其集中在該模塊上，將其擴展到整個部分，或者在整個頁面上進行佈局。

一旦體驗了此工作流程，您將了解為什麼它是一個有用的工具。您沒有在數十個模塊中狩獵以更改相同的顏色或字體，而是進行一個有針對性的更新，並在幾秒鐘內觀看整個佈局的漣漪。但是，要真正解鎖查找和替換潛力，您需要查看它如何與設計變量一起工作，從而改變一切。

查找和替換如何有助於更快更新佈局樣式

我們將瀏覽兩個方案：首先，基本查找和替換操作，然後使用設計變量（這是一個秘密武器）執行相同的任務。

在Divi 5中使用查找並替換

該過程很簡單：從任何樣式字段觸發它，選擇要替換的內容，然後跨多個模塊應用更改。讓我們以一個真實的例子漫步。

假設您想增加所有頁面標題的字體尺寸。首先單擊視覺構建器內部的任何標題模塊。轉到設置>設計>標題文本>標題文本H1字體大小。右鍵單擊或懸停以查找查找和替換選項。

這為查找並替換了許多選項：

• （1）源元素：定義您要定位的設置，例如文本大小，顏色或填充。它是根據打開面板的位置自動選擇的。
• （2）查找值：佈局上使用的當前值。這可能是字體大小，例如30px，諸如＃000000之類的顏色代碼或任何其他設計設置。這將自動添加。
• （3）替換值：您要應用的新值。 Divi搜索匹配值並用該值代替。
• （4）在位置找到並替換：選擇應在哪裡應用更改。您可以將其限制為單個模塊，其部分或整個頁面。
• （5）在元素類型中找到並替換：確定更改應影響哪個模塊。您可以將其應用於所有模塊，也可以僅將其應用於按鈕，文本或Blurbs。
• （6）僅替換相同的字段：將其打開以更新與查找值完全匹配的字段。這有助於避免意外改變無關的元素。

例如，我們將字體尺寸從30px替換為流體夾（20px，4vw，50px）。我們選擇了整個頁面和所有元素，因為我們想更新頁面上的所有標題。

單擊查找並替換按鈕，然後注意發生了什麼。現在，所有具有30px字體尺寸的標題具有流體夾值（）值。

其他標題保持不變，因為Divi僅更新在所選範圍內與完全匹配的值。無需手動編輯，甚至不需要對無關元素進行意外更改。這種準確性使其非常適合清理佈局包中的默認樣式。

了解有關Divi的發現並替換的所有內容

在查找和替換中使用設計變量

與設計變量配對時，查找和替換變得更加強大。您可以用另一個靜態值替換靜態值，而是可以從變量管理器中保存的變量替換它。這構建了一個一致的設計系統，以後易於更新。

讓我們繼續以相同的示例，更新所有標題字體大小。但是這次，我們沒有用直接夾具值代替30px，而是將其替換為名為H3字體大小的變量。

首先，創建變量。從左側欄中打開變量管理器，然後轉到編號列。命名您的變量，分配值並保存。

這使得該變量在所有字體大小字段中可用。現在來了魔術：您可以直接在查找中使用並替換面板將保存的變量一次分配給所有標題字體尺寸。

打開查找並像以前更換面板。在替換值字段中，將懸停在輸入上，然後單擊變量管理器圖標。選擇您保存的變量，H3字體大小，然後繼續使用相同的設置。

單擊查找並更換以應用更改。現在，使用30px的所有標題現在都將引用H3字體大小變量而不是固定數字。

這是有趣的地方。以後需要調整此字體尺寸嗎？轉到變量管理器，打開H3字體大小變量，然後更改值。將夾具更新為夾具（24px，5vw，60px），並使用此變量自動更新。

無需重複查找和替換。通過一個更新，您的佈局在各處調整了變量。

查找和替換和設計變量的這種組合使更新整個佈局包如此有效，我們將在本教程中遵循此過程。您將一次定義設計變量，然後使用查找並替換以從靜態值切換到所有頁面上保存的變量。之後，更新變得毫不費力。

了解有關Divi設計變量的所有內容

準備將其付諸實踐了嗎？您需要Divi 5才能使用查找和替換和設計變量。建造者已完全重建，以提高性能和更智能的工作流程。

如何在佈局包上替換樣式

現在，您知道瞭如何找到和替換工作以及如何將其與設計變量配對，讓我們將其在真實的佈局包上進行操作。就我們的示例而言，我們將導入學習管理系統，其中包括多個頁面，例如家庭，聯繫，課程著陸和定價。

每個頁面都使用相同的字體，顏色和間距，但都用作靜態值。在下面的教程中，我們將在所有頁面上更新它們，將它們變成變量，然後將所有內容連接到中央設計系統。

1。審核佈局的設計樣式

在開始更換任何內容之前，請花幾分鐘來查看您的佈局包。打開每個頁面，然後快速列出重複的所有設計樣式，例如字體尺寸，按鈕顏色，文本間距，部分填充和邊框樣式。這是我在審查LMS佈局後發現的：

• 字體尺寸： 30px用於所有H3標題，在多個頁面上用於H2S的48px
• 字體： Poppins始終用於所有標題
• 主按鈕：背景顏色是＃4449E0，帶有白色文本
• 填充：大多數部分使用60px頂部和底部
• Blurb圖標：圖標大小設置為24px
• Blurb Borders：無邊框應用於藍圖模塊
• 部分背景：綠色＃47BE68出現在幾乎每個頁面的頁腳部分

這些都是在每個模塊內部作為靜態值手動輸入的。例如，Blurb模塊使用＃4449E0用於圖標顏色，寬度為24px。

一旦確定了類似的重複樣式，您將確切知道該轉換為設計變量。

此審核步驟為隨後的一切創造了基礎。它可以幫助您構建一種系統的方法，以保持佈局一致且可維護。

2。保存設計變量

一旦您審核了佈局並註意到重複樣式，下一步就是創建您首選值的設計變量。這使您可以將硬編碼樣式變成可重複使用的令牌，從而使您的佈局更易於以後更新。在節省了所有價值之後，我們將用我們的值替換當前的價值。

創建顏色變量

在前面的示例中，我發現Blurb圖標使用顏色＃4449E0，但我想將其切換到我的主要品牌顏色＃6C012A。為此，我將創建一個顏色變量。

從左側欄中轉到變量管理器，然後打開顏色列。

向下滾動，然後單擊+添加全局顏色選項。命名您的變量並輸入值。單擊“保存變量” ，然後完成。

創建一個數字變量

接下來，我想在Blurbs周圍添加一個2PX邊框，因此我需要一個數字變量。該過程相似，但在不同的列中。轉到編號列。單擊+添加全局號，命名您的變量，分配值並保存。

創建字體變量

我還想將所有標題字體更改為我的品牌字體Askhar。這需要一個字體變量。導航到字體列，創建新變量，分配名稱，選擇字體並保存。

完成了。現在，在整個佈局的所有標題文本字段中，該字體現在都可以選擇。

遵循相同的過程，以獲取其餘的審核發現，例如部分填充，其他標題尺寸或其他品牌顏色。佈局中的每種重複樣式可以（並且應該）成為變量。

這樣，您就不必記住十六進制代碼，字體名稱或特定值。他們生活在您的變量管理器中，並在模塊和頁面上關注您。最重要的是，您可以使用查找並替換將其應用於整個佈局，我們接下來要做。

3。使用查找並替換以應用變量

這是我們一直在等待的最有趣的部分。保存了我們的變量後，更改整個佈局的樣式非常簡單。讓我們看看如何。

改變圖標的顏色

首先，讓我們將圖標的顏色更改為我們保存的主要品牌顏色變量。導航到Blurb的設置>設計>圖像和圖標。現在，將懸停在圖標顏色選項上，然後單擊三個點。選擇查找和替換。

在查找和替換面板上，您需要做的就是懸停以找到變量管理器圖標並選擇您的變量。

就這樣，所有圖標都有新的顏色。通過將我的品牌顏色分配為靜態價值而不是保存設計變量，我也可以以另一種方式做到這一點，但我們添加了一個額外的步驟來簡化未來的更新。

如何？想像一下，您已經修改了所有佈局頁面，但想切換品牌顏色。無需對重新訪問所有頁面或通過模塊進行模塊而感到不知所措。由於您已經保存了品牌顏色設計變量，因此您只需要更改值即可更新網站。

更改所有標題字體

接下來，讓我們將所有標題字體切換到我的品牌字體。訪問任何標題的設置>設計>標題文本。懸停在標題字體上並打開查找和替換。在“替換值”列中，分配您的品牌標題字體變量。

更新所有Blurb模塊的邊框寬度

對於邊框寬度更新，我將使用我的Blurb模塊變量。該過程保持一致。導航到任何Blurb的邊框設置，打開查找並替換，選擇您的變量併申請。

在使用設計變量切換所有靜態值之後，您將佈局樣式直接鏈接到變量。這意味著，如果您想更改品牌顏色，調整標題排版或調整邊框寬度，則無需重做替換。只需更新變量，所有鏈接的元素將立即進行調整。

獎勵步驟：創建並保存預設（可選）

雖然查找和替換和設計變量為您提供了堅實的基礎，但仍有一個可選的步驟，該步驟甚至進一步建立在該系統上。預設讓您打包完整的樣式，並僅一鍵單擊任何地方。

一旦您對基本變量感到滿意，就可以將其深入一步，並創建預設以進行更精細的樣式。這對於我們剛剛完成的核心過程不是必需的，但是如果您想要最高效率，值得探索。

假設您想為所有的混合物添加陰影效果，因此您為Blurb模塊設計了完美的陰影樣式。您可以將其保存為預設，而不是每次手動複製這種樣式。

完畢。現在，此預設出現在每個模塊的預設下拉列表中。您可以立即將其應用於其他模塊；無需重做間距，邊界，陰影或任何其他設計調整。

使預設更加強大的是它們的靈活性。您可以為不同的設置組合創建預設組，以提供更好的工作流優化和顆粒狀控制。例如，您可能擁有一個預設組，用於具有不同的燈，主燈，主燈和主燈輪廓等變化的按鈕樣式，每個輪廓都包含背景，邊界和間距的不同組合。

這樣，您可以保持一致性，同時為不同的上下文提供選項。當您的佈局具有使用相同樣式的10多個模塊時，預設特別有用。而不是依靠內存或手動編輯，而是預先將所有內容標準化。

了解有關Divi的選項組預設的所有內容

應用了所有保存的設計變量後，以下是版本之前和之後的外觀：

4。將相同的過程應用於其他頁面

一旦設置了設計變量和預設，更新佈局包的其餘部分就會更快。

以課程著陸頁為例。您將在此處看到相同的靜態值，標題字體，按鈕顏色，貼合邊框，圖標顏色等。同樣，而不是手動調整每個設置，而是打開相關模塊，觸發查找和替換，然後分配匹配的設計變量。

在所有頁面上重複每個重複樣式的過程。完成後，整個佈局包將連接到變量和預設，從而使未來的編輯幾乎毫不費力。

使用Divi的查找和替換和設計變量更新的課程著陸頁

用查找並替換在幾秒鐘內進行佈局範圍的編輯

設置設計變量並學習在Divi 5中的查找和替換可能需要一些前期的時間。但是，一旦您以一個佈局包進行了操作，您將永遠不想手動單擊數十個模塊。

我們將整個佈局包從分散的靜態值轉換為連接的設計系統。我們花了幾分鐘的時間與Find＆replact花費了幾個小時，以舊的方式（按模塊）逐頁進行模塊。

這不僅僅是節省此項目的時間。您正在建立一個設計系統，該系統將使未來的Divi項目更快，更一致。