使用Divi 5建立設計框架

如果您曾經與Bootstrap這樣的CSS框架合作，那麼您會明白為什麼它如此受歡迎。設計框架為您提供了可重複使用的基礎來設計快速，一致的佈局，因此每次設計頁面時都不會從頭開始構建。

儘管大多數框架都依賴於預先編寫的類，但他們仍然希望您編寫自定義定制的自定義CSS，這對非編碼者來說很棘手。這就是Divi 5的不同之處。

它採用視覺優先的方法，用設計變量，選項組預設和元素預設等工具代替CSS。您將獲得框架的所有力量，而無需編寫一行CSS。在這篇文章中，我們將向您展示如何使用Divi 5在視覺上構建無代碼設計框架。

Divi 5已準備好在新網站上使用，但我們不建議遷移現有網站。

Divi 5如何允許您構建一個無代碼設計框架

Divi 5從頭開始重建，以使所有人都可以訪問高級網絡設計。無論您的編碼水平如何，它都可以在視覺上構建現代的自定義佈局。建立設計框架沒有什麼不同。

訂閱我們的YouTube頻道

設計變量讓您定義全局設計值

設計變量可讓您定義可重複的值，例如品牌的顏色，字體，間距等。保存後，您可以在整個網站中重複使用這些值，以使其具有一致的品牌視覺外觀。

在Visual Builder內部，以有組織的方式找到變量管理器以定義和存儲不同的變量類型（數字，文本，圖像，鏈接，顏色和字體）。

設計變量就像CSS自定義屬性的無代碼版本，但具有更大的靈活性。例如，您通常會聲明CSS變量，例如：root { - primary-color：＃1a73e8; } ，但是使用Divi的設計變量，您只需將顏色保存為主要顏色即可。

在進行更新時，您會看到他們的真正力量。無需瀏覽您的樣式表；只需在變量管理器中修改一次保存的變量值即可更新整個網站的每個實例。他們讓您在不遵守幾種樣式規則的情況下快速可視化您的想法。

另外，您可以將常見重複的內容元素定義為內容變量，例如地址，電子郵件，鏈接，背景圖案等。您不必多次手動插入它們；一鍵，這些元素出現在您的頁面上。例如，保存並使用公司地址作為文本變量。

要應用設計變量，請懸停選項並查找動態內容圖標。

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

使用選項組預設保存常見的樣式組合

選項組預設可讓您保存和重複使用經常使用的設計設置，例如間距，邊框，陰影，文本樣式和背景，而無需每次重建它們。他們專注於模塊中的一組選項組，因此您可以將該部分設置為樣式，然後單擊任何地方將其應用於任何地方。

例如，假設您始終在所有推薦部分上使用相同的40px填充和10px邊距。將這些設置保存為間距預設。添加新的推薦模塊時，選擇預設，然後完成。

使選項組預設功能強大的原因是，您可以將它們與設計變量混合在一起。如果您的主要顏色被保存為變量，則可以在背景預設中使用它，因此，如果品牌顏色會更改，則整個預設更新。您所有頁面上所有頁面的背景都會單擊更改。

選項組預設不會覆蓋整個模塊，而僅適用於您選擇的樣式組。但是，您始終可以使用特定於模塊的設置覆蓋預設以自定義特定的模塊。這使您可以保持佈局和內容的獨特性，同時仍確保網站上的視覺樣式一致。

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

用元素預設保存完全設計的元素

如果您曾經是Divi用戶，那麼您已經熟悉元素預設。它們可讓您保存模塊的所有自定義樣式，包括文本，間距，顏色，圖標，懸停效果，作為元素預設，因此您可以在任何地方重複使用它而無需從頭開始構建。您基本上是創建最使用的模塊的即時版本。

這是一個快速的用例：自定義並保存一個平面預設，然後將其應用於其他未風格的Blurbs以快速樣式。

這些工具如何在前端html中反映

Divi 5看起來像是一個無代碼工具，但實際上是在後台編寫乾淨的結構化代碼。當您在視覺上調整設置時，例如選擇間距預設或從變量管理器中應用品牌顏色，而不僅僅是造型模塊。您還在編寫代碼。

您做出的每個設計決策都會轉化為適當的前端輸出。當您專注於設計時，Divi會處理編碼部分。

為了向您展示這有多強大，我們將使用傳統的CSS框架（如Bootstrap）將Divi 5中的視覺優先工作流進行比較。

第一個引導程序：

在Bootstrap中用代碼手動構建設計系統

在我們的示例中，我使用了已安裝的底面主題的WordPress設置。

在典型的基於代碼的工作流程中，您將首先將您的全局設計值定義為CSS變量。這是我們的：

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

假設我們正在建立一個簡單的聯繫頁面佈局，並使用觸點表格和一個自定義風格的按鈕。為了保持所有內容一致和可重複使用，我們將使用Bootstrap的實用程序類和我們自己的CSS變量的混合。

