介紹Divi 5的設計變量

已發表: 2025-04-04

我很高興能為Divi 5介紹設計變量,這是一項新功能,可以顯著改善Divi的設計工作流程,並使Divi用戶與其他建築商相比

您可以為任何事物(例如顏色,字體,數字,圖像和文本)定義變量,並將其插入Divi元素和預設中。當您更新變量時,網站的設計和內容會更改。

變量與Divi新的基於預設的設計系統之間的協同作用非常棒。讓我向您展示它是如何工作的。

查看以下視頻以查看動作中的新功能。

目錄
  • 1 Divi通過可變管理進行“全局”
    • 1.1創建新變量
    • 1.2使用元素和預設中的變量
  • 2設計變量示例
    • 2.1示例一:管理全局字體
    • 2.2示例二:管理全球尺寸
    • 2.3示例三:全球化您的整個網站
  • 3今天嘗試Divi 5
  • 4偷看:嵌套行
  • 另外5個Divi 5更新正在途中

Divi具有可變管理的“全局”

多虧了Divi的全球顏色系統,您可能已經熟悉了設計變量的概念。全局顏色是一種設計變量。但是,通過此更新,我們將介紹全球所有內容!另外,由於新的變量管理器,管理全局設置比以往任何時候都容易。

創建新變量

左側欄中的變量圖標將打開您網站的變量管理器。添加一個新變量,給它一個名稱和值,然後您可以將該變量插入任何頁面上的相關設置。 Divi目前支持涵蓋Divi所有本機輸入字段的六種類型的變量:

  • 顏色:顏色對於每個網站都是必不可少的;大多數網站僅使用三到四種原色。定義顏色變量並通過網站使用它們意味著您可以在幾秒鐘內調整整個網站的調色板。
  • 字體:使用靜態字體的時代結束了。另外,您不再限於主題定制器中的全局字體設置。您可以將網站的字體定義為變量,並在一個地方管理它們。
  • 數字:您可以使用數字變量來設計網站的尺寸系統。例如,您可以在所有元素中使用標準的邊框 - 拉迪烏斯大小。將其變成變量將使您通過編輯單個變量來調整圓角的大小。其他日常用途包括定義網站的文本尺寸和線條高度,容器寬度和間距以及兩者之間的所有內容。
  • 圖像:您是否在多個頁面上使用相同的圖像?例如,您可能具有標準的背景圖像,該圖像是熟悉的品牌圖案。如果您將其變成變量,那麼將您的品牌刷新很容易。
  • 文字:變量不僅限於設計;您還可以定義文本變量。例如,如果您將公司電話號碼和地址轉換為文本變量,那麼當您的業務詳細信息更改時,您將不必去尋找所有使用這些變量的地方。
  • URL :我們也投入了URL變量,因為為什麼不呢?您可能希望在一年中的不同時間(例如在銷售期間更改)在不同頁面上的主要呼籲行動鏈接。而不是更新到處的URL,而是更新單個變量。

在元素和預設中使用變量

單擊上面設置的變量圖標以從您的網站中選擇相關變量和動態內容的列表。

Divi的變量和動態內容系統已擴展到所有字段,以前僅在內容字段中可用。這意味著您可以將變量和動態內容分配給數字字段,字體字段等。

設計變量示例

設計變量具有工具性,並將迅速成為Divi設計工作流程的核心組成部分。但是,如果該概念尚未點擊,請讓我給您一些例子。

示例一:管理全局字體

如何使用設計變量來改善工作流程?首先,讓我們考慮字體變量。

大多數網站使用兩到三個字體。您可能會花時間以各種元素和預設來設置所需的身體和標題字體。

但是,如果您想將事情切換起來怎麼辦?即使您使用預設最佳地設計了網站,回去更改字體也可能很耗時。您甚至可能都不記得所有使用特定字體的地方。

那就是字體變量進入的地方。

我使用三個字體變量在上面的視頻中構建了網站:標題字體,一個字體和高光字體。

將標題字體變量添加到我默認的blurb預設(例如我的默認blurb預設)中很容易。由於我從未使用過靜態字體值,而是插入變量,因此我的網站上的字體完全是動態的。

更改網站的標題字體就像更新標題字體變量一樣容易。

示例第二:管理全球尺寸

您可以使用文本尺寸做同樣的事情。

對於下面的視頻中的網站,我為各種標題級別和身體文本樣式定義了一系列八個文本尺寸。當我更新默認的blubb預設並分配中型標題文本大小變量時,我所有的blurb標題都從該變量繼承了值。

由於我將整個網站的文本大小都基於變量,因此我可以完全從變量管理器中管理網站的文本大小。

示例三:全球化整個網站

在上面的視頻中,您可以看到一個網站利用變量的全部功能。所有顏色都是變量,字體,文本尺寸,邊框 - 拉迪烏斯尺寸以及我的容器元素中的間距值也是如此。

不僅如此,我還將共享內容變成了變量。我的公司名稱,電話號碼和地址是內容變量。

即使是背景圖像,也是整個網站上熟悉的品牌圖案,也是我可以輕鬆更改的圖像變量。

今天嘗試Divi 5

Divi 5的設計變量今天可用,這是今年將進入Divi的許多功能之一。

您可以隨著我們的進展,通過Divi 5及以後的最終版本,每兩週更新一次。根據您的優先級,您現在可以使用Divi 5來構建新網站或等到我們添加更多功能,任何最適合您的功能。

如Divi 5的原始多相發佈時間表中所述,Divi 5公共alpha就像“ Divi 5 Lite”。它缺少一些功能,並且可能不適合現有網站,但是如果您更喜歡Divi 4的體驗,就可以在新網站上使用。

我們希望您嘗試一下,如果您喜歡它,請使用它;當每個人都喜歡它時,我們將正式進行。

偷窺:嵌套行

我們正在快速構建功能。每次我們完成新功能時,我們都會啟動一個新功能。每當我們啟動新功能時,我都會讓您偷看。

如果您錯過了它,請查看上週的功能偷窺,我在那裡展示了嵌套的行。行內的行!這是一個簡單的想法,但是為Divi 5創建更靈活的佈局系統的重要第一步。

觀看此視頻以獲取所有細節。

更多Divi 5更新正在進行

2025年是Divi 5年。乏味的工作在我們身後。我們建立了超級快速的基礎,現在是時候讓Divi捲土重來了。

感謝您的觀看,在您出發之前,我有一個忙。如果您在這裡進行Divi復出,請在此視頻中發表評論;我會閱讀所有評論。我很想看到該視頻傳達200條評論,因此請檢查評論數量,並在可以的情況下借給我們一隻手。這是餵養算法的好方法,更重要的是,我們喜歡與您聊天。

不要忘記在YouTube上關注我們並訂閱Divi新聞通訊,因此您永遠不會錯過更新。我很快就會見到您進行另一個Divi 5功能公告,我保證將在拐角處。