使用Divi 5的設計變量成為有效的網頁設計師

您是否曾經花了幾個小時來完善網站的排版，顏色和間距，只是讓客戶要求進行全面大修？無數頁面的手動編輯可以將簡單的更新變成一個繁瑣的過程。輸入Divi 5的設計變量，這是一項新功能，可以消除這些頭痛，並使Web Designers更聰明地工作。

在這篇文章中，我們將探討設計變量如何簡化您的工作流程，確保設計一致性並啟用可擴展的響應網站。我們將介紹它們的含義，工作方式以及使用它們來改變您的網頁設計過程的實用方法。

注意： Divi 5可用，非常適合新網站，但尚未推薦用於遷移現有站點。請繼續關注更新！

了解Divi 5中的設計變量

Divi 5中的設計變量為設計師提供了無與倫比的控制，一致性和效率。可通過視覺構建器中的變量管理器訪問，可讓您從一個中央集線器管理文本，顏色，字體等。無論您是設計投資組合還是電子商務平台，這些工具都使更新變得輕而易舉。

讓我們分解什麼是設計變量，可用的類型以及它們如何與Divi的預設系統合作以改變您的設計。

什麼是設計變量？

設計變量是可重複使用的，全球可編輯的設置，可讓您在一個中心位置定義關鍵設計元素（例如字體，顏色，數字，文本，圖像和鏈接）。它們是您網站外觀和感覺的控制面板。您可以一次分配一個設計變量並在各處應用，而不是在數十個元素和頁面上更新一次電話號碼或在數十個元素和頁面上調整相同的顏色。

例如，創建一個顏色變量會為您的全局調色板添加該顏色，您可以輕鬆地將其輕鬆地應用於幾個單擊的任何元素。

設計變量的類型

Divi 5支持多種可變類型，例如：

• 顏色：設置一個全局調色板，以保持一致的品牌，可以在您的網站上快速而簡單的應用程序。
• 字體：這些變量使您可以在網站上進行標準化版式。它比WordPress Customizer更強大，WordPress定制器通常將字體選項限制為標題和正文文本。使用變量，您可以為標題，字體文本，推薦，評論或您想要的自定義字體的任何其他區域分配字體。
• 數字：您可以控制間距，尺寸，邊界等。例如，您可以使用clamp（）函數為所有標題級別創建數字變量，從而確保您的文本在任何屏幕尺寸上看起來都很棒。
• 文字：簡化重複的內容，例如工作時間或地址，並在整個網站中輕鬆應用它。
• 鏈接：簡化鏈接更新，例如社交媒體鏈接，或在CTA模塊或按鈕中使用它們。
• 圖片：這使您可以一次將徽標，背景圖像，圖標或裝飾性資產上傳，並在您的網站上重複使用。

完整的設計協同作用

配對設計變量與Divi的預設系統和高級單元，以最大程度地影響。預設節省樣式組合（字體尺寸，顏色，填充）以進行重複使用，而高級單元（如Clamp（），rem或calc（）確保響應範圍縮放。它們一起以最少的精力創造了一致的自適應設計。

在設計變量中使用高級單元

大眾，rem，clamp（）和calc（）等高級單元使設計動態和設備友好。與靜態像素不同，這些單元適應屏幕尺寸或用戶設置。例如，基於夾具的字體大小可確保在手機上可讀文本並在台式機上保持平衡，從而減少了每個斷點對手動調整的需求。

高級單位的好處

高級單元可以實現流體，響應縮放，而無需重複手動編輯。例如，基於REM的填充物在各個設備之間保持成比例，從而減少了特定於斷點的調整。

設計變量如何提高網頁設計效率

設計變量通過自動化重複任務並確保具有凝聚力的專業網站來改變您的工作流程。它們節省了時間，減少錯誤，並讓您專注於創造力，而不是手動更新。這就是它們提高您的效率的方式：

集中設計管理

變量管理器通過集中控制來簡化更新。編輯顏色，字體或間距，並在您的網站上立即適用。例如，更新主字體，並自動更新包含它的每個標題或文本模塊，以節省手動編輯的時間。

設計一致性

變量可確保拋光，凝聚力的外觀。將它們分配給字體，顏色或間距，以消除不匹配的樣式。例如，數字變量可以標準化跨模塊的填充物，從而增強品牌的身份。

動態內容集成

文本和URL變量簡化了管理動態內容。一次更新業務地址或社交媒體鏈接，然後在任何地方刷新它。這些變量非常適合營銷活動或經常改變細節。

例如，您可以為您的站點地圖創建鏈接變量，每當更改鏈接時，它將自動更新到任何地方。

如何在Divi 5中實現設計變量

