介绍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功能公告,我保证将在拐角处。