用 Avada 打造互动时间轴页面,这些隐藏功能你用对了吗?

Avada Builder 提供了丰富的模块与布局能力。在构建“时间轴(Timeline)”页面时,它可以满足基本的视觉效果,还隐藏着许多值得挖掘的功能,助力打造更加可交互、信息丰富、设计灵活的时间线展示页面。

20250623144941260-image

一、使用“条件逻辑”打造动态时间轴内容

Avada 支持 Container Visibility(显示条件)功能,可根据用户身份、设备类型、登录状态、语言等条件控制内容显示。设置方法:在元素的“General”标签页中,启用 Visibility → 添加显示条件。

20250623113631629-image

二、借助 Avada Scroll Animations 增强互动效果

在时间轴的每个节点中,可以给图标、文字、进度条添加 Scroll Animation(滚动动画),提升页面动态感。

切换到 Extras 标签

  • 找到 Animation Type(动画类型)

选择动画类型

  • 下拉菜单中选择一种动画,例如:Fade(淡入)

动画配合时间延迟与分层呈现,可以营造一种“时间线随滚动展开”的视觉效果。

20250623114144691-image

三、结合“Sticky Column”打造浮动式时间线导航

Avada 支持将某一列设置为粘性(Sticky)模式,即滚动页面时该列内容保持固定。

在弹出的设置窗口中,点击顶部的 Extras 标签

向下滚动,找到 Position Sticky 设置项

  • 开启开关(设置为“On”)
  • 设置 Sticky Container Transition Offset(例如设置为 80px
20250623135604496-image

四、利用“Modal Popup”拓展时间轴节点信息

每个时间点的简略信息可点击触发弹窗(Modal Popup),显示更丰富内容、图片、视频或表单。

添加 Modal 弹窗模块

点击 + Element

搜索并选择模块:Modal

20250623140328203-image

示例设置名字内容如下:

20250623143757660-image

插入一个 Button,输入链接http://modal2020,将按钮触发设置

20250623144242317-image

五、自定义图标与连接线实现视觉个性化

Avada 的时间轴可通过以下方式实现更灵活的视觉风格:

  • 替换默认图标为 SVG 图标或品牌专属图标(使用 Icon Picker 或 SVG 模块)
  • 使用 Divider 模块模拟连接线,自定义线条颜色、粗细、虚线样式
  • 通过 Flexbox Container 手动布局时间轴段落,实现左右交错排布

六、配合表单、动画、计数器等模块提升交互深度

可拓展模块包括:

  • Counter(计数器):展示销售额、用户量等动态数据
  • Form Builder:用户可提交反馈意见、报名预约等
  • Lottie 动画模块:引入高质量 SVG 动画增强时间轴动效

七、Content Blocks :打造统一结构的时间轴模板

20250623144806409-image

Avada 的网站功能可以把时间轴段落设计成模板块,统一样式、快速复用。

优势:

  • 所有节点样式一致,维护方便
  • 不用重复拖拽模块,只需更改内容即可
  • 可以配合条件逻辑,实现“区块级动态显示”

八、Avada Live 编辑器:实时构建时间轴体验

Avada 的前端可视化编辑器(Live Editor)支持实时拖拽 + 预览,在构建时间轴页面时提升效率,适合调整:

  • 对齐方式
  • 动画效果
  • 响应式显示优化(移动端预览)


了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读