使用Divi 5更新頁面設計的最快方法

Divi 5引入了一些智能新工具，可幫助您更快地工作和更自由地設計。但是，觸手可及的功率如此之多，很容易感覺不確定從哪裡開始，尤其是在更新現有佈局時。

您可能已經知道如何調整間距，調整顏色和清理佈局，因此這篇文章與重新學習基礎有關。這是關於使用Divi 5進行更快的速度。在下面的步驟中，我們瀏覽您可以在任何現有頁面上遵循的實用更新工作流程。而且，如果最近的變化感到壓倒性，請從這裡開始。您會清楚和自信。

使用Divi 5更新頁面設計的8個步驟

對於本教程，我們正在使用Divi Layout Pack庫中的業務簡歷著陸頁。

訂閱我們的YouTube頻道

我們將使用Divi 5的新工具（例如查找和替換，設計變量並擴展屬性）來更新頁面，以加快工作流程並減少重複性編輯。讓我們開始。

1。優化儀表板以進行無干擾編輯

當您更新佈局時，即使是輕微的中斷也可能會破壞您的注意力。您可能會在各個部分之間跳躍，反复打開設置，並失去您關閉位置的踪跡。這類延遲迅速加起來，尤其是在更長或更複雜的頁面上。

Divi 5可以通過更靈活的編輯環境來減少這種摩擦。您可以停靠面板以保持關鍵設置可見，在選項卡中打開多個模塊，並使用圖層面板在不無盡滾動的情況下導航佈局。您可以在移動時保持所有內容和訪問所有內容，而不是單擊模塊。

這些圖層面板為您提供了有關佈局的完整結構概述，因此您只需單擊即可立即跳到任何部分，行或模塊。它對於不滾動而跳過大頁面特別有用。

早些時候，工作流程通常意味著打開一個模塊，保存它，再次滾動，打開下一個模塊並重複該週期。 Divi 5跳過所有這些。您可以背對背打開幾個模塊；每個在編輯面板中都可以看到作為標籤。這使得在不反復關閉和重新打開元素設置的情況下更輕鬆地比較元素之間的設置或切換。

可能需要一些調整才能習慣新的工作流程。由於面板的行為不同，因此在模塊之間切換不會立即感覺到第二天性。但是，給它一些練習，這些小的變化開始加起來。

當您按照下面的步驟操作時，嘗試使用不同的面板工作，將幾個停靠，將夫婦堆放在標籤中，或保持圖層面板打開。您會開始感覺什麼最適合您的流程。

2。首先設置您的全局設計變量

當您管理完整的佈局時，您想要的最後一件事就是重複自己。但這正是每個模塊內手動設置每個樣式時會發生的情況。它起初可能起作用，但是隨著時間的流逝，您的頁面變成了斷開選擇的拼布。最終，總是會錯過一些東西。

設計變量可幫助您避免這種情況。它們為您提供了定義設計語言的中心地點。您定義了字體，顏色，間距，圖像，URL或鏈接的可重複使用值。應用後，這些值將保持與使用它們的每個模塊的鏈接。

這是一個簡單的例子。假設您希望所有標題都使用LATO字體。您沒有在每個模塊中選擇LATO，而是創建一個字體變量。給它一個名稱，選擇LATO，然後保存。與該變量聯繫的任何標題現在都將保持同步。

如果您想稍後切換到其他字體，只需更新變量即可。每個連接的模塊將自動反映更改。

這只是一個用例。您還可以設置變量，以進行一致的截面填充，按鈕樣式，背景顏色或您重複使用的其他任何內容。如果感覺太壓倒性的話，您無需立即定義所有內容。從您知道的樣式開始，然後從那裡擴展設計系統。

3。用設計變量替換靜態值

有時佈局具有硬編碼樣式，因此手動更新它們會使過程不一致。這就是為什麼我們用剛定義的全局變量替換靜態值的原因。

您無需單獨尋找它們。 Divi的查找和替換工具可以輕鬆地單擊幾下將變量交換為變量。假設您的標題都使用手動選擇的字體。打開任何標題模塊，單擊字體字段，然後選擇查找和替換。

在替換值面板中，將懸停在字段上並打開變量管理器。選擇您的所有標題字體變量並確認更改。

您會立即看到魔術：該字體的每個實例都會立即替換。這種相同的方法適用於顏色，間距，按鈕樣式以及您為變量設置的任何東西。

而且您不必一次更改所有內容。啟動小，選擇樣式，您將重複使用最多，例如部分填充或按鈕背景，然後首先切換。隨著您的使用，您的佈局從手動編輯的拼布轉移到了完全連接的系統。當該系統到位時，默認情況下，每個將來的變化都會變得更加容易，更快且更加一致。

4。使用擴展屬性在幾秒鐘內應用更新

一旦您的全局值到位，下一步就是完善。您經常會發現自己對各個部分進行了小調整，並希望您可以將這些更改帶到其餘的佈局，而無需重做工作。擴展屬性可能。

它使您可以立即從一個元素中復製樣式，內容或預設，並將其應用於其他元素。即使模塊不同類型，它也起作用。例如，如果您為一個圖像設計了自定義邊框和陰影，則可以將其用作本節中每個圖像的參考。

右鍵單擊樣式圖像，然後選擇“擴展屬性”。

當擴展面板打開時，將其停靠在側面，因為您可能會返回它。在下拉列表中，將範圍設置為父部分，將元素類型設置為圖像，然後確認。

