在網(wǎng)站設(shè)計(jì)中Avada時(shí)間軸是展示事件順序和發(fā)展過(guò)程的理想方式。而在某些場(chǎng)景中，比如展示兩個(gè)項(xiàng)目的并行進(jìn)展、對(duì)比兩個(gè)部門(mén)的工作節(jié)點(diǎn)、或標(biāo)記多類(lèi)別任務(wù)的推進(jìn)狀態(tài)，單列時(shí)間軸就顯得有局限。此時(shí)，“雙列時(shí)間軸”的設(shè)計(jì)可以大幅提升頁(yè)面的可讀性和表達(dá)能力。

一、什么是雙列時(shí)間軸

雙列時(shí)間軸的定義

雙列時(shí)間軸是把兩條時(shí)間進(jìn)程并排展示，通常左側(cè)和右側(cè)分別代表不同的類(lèi)別、項(xiàng)目或部門(mén)。與傳統(tǒng)的單軸時(shí)間線相比，雙列時(shí)間軸能：

• 同步展示兩個(gè)主題的進(jìn)展路徑
• 實(shí)現(xiàn)更清晰的對(duì)比與平行敘述
• 避免信息堆積，讓頁(yè)面更規(guī)整

典型使用場(chǎng)景

• 公司兩個(gè)部門(mén)的工作時(shí)間表展示
• 產(chǎn)品設(shè)計(jì)與開(kāi)發(fā)的同步進(jìn)度對(duì)比
• 教育培訓(xùn)課程的線上與線下安排

二、如何用 Avada 構(gòu)建雙列時(shí)間軸

Avada Builder 支持的結(jié)構(gòu)方式

Avada Builder 不直接提供“雙列時(shí)間軸”模塊，但可以通過(guò)以下方式實(shí)現(xiàn)相似布局：

• 使用“Container + Column”模塊
• 控制模塊間距、樣式，使之看起來(lái)是并行的兩條時(shí)間線

頁(yè)面結(jié)構(gòu)設(shè)計(jì)建議

頁(yè)面一般可采用以下結(jié)構(gòu)：

• 頂部標(biāo)題區(qū)：說(shuō)明雙列時(shí)間軸的內(nèi)容主題，例如“市場(chǎng)推廣 VS 產(chǎn)品開(kāi)發(fā)”
• 兩欄時(shí)間線：左右各自為一個(gè) Container，每列對(duì)應(yīng)一個(gè)類(lèi)別

三、實(shí)戰(zhàn)案例：展示“市場(chǎng)推廣進(jìn)度 vs 產(chǎn)品開(kāi)發(fā)進(jìn)度”

項(xiàng)目背景

某公司希望在產(chǎn)品上線前，將市場(chǎng)推廣（Marketing）與產(chǎn)品開(kāi)發(fā)（Product Development）進(jìn)度進(jìn)行并行展示，以便內(nèi)部團(tuán)隊(duì)快速了解兩個(gè)線條的工作節(jié)奏。

操作流程詳解

步驟一：搭建頁(yè)面容器結(jié)構(gòu)

1. 點(diǎn)擊頁(yè)面中的 “Add Container” 按鈕
2. 在彈窗中選擇 “1/2 – 1/2”（即左右各占一半寬度），這是最適合雙列展示的結(jié)構(gòu)方式。

步驟二：添加時(shí)間軸模塊

在左列添加時(shí)間軸模塊（Timeline）

點(diǎn)擊左邊的列區(qū)域，點(diǎn)擊 “+ Element”，找到Studio，搜索添加一個(gè) Timeline 模塊

點(diǎn)擊“+ Element” 選擇 “Title” 模塊把標(biāo)題命名為“市場(chǎng)推廣進(jìn)度”

依次添加如下節(jié)點(diǎn)：

• 品牌策劃啟動(dòng)
• 營(yíng)銷(xiāo)物料設(shè)計(jì)完成
• 上線前廣告投放

在右列添加另一個(gè)時(shí)間軸模塊

點(diǎn)擊右邊列區(qū)域，同樣添加 Timeline 模塊，命名為“產(chǎn)品開(kāi)發(fā)進(jìn)度”，并設(shè)置如下節(jié)點(diǎn)：

• 產(chǎn)品功能凍結(jié)
• 內(nèi)測(cè)版本上線
• 上線版本打包完成

步驟三：美化節(jié)點(diǎn)樣式與圖標(biāo)

• 各自設(shè)置圖標(biāo)顏色風(fēng)格
• 兩邊使用不同背景色/邊框色突出兩者差異

步驟四：增加總結(jié)話語(yǔ)

在雙列時(shí)間軸下方添加總結(jié)，可調(diào)節(jié)字體顏色變得醒目

• 加一句鼓勵(lì)話語(yǔ)（如：“兩條戰(zhàn)線正在并肩推進(jìn)，敬請(qǐng)期待發(fā)布日！”）

四、優(yōu)化建議與常見(jiàn)問(wèn)題解答

如何保持兩列高度一致？

• 控制每個(gè)節(jié)點(diǎn)描述長(zhǎng)度類(lèi)似，避免過(guò)多圖文內(nèi)容堆積
• 可使用“空白間隔”模塊手動(dòng)調(diào)節(jié)對(duì)齊效果

移動(dòng)端如何展示？

• 若希望區(qū)分明顯，可在每列頂部插入類(lèi)別標(biāo)題（如“市場(chǎng)部時(shí)間線”）
• 確保圖標(biāo)、文字在小屏幕中不會(huì)被壓縮變形

如何添加交互或動(dòng)畫(huà)效果？

• 使用滾動(dòng)動(dòng)畫(huà)效果讓時(shí)間軸逐步加載
• 設(shè)置節(jié)點(diǎn)“彈出模態(tài)框”查看詳細(xì)信息

五、總結(jié)

在Avada 構(gòu)建雙列時(shí)間軸，是一種實(shí)用且美觀的網(wǎng)頁(yè)顯示方式，特別適用于需要并行對(duì)比兩類(lèi)進(jìn)展的場(chǎng)景。通過(guò)靈活使用 Container 與 Timeline 模塊的組合，可以實(shí)現(xiàn)明顯的對(duì)比效果。

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