首先，我們使用Bootstrap的內置表單類添加自定義代碼，以處理佈局和輸入樣​​式。

然後，我們為樣式按鈕添加代碼。在這裡，我們將Bootstrap實用程序類與我們的自定義CSS變量相結合，用於背景，邊界半徑和陰影。這使我們可以完全控制外觀和感覺。如果我們想進行更改，我們可以更新我們的變量。

如您所見，這是很棒而高效的，但是一切都是手動構建的。我們定義了變量，應用了類，並獨自編寫了整個代碼。這是一個簡單的佈局，想像使用這種方法構建複雜頁面！

現在，讓我們使用Divi 5構建同一頁面而無需編碼。

用Divi 5在視覺上重新創建同一頁面

我們首先定義成為網站範圍設計系統一部分的全球設計變量。首先，您轉到變量管理器>顏色。然後，為主顏色（＃E91E63）編寫十六進制代碼並保存。

同樣，您還可以為邊界半徑{6px}和間距保存數字變量。接下來，我添加聯繫表單模塊，然後將提交按鈕自定義為我的首選樣式：

現在，我將這些按鈕設置保存為按鈕預設，供以後使用。

如果我添加另一個按鈕並選擇按鈕預設，請查看會發生什麼？它會自動進行樣式。

要應用選項組預設，請懸停在設置上並查找設置圖標。

另外，您是否注意到我們如何一次單擊將多個自定義樣式應用於按鈕而不觸摸一行代碼？這就是我們說您在視覺上保存設計偏好時的意思。這是為了構建的工作流程Divi 5。它是快速，一致且完全視覺的。

幕後發生的事情是神奇的。 Divi不僅盲目地堆疊樣式。您應用的每個設計變量，預設和設置都均構成在前端呈現的干淨，高效的代碼中。

上述分區設計的頁面的頁面源顯示，就像CSS變量一樣，主要顏色保存在根部分中：

在前端，您的選項組預設將自動保存並輸出為針對適當類的清潔CSS （.ET_PB_BUTTON，.ET_PB_CONTACT_SUBMIT）。

這兩個頁面看起來都一樣，但是它們的構建和維護方式是完全不同的。

在Bootstrap中，我們從其公用事業類中受益，但仍然必須編寫代碼。但是使用Divi 5，我們僅通過使用其功能強大的功能（例如設計變量和選項組預設）就達到了相同的結果而沒有觸摸代碼線。

每次更改都單擊幾下，沒有矛盾的風險，但前端代碼仍然保持清潔。 Divi以結構化的可重複使用格式存儲您的樣式，而不會添加不必要的標記或內聯樣式。

如何使用Divi 5構建設計框架

Divi 5為您提供了構建可擴展設計系統的所有工具，但是就像在傳統開發中一樣，您使用這些工具的順序很重要。讓我們瀏覽步驟，更重要的是，了解原因：

1。定義您的全局設計變量

在設計頁面之前，請先定義全局設計變量。這些是您整個網站將依靠的核心價值，例如您的顏色，字體，尺寸，間距單元等。一旦定義了網站的構建塊，您就可以在任何地方重複使用它們，以保持所有內容一致，清潔和易於管理。

在Divi 5中，您有變量管理器來創建和組織它們。

這是突出顯示的變量類型的作用：

• 顏色：保存品牌的主要，次要和重音顏色，因此您不必鍵入十六進制代碼或匹配陰影。保存您的顏色變量，然後單擊一次。
• 字體：定義用於標題，正文或證明的確切字體。每次創建H2時，就不會重新選擇Poppins大膽，而是將其保存為字體變量。您將能夠輕鬆地在模塊上重複使用相同的樣式。
• 數字：存儲您的首選設計值，例如卡片的8px邊框半徑或圖像模塊的32px填充，作為數字變量。您還可以在數字變量內使用高級單元來進行動態設計。

設置了核心變量後，您構建的每個預設和頁面都將依賴於它們。而且，如果您的設計方向以後更改（例如，您想調整基本間距） ，則只需要在一個地方更新變量即可。

正確定義設計變量後，無需狩獵和修改每個實例。只需在變量管理器本身中更改一個值即可。

2。保存全球經常性內容

使用變量管理器，您還可以保存內容值，例如鍊接，文本和圖像，這些鏈接，文本和圖像經常在您的網站上重複。通常，您每次都會復制並粘貼這些值，但是Divi 5可以使它們定義一次並在任何地方重複使用它們。

這對於保存社交媒體鏈接，公司的聯繫方式以及其他需要手動添加的重複內容特別有用。

您可以通過其餘三個變量保存內容：

• 文字：假設您的公司地址出現在頁腳，聯繫人頁面和主頁的英雄部分中。將其另存為文本變量，然後在您希望地址出現的任何地方選擇它。
• 鏈接：將URL保存到您的關於頁面，產品集，社交資料或條款和條件作為鏈接變量的條款和條件。
• 圖像：如果您在多個頁面上使用品牌徽標或背景圖像，請將其作為圖像變量。想像一下，點擊跨模板上替換佔位符圖像！