該操作將您的更新應用於該部分的每個圖像，而無需單獨觸摸它們。

這就是擴展屬性真正贏得其位置的地方。它需要一系列手動，重複的編輯，並將其變成一個一致的舉動。您可以將其用於具有多個類似列或模塊的部分，例如圖像庫或Blurbs。這是將拋光劑帶入設計的最快方法，而無需在每個模塊上燃燒時間。

5。將可重複使用的編輯保存為選項組預設

當您完善佈局時，您可能會調整間距，邊框或背景顏色，以使事情變得正確。與其每次重複這些調整，不如將其保存為選項組預設。

假設您已經定制了列的間距，邊框和背景。您喜歡它的外觀，並希望在其他地方重複使用它。打開該列的設置，滾動到您修改的樣式組（例如間距或邊框），然後單擊預設圖標以保存它。

要將預設應用於其他列，請右鍵單擊原件，然後選擇“擴展屬性”>“擴展列預設” 。在面板中，將範圍設置為父行，選擇列作為元素類型，然後命中擴展屬性。

現在，一個預設適用於該行中的每一列。它對於具有重複元素（例如定價表，混亂，推薦書）或您想要無需手動努力的任何地方等任何地方的佈局特別有用。而且，由於預設保存到佈局包中，因此您也可以將它們在其他頁面上使用。

6。使用複制/粘貼進行快速一次性更改

一旦將樣式擴展到完整的部分或行，您可能仍然需要進行小規模的針對性調整。也許只有一列或模塊需要略有不同的外觀。而不是再次擴展預設，而是使用屬性管理功能。

例如，如果您已經自定義了列的邊框和陰影，並且只需一個或兩個匹配的另一個或兩個匹配，請右鍵單擊“樣式”列，然後選擇複製項目樣式。然後，右鍵單擊您要更新的列並選擇粘貼項目樣式。

這不會覆蓋其他設置並立即工作，這是您想要保持靈活性的情況的理想選擇。您可以從幾乎任何元素中復制和粘貼樣式，並確切確定要復制的內容，無論是間距，顏色，邊界還是其他設計調整。

擴展屬性處理批量編輯，然後復制/粘貼處理細節。它非常適合微調一個佈局，但仍需要一些個人風格。

7.在自定義斷點之間切換以完善響應視圖

確保您的桌面佈局在每個屏幕尺寸上看起來都很好。 Divi 5的可自定義斷點可以通過單擊單擊平板電腦，電話，甚至自定義的屏幕寬度之間的切換，從而簡化此功能。設備圖標就在構建器內部，因此您可以快速預覽部分在較小的屏幕上的行為。

如果需要，您還可以定義自己的斷點以獲得更多控制。

這是檢查間距，字體尺寸和圖像對齊的最佳時機。這只需要幾分鐘，但以後可以使您擺脫更大的佈局問題，尤其是在內容繁重或以轉換為中心的頁面上。而且您無需更改工作流程。 Divi工具在響應式視圖中同樣順利進行，因此進行調整，預覽佈局並繼續前進。

8。更新您的設計變量以立即刷新整個佈局

之前，我們設置了您的全局設計變量，並使用查找和替換替換靜態值。現在，您的佈局已完全連接到集中設計系統。

設計變量使網站範圍的更新非常容易。假設您的品牌更新其版式或主要顏色。您只需更新保存的變量，而不是挖掘每個模塊以重複進行相同的更改。一個更改在您的整個佈局中立即適用。

要看到這一點，請查看此並排比較。佈局結構保持不變，但是其背後的過程變得更加簡單，更快。

現在考慮一下這是如何擴展的。想像一下您的整個網站，每個頁面和部分，建立在同一系統上。您將不再為每次更改追溯步驟。對變量進行調整會更新所有內容。您是通過通過變量管理器管理價值來管理整個品牌的。

這種靈活性正是Divi 5的設計。這不僅是關於更快的編輯，而且還涉及減少重複，提高準確性並以更少的精力為您提供更多控制權。

自定義您的Divi 5工作流程

到目前為止，您已經看到了設計變量，擴展屬性和選項組預設之類的工具如何重塑您如何更新佈局。但是沒有一種使用它們的方法。

本演練只是該過程的一個版本。您可以按照不同的順序遵循步驟，跳過一些，或將它們融入自己的例行程序中。這完全可以，因為目標不是遵循公式，而是要找到一種自然而然的節奏並適合您喜歡工作的方式。

實驗一點。您使用這些工具的越多，就越開始認識到最適合您的流程的方法。如果情況感覺更順暢，您的更新速度更快，並且您的設計保持一致，那是您正常工作的跡象。

而且，如果您想知道這些工具是否可以隨著工作流程的發展而跟上，它們絕對可以是因為…

Divi 5旨在適應您的工作方式

這就是我們涵蓋的每個功能背後的想法。無論您是想預先定義每種樣式還是在構建時進行更改，工具都適合您喜歡的工作方式。

您可以快速移動或花點時間。從空白頁開始或完善現有佈局。構建器不會迫使您進入僵化的工作流程。它旨在減少忙碌，跳過重複的編輯，並幫助您專注於實際重要的事情：以清晰，速度和自信心進行設計。

最終，這是關於建立一個感覺像您自己的過程，並且隨著項目和想法的增長而跟上您。您準備好構建與您一起改進的設計工作流程嗎？