如何自定义 Avada 时间轴颜色样式

时间轴模块适用于展示品牌历程、项目进展、活动时间表等。Avada 主题是多功能 WordPress 主题之一，内置了功能强大且灵活的时间轴元素，可以以图文并茂的形式展现事件内容，还可以自定义配色与样式，打造与品牌视觉一致的界面体验。

想让时间轴更吸睛？立即尝试 Avada 双列布局，提升页面视觉冲击力！

一、为什么要自定义时间轴颜色？

1.1 匹配品牌形象

统一的视觉语言有助于提升品牌识别度。默认的时间轴样式虽美观，但与品牌配色不一致会降低整体专业感。通过自定义颜色，可以让时间轴融入整体网页风格。

1.2 提高可读性和视觉分层

合适的配色可以突出重点时间节点，提升信息分层感。例如，用不同颜色标记能帮助访客快速理解内容。

1.3 丰富页面表现力

通过颜色变化可以营造不同的情绪氛围，如科技风可选冷色系，让页面更具互动性和吸引力。

二、Avada 时间轴模块支持自定义哪些颜色？

2.1 时间轴主线颜色（Container Line Color）

控制连接所有时间节点的垂直线颜色，建议与品牌主色一致。

2.2 节点图标背景颜色（Icon Background Color）

每个时间点图标的背景色可以单独设定，适用于分类标识。

2.3 文字颜色

内容区域的字体颜色也可自定义，保证文字在不同背景下的可读性。

三、如何修改 Avada 时间轴的颜色样式？

3.1 使用模块内置的颜色设置（可视化编辑）

进入页面编辑器（Live Builder）；
点击时间轴模块的“铅笔图标”进入设置界面；

20250625160639243-image
20250625162727349-image

展开样式设置选项，显示以下字段：

Icon Color
Icon Background Color
Icon Background Border Color

3.2 使用全局样式控制一致性

如果网站有多个时间轴模块，想要统一样式，可进入 Avada 的全局设置：

选择 Select Elements → Studio 插入对应的主题风格；
设置默认配色、边框样式、图标颜色等；
这些设置将应用于所有时间轴模块，保持全站视觉统一。

3.3 使用自定义 CSS 精细控制样式

对于有更高个性化需求的用户，可以使用 CSS 对时间轴的样式进行扩展或覆盖。

/* 修改时间轴主线颜色 */
.fusion-timeline-line {
  background-color: #0f8fac;
}

/* 设置时间节点图标颜色 */
.fusion-timeline-icon {
  background-color: #f5a623;
  color: #ffffff;
}

/* 内容框背景与文字 */
.fusion-timeline-content {
  background-color: #ffffff;
  color: #333;
  border-left: 3px solid #f5a623;
}