
Divi 5 最近更新了变量系统,允许设计师将变量组合、嵌套,甚至直接用于设置项中的数学计算。这一改动让设计中的间距关系能随整体变更自动同步,还能基于共享的上下限构建流体字号,或在同一字段内混合复用文本、动态数据与自定义描述。
这项功能建立在 Divi 已有的设计变量与相对颜色机制之上,把可复用的数值变成了构建互联设计与内容的基础组件。
通过变量运算建立设计关联
数值变量现在可以参与数学运算。在支持数字的字段中插入变量后,可以用加、减、乘、除将其与其他数值结合。
以一段由“间距”变量控制 padding 的 section 为例,若想让内部图片突破边缘,可以用该变量乘以 -1 作为图片的 margin。两组设置所以绑定,调整原始间距时,负向 margin 会自动跟随。
同一思路可延伸到整个设计体系:
- 为大卡片设置两倍标准 padding;
- 将小间隙设为基准间距的一半;
- 从容器宽度中减去公共 gutter;
- 基于周围间距计算偏移量。
开发者可以选择把关联逻辑留在单个字段里,或提升为独立的可复用变量。一次性调整适合跟着元素走,高频使用的计算则应纳入网站的整体尺寸规范。
用变量构建变量
变量现在可以包含其他变量,包括数值函数中的引用与文本变量中的组合。从 builder 侧边栏打开 Variable Manager,编辑数值或文本变量时,其值字段已支持插入其他变量,避免重复填写相同内容。
用共享上下限创建流体尺寸
Divi 的高级单位早已支持 clamp() 等函数。此次更新允许在函数参数中使用可编辑的变量 chip。比如说创建“最小标题”与“最大标题”变量,再在“流体标题”变量中用 clamp() 引用两者。中间值控制标题随视口的缩放幅度,共享变量则锁定上下边界。
在需要该尺寸的地方直接应用“流体标题”。当客户要求放大最大标题时,只需修改源变量,所有依赖值会自动更新。函数仍可通过字段的单位选择器访问,其参数在变量 chip 周围保持可编辑状态。
组装可复用文本
嵌套机制同样适用于文本变量。创建“Legal Name”与“Year”变量,再嵌套进可复用的“Copyright”文本变量中,格式如“Copyright © [Year] [Legal Name]. All rights reserved.”。
在 footer 等区域复用“Copyright”变量,其组成部分在中心位置统一管理。更新“Legal Name”或“Year”时,变更会传递到父级 Copyright 变量及网站所有引用处。
变量、动态内容与自定义文字混合使用
普通文本与富文本字段现在支持将动态内容、变量与静态文字自由混搭。
博客文章信息区是一个典型场景:输入“By”,从动态内容菜单插入作者,再手动添加发布日期与评论数。用单个 Text Module 即可拼出“By Jane Smith · October 27, 2026 · 12 Comments”。每个动态源在同一字段内仍可独立编辑。
把光标放在下一项来源的位置,打开“Insert Dynamic Content”选择对应字段;也可先高亮现有文字再替换。在富文本字段中,周围的格式会保留:可以加粗作者名、斜体化日期,同时混合多个动态 chip,而非让整个字段绑定单一来源。
该机制在 Loop Builder 中同样生效,同一行文章信息可显示每篇文章的作者、日期与评论数,文本、分隔符与格式保持不变。
优化后的变量 Chip 界面
Divi 重新设计了变量 chip 的交互,让在同一字段中插入、重排、编辑多个变量更顺手。
在文本字段中轻松插入、移动与管理变量
处理多个变量时应像编辑一个连贯值。每个来源显示为独立 chip,可单独操作:
- 点击 chip 打开该实例的选项;
- 替换、移除或 detach 某个来源,保留周围内容;
- 在行内字段中拖拽 chip 调整位置;
- 选中文字替换后,继续围绕现有 chip 输入;
- 悬停 chip 查看其值或嵌套表达式。
变量选择器预览会将嵌套引用显示为可读 chip,搜索时可匹配被引用变量的名称,便于定位组合值。
用键盘快速插入变量
在支持的文本、URL 或 CSS 数值字段中输入 {{ 即可在光标处打开选择器。选定来源后,继续编辑后续内容。这一快捷方式在拼句子或向计算式中添加多个变量时效率很高。
未用过 Divi 5 的新图标管理器?
Divi 官方近期推出了 Icon Manager,支持统一管理与复用图标资源。若尚未体验过,官方已提供独立教程。
更多 Divi 5 更新在路上
Divi 团队表示,后续还将继续推送 Divi 5 的功能更新,围绕设计变量、内容混合与界面交互持续优化。