使用Divi 5的變量管理器，開始設計變量很簡單。啟用視覺構建器，然後選擇“變量管理器”圖標以訪問它。

要創建變量，請在數字，文本，圖像，鏈接，顏色或字體之間進行選擇。讓我們從創建一個數字變量來填充。單擊數字左側的下拉菜單。

接下來，單擊+添加全局數字以創建一個新變量。

給您的變量一個名稱（例如在網站範圍內的填充），並使用計算值（例如（25px + 1VW））輸入值。

在值字段中，添加（25px + 1VW） 。讓我們分解這個公式的作用。 25px是固定長度的單元。無論屏幕尺寸或視口如何，該值的這一部分始終為25像素。然後，該公式增加了視口寬度的1％。視口是用戶瀏覽器窗口的可見區域。因此，如果瀏覽器窗口寬1200px，則1VW等於12像素。該單元允許隨著屏幕尺寸的值尺度的響應能力。

單擊“保存變量”按鈕保存。

最後，單擊“應用更改”以使整個網站上的變量可用。

將變量應用於元素

一旦創建了變量，在整個網站中應用它們就很容易。讓我們使用在主頁上的3行列中使用的填充變量。首先將第一列在行中提供灰色背景。

接下來，導航到“設計”選項卡並在間距設置下找到填充字段。

懸停在填充字段上以揭示動態內容圖標。

出現對話框時，選擇範圍範圍的填充物將Calc（）公式應用於列。

要將公式應用於各個側面，請重複柱填充的頂部，底部，左側和右側的步驟。添加所有四個側面時，字段應與下圖相似。

將設計變量與預設相結合

關於設計變量的最好的事情之一是，您可以將它們與預設結合起來，以使D​​ivi更有效地設計網站。使用上面的示例，我們將創建一個結合灰色背景的列預設，用於填充的calc（）公式和10px邊框半徑。然後，我們可以將該預設應用於本節中的所有列。

在列的設置仍處於活動狀態後，單擊默認的預設按鈕為我們的樣式列創建一個新的預設。

使用“預設”對話框活動框，單擊當前樣式按鈕的新預設。

給您的預設一個名稱，然後單擊“保存預設”按鈕以保存它。

從那裡，您可以在幾秒鐘內將預設應用於其餘列，從而快速，輕鬆地實現設計一致性。

最大化效率的最佳實踐

Divi 5的設計變量使您可以簡化工作流程並提高生產率。通過採用戰略性的計劃，測試和組織變量，您可以創建一致，響應和高效的設計，同時最大程度地減少乏味的編輯。

1。提早計劃您的設計系統

為了最大程度地提高效率，請在潛入構建之前定義您的設計系統。預先建立顏色，字體和間距值，以創建一個凝聚力的基礎，並最大程度地減少在道路上過多的重新使用。例如，在構建網站之前，開始定義主要，次要和重音顏色的調色板。這種主動的方法從一開始就確保了一致性，並使應用設計變量變得容易。

2。與其他Divi 5功能結合

預設可讓您保存樣式組合，以重複使用並將設計變量與Divi的生態系統配對。例如，您可以為填充，字體尺寸和顏色設置設計變量，將它們應用於盤問，並創建一個預設以快速樣式的額外藍色。

如果以後更改變量，則使用該變量的每個按鈕都會自動更新。

3。在所有設備上進行測試

您可以通過在多個設備上進行測試來確保變量可完美地工作。在啟動之前，可以在移動，平板電腦和台式機上進行高級單位，例如clamp（）或rem，在移動，平板電腦和台式機上行為。例如，在多個屏幕上檢查夾具（） - 基於字體的大小，以確認其從一個屏幕大小到下一個屏幕大小的調整順利進行。早期測試可確保響應式，用戶友好的設計，並有助於避免最後一刻的修復。

4。保持變量有組織

清晰的組織是有效管理變量的關鍵。使用描述性，直觀的名稱使更新和協作更加容易，尤其是在復雜的項目上。保持它們的井井有條可幫助您以後快速進行更改，從而避免確定使用變量的麻煩。

使用Divi 5中的設計變量增強工作流程

Divi 5的設計變量可以改變您的設計方式，讓您更快地工作，保持一致性並輕鬆構建響應迅速的網站。從集中式更新到具有高級單元的動態縮放，它們消除了重複編輯的需求並提高您的創造力。無論是構建一頁還是大型公司網站，設計變量都可以使您的工作流程變得順利，設計敏銳。

Divi 5已準備好在新網站上使用，但我們不建議將現有網站轉換為Divi 5。觀看我們的博客以獲取更多更新和Divi 5的功能發行版。