Avada Builder 提供了豐富的模塊與布局能力。在構(gòu)建“時間軸（Timeline）”頁面時，它可以滿足基本的視覺效果，還隱藏著許多值得挖掘的功能，助力打造更加可交互、信息豐富、設(shè)計靈活的時間線展示頁面。

一、使用“條件邏輯”打造動態(tài)時間軸內(nèi)容

Avada 支持 Container Visibility（顯示條件）功能，可根據(jù)用戶身份、設(shè)備類型、登錄狀態(tài)、語言等條件控制內(nèi)容顯示。設(shè)置方法：在元素的“General”標簽頁中，啟用 Visibility → 添加顯示條件。

二、借助 Avada Scroll Animations 增強互動效果

在時間軸的每個節(jié)點中，可以給圖標、文字、進度條添加 Scroll Animation（滾動動畫），提升頁面動態(tài)感。

切換到 Extras 標簽

• 找到 Animation Type（動畫類型）

選擇動畫類型

• 下拉菜單中選擇一種動畫，例如：Fade（淡入）

動畫配合時間延遲與分層呈現(xiàn)，可以營造一種“時間線隨滾動展開”的視覺效果。

三、結(jié)合“Sticky Column”打造浮動式時間線導航

Avada 支持將某一列設(shè)置為粘性（Sticky）模式，即滾動頁面時該列內(nèi)容保持固定。

在彈出的設(shè)置窗口中，點擊頂部的 Extras 標簽

向下滾動，找到 Position Sticky 設(shè)置項

• 開啟開關(guān)（設(shè)置為“On”）
• 設(shè)置 Sticky Container Transition Offset（例如設(shè)置為 80px）

四、利用“Modal Popup”拓展時間軸節(jié)點信息

每個時間點的簡略信息可點擊觸發(fā)彈窗（Modal Popup），顯示更豐富內(nèi)容、圖片、視頻或表單。

添加 Modal 彈窗模塊

點擊 + Element

搜索并選擇模塊：Modal

示例設(shè)置名字內(nèi)容如下：

插入一個 Button，輸入鏈接http://modal2020，將按鈕觸發(fā)設(shè)置

五、自定義圖標與連接線實現(xiàn)視覺個性化

Avada 的時間軸可通過以下方式實現(xiàn)更靈活的視覺風格：

• 替換默認圖標為 SVG 圖標或品牌專屬圖標（使用 Icon Picker 或 SVG 模塊）
• 使用 Divider 模塊模擬連接線，自定義線條顏色、粗細、虛線樣式
• 通過 Flexbox Container 手動布局時間軸段落，實現(xiàn)左右交錯排布

六、配合表單、動畫、計數(shù)器等模塊提升交互深度

可拓展模塊包括：

• Counter（計數(shù)器）：展示銷售額、用戶量等動態(tài)數(shù)據(jù)
• Form Builder：用戶可提交反饋意見、報名預(yù)約等
• Lottie 動畫模塊：引入高質(zhì)量 SVG 動畫增強時間軸動效

七、Content Blocks ：打造統(tǒng)一結(jié)構(gòu)的時間軸模板

Avada 的網(wǎng)站功能可以把時間軸段落設(shè)計成模板塊，統(tǒng)一樣式、快速復用。

優(yōu)勢：

• 所有節(jié)點樣式一致，維護方便
• 不用重復拖拽模塊，只需更改內(nèi)容即可
• 可以配合條件邏輯，實現(xiàn)“區(qū)塊級動態(tài)顯示”

八、Avada Live 編輯器：實時構(gòu)建時間軸體驗

Avada 的前端可視化編輯器（Live Editor）支持實時拖拽 + 預(yù)覽，在構(gòu)建時間軸頁面時提升效率，適合調(diào)整：

• 對齊方式
• 動畫效果
• 響應(yīng)式顯示優(yōu)化（移動端預(yù)覽）

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息