Divi 5可讓您將文本，鏈接和圖像視為可重複使用的構件。這些內容變量可能會感覺很小，但會極大地影響速度，準確性和長期維護。您可以節省時間，減少錯誤，並保持網站持續更新。

3。創建並保存核心樣式，並使用選項組預設

設計變量到位後，您的下一步就是使用選項組預設來定義網站的核心樣式模式。將常用的設計設置保存為預設，並在任何模塊上重複使用它們。

這是充分利用選項組預設的方法：

1。保存預設

首先為您最常使用的設置保存預設，例如邊框半徑，背景顏色或間距。假設我始終使用40px頂部填充物和10px底部邊距進行推薦，因此我將這些值作為間距預設保存。

我可以立即將該間隔應用於我的推薦（如果需要的話，以及其他模塊） 。對於您始終如一地重複使用的每個設置組，請執行此操作：邊框，框陰影，按鈕背景等，以便在構建頁面時可以重複使用它們。

2。將設計變量與預設相結合

接下來，通過將設計變量與選項組預設相結合來增強框架。假設您將6px邊框半徑作為數字變量保存，並在創建選項組預設時使用它。如果以後更改變量，則您的預設還將自動在整個站點上進行更新。

同樣，您可以使用夾具（）值來創建流體版式以進行響應式文本。將其保存在H1預設中，並始終將其應用於整個佈局的標題。這種預設和變量的組合是您的視覺框架真正開始變成模塊化，可擴展且易於維護的地方。

您還可以將選項組預設保存為默認設備，這意味著樣式也將自動應用於新模塊。在公共預設中應用默認值，這樣您甚至不必每次選擇預設。

4。創建元素預設

元素預設完成您的設計框架。保存首選樣式作為預設後，您還應該將模塊樣式作為元素預設保存。

這對於您經常使用的模塊特別有用，例如CTA，推薦，Blurb和接觸表格。例如，如果您使用品牌顏色，柔和的陰影和特定的填充設計了一個CTA按鈕，則可以將整個設計保存為稱為主燈的預設。稍後，一鍵即時將其應用於任何新按鈕。

將元素預設設置為默認

您還可以將任何元素預設為默認設置，因此該類型的每個新模塊都會自動遵循保存的設計樣式。保存上面的主燈按鈕預設為默認情況，您會看到新按鈕繼承其樣式：

默認會加快您的工作流程，並且您仍然可以在需要時覆蓋它們。但是在大多數情況下，具有明確定義的預設會減少重複的工作並消除設計猜測。將這三個功能組合在一起，您將遵循一個基於預設的設計框架，該框架使網站構建完全無編碼。

根據您的設計框架設計新頁面

現在，我保存了所有喜歡的設計變量，選項組預設和元素預設，讓我們測試我們的框架。

構建新頁面已成為更快，更輕鬆的體驗。我不需要從頭開始或手動重新啟動每個模塊。我需要的一切都已經設置了。

如您所見，我僅在幾下單擊了多個設計更改。是的，我導入了預製的Divi佈局，但是我將其保存的框架安裝到了幾秒鐘。

與其選擇字體，調整間距或手動調整顏色，我只是應用了保存的預設。按鈕設計，文本尺寸，背景樣式和圖像邊界都遵循了我之前構建的框架設置。

手動將這些樣式應用於一個模塊可能沒什麼大不了的。但是，當您自定義整個頁面時，差異很明顯。您可以注意到我進行了所有這些更改的便捷性和速度。這是創建設計框架的真正好處：它可以加快您的工作流程而不犧牲質量或一致性。

最好的部分是進行更新。如果我的全局價值觀發生了變化，我只需要通過變量管理器修改保存的設計變量即可。我還可以通過單擊小型設置圖標來修改我的選項組和元素預設。

這是Power Divi 5帶給您的。它使您可以創建，保存和自定義整個設計框架，而無需觸摸一行代碼。

視覺構建無代碼設計框架

創建設計框架不再僅適用於開發人員。使用正確的工具，即使您以前從未觸摸過代碼，任何人都可以做到。正如您在這篇文章中所看到的那樣，創建自己的設計系統的幾個明智的步驟。如何？通過使用Divi 5。

Divi 5為您提供了使它實現的工具

Divi 5可以處理複雜性，並通過其高級功能為您提供完全控制。您可以更快地構建，保持一致並進行全局更新，而不會離開視覺構建器。酷，對吧？但這只是冰山一角，我們才剛剛開始！

我們有更多令人驚嘆的功能排隊以供發布，我們等不及您嘗試它們。立即下載公共Alpha，並在不進行編碼限制的情況下構建自己的設計框架。

Divi 5已準備好在新網站上使用，但我們不建議遷移現有網站。