如何使用Elementor在WordPress中創建時間表

已發表: 2025-05-26

時間表提供了一種視覺方式,以按時間順序顯示事件,里程碑或步驟。它們有助於在線性流中介紹信息,從而使訪問者和用戶更容易理解事件或過程的順序。使用它們,您可以展示公司的旅程,項目路線圖或清晰的個人故事。

在WordPress中添加時間表可以通過使內容更具吸引力和更易於遵循來增強用戶體驗。這就是為什麼使用時間表已成為許多網站上的趨勢的原因。 Elementor是一個用戶友好的插件,您可以用來在WordPress帖子和頁面上創建和添加時間表,並具有極高的自定義級別。

在本文中,我們將向您展示有關如何使用Elementor在WordPress中創建時間表的分步指南。在此之前,我們將介紹一些有關當今主題的理論部分。

時間表及其用例

Types of Timelines and Their Use Cases

時間表有兩種類型 - 水平和垂直。每個人都有特定的用例,以不同的方式為網站增加價值。讓我們在下面的討論中探索它們及其用例。

1。垂直時間表

垂直時間表顯示從上到下的事件和信息,通常沿頁面的左側或中心。這是一種滾動友好的格式,可在台式機和移動設備上無縫運行。當用戶向下滾動頁面時,他們以乾淨易讀的佈局遵循按時間順序排列的順序。

垂直時間表的用例:

  • 公司歷史或增長旅程
  • 恢復或職業亮點
  • 博客文章系列或文章的進步
  • 分步過程的解釋
  • 產品開發里程碑

2。水平時間表

水平時間軸顯示從左到右的事件,遵循側面滾動或滑動格式。它通常在空間寬的地方使用。這種格式最適合較短的時間表,或者只想在寬闊,易於看到的佈局中顯示一些重要事件時。

水平時間表的用例:

  • 項目路線圖或計劃階段
  • 事件時間表
  • 營銷活動或產品啟動
  • 投資組合演示
  • 教育時間表或歷史概述

如何使用Elementor在WordPress中創建時間表

如前所述,Elementor是一個拖放頁面構建器插件。但可悲的消息是,它不包括創建時間表的任何小部件。但是,該插件具有許多附加子,您可以通過它們擴展核心Elementor插件的功能。

Happyaddons是其中之一。它帶有130多個小部件和22多個功能,可以克服Elementor的許多缺點。因此,通過安裝HappyAddons插件,您可以在網站上啟用更多設計功能。在許多情況下,如果您擁有HappyAddons,您甚至不需要Elementor Pro。

現在,讓我們探索如何使用Elementor和Happyaddons在WordPress中創建時間表。

如何在WordPress中創建水平時間表

希望您已經知道什麼是水平時間表。 HappyAddons具有水平時間線小部件,完全免費使用。因此,您需要首先在網站上安裝和激活以下插件。

  • Elementor
  • Happyaddons

在網站上安裝並激活插件後,開始遵循下面的教程中解釋的步驟。

步驟01:在Elementor Canvas上創建一個部分

使用Elementor打開帖子或頁面。創建一個帶有所需Flexbox列結構的部分以創建時間表。

Create a new section to add widget

步驟02:將水平時間表小部件添加到畫布

在Elementor面板上找到水平時間線小部件。找到它後,將小部件拖放到畫布上。

Add the Horizontal Timeline widget to the canvas

您會看到水平時間線小部件已通過默認佈局添加到畫布中。

Horizontal widget is added to the Elementor canvas

步驟03:為小部件選擇一個預設

預設是預定義的設計樣式或佈局,您可以立即將其應用於小部件以快速自定義。如果您不想從頭開始設計小部件,則可以選擇一個預設。水平時間線小部件帶有六個預設。

為小部件選擇您喜歡的預設

Select a Preset for the Horizontal Timeline Widget

步驟04:將內容添加到水平時間表小部件

擴展時間軸部分。在這裡,您將獲得將內容添加到小部件的選項。默認情況下,您將獲得四個選項卡。單擊任何選項卡以將其展開。這將打開許多領域,您可以在其中放置並添加所需的信息。

Expand to the Timeline section

擴展選項卡後,您可以將事件日期,圖標,圖像,圖像分辨率,標題描述添加到相應的選項卡中。

Add content to the tabs of the Horizontal Widget

您可以看到我們已經在水平小部件的各個部分中添加了內容。

Content added to the horizontal timeline tab

以同樣的方式,將內容添加到所有時間表選項卡中。您可以看到我們已經在下面的圖像中完成了。

Add content to all timeline tabs

要向小部件添加更多選項卡,請單擊“時間表”選項卡下的+添加項目按鈕。

Add new tabs to the horizontal timeline widget

步驟05:配置水平時間表小部件的設置

內容部分完成後,在“內容”選項卡下擴展“設置”部分。您可以配置標題html選項卡,內容對齊,隱藏內容箭頭,啟用燈箱,動畫速度,顯示的幻燈片數量,圖標等等。

這些非常容易配置。我們希望您自己可以獨自做。

Configure Settings for the Horizontal Timeline Widget

步驟06:對水平時間表小部件進行樣式化

要設置小部件,請轉到Elementor面板上的“樣式”選項卡

Go to the Style tab of the Horizontal Timeline widget

首先,擴展時間軸部分。

您將獲得定制線厚度,線色,日期間距,日期版本,顏色,圖標,邊框半徑,邊框類型,邊框寬度,背景顏色等的選項。

探索它們並進行必要的自定義。

Expand the Timeline section from the Style Tab

您可以看到我們已經對水平時間表進行了一些更改。

Stylized the horizontal timeline

然後,展開箭頭部分。從這裡,您可以自定義箭頭圖標,它們的位置,大小,邊框寬度,半徑等

Stylize the arrow icons of the timeline

以同樣的方式,擴展“樣式”選項卡的內容部分。您可以自定義邊框半徑,填充,內容,邊框類型,邊框寬度,顏色,陰影,版式以及更多小部件之間的空間

進行必要的更改。

Stylize the content of the Horizontal Timeline widget

步驟07:預覽水平時間表小部件

轉到預覽頁面,檢查一切是否正常。您可以看到我們的演示水平時間表工作正常,沒有任何故障。

如何在WordPress中創建垂直時間表

雖然HappyAddons允許您免費創建水平時間表,但您必須升級到插件的高級版本才能創建垂直時間表。因此,請確保您的網站上可用以下插件。

  • Elementor
  • Happyaddons
  • Happyaddons Pro

一旦在您的網站上可用,便開始遵循以下說明的教程。

步驟01:拖放時間線小部件到Elementor Canvas

在搜索框中輸入時間表選擇除水平時間軸以外的時間軸小部件。在Elementor帆布上拖動它。

Drag-and-Drop the Timeline Widget to the Elementor Canvas

將在使用默認佈局的畫布上創建垂直時間表。

Timeline widget is added to the Elementor canvas

步驟02:為垂直時間線小部件選擇一個預設

希望您已經知道預設是什麼,正如我們已經在上面討論的那樣。如果您不想從頭開始設計垂直時間表,請選擇一個預設

Select a Preset for the Vertical Timeline Widget

步驟03:將內容添加到垂直時間表

擴展時間軸部分。默認情況下,您將看到兩個選項卡。如我們在上面顯示的那樣,通過單擊它來擴展任何選項卡。

Add Content to the Verticle Timeline

希望您不要在這裡談論太多。因為在水平時間表的情況下,您可以將幾乎相同類型的內容添加到垂直時間表。

您可以添加圖標,更改圖標類型,定義時間,設置標題,添加圖像等。自己做一件事情。

Add content to the verticle timeline

完成時間軸添加內容。您甚至可以通過單擊+添加項目,如上圖所示,在時間軸中添加更多項目。

Complete adding content to the verticle timeline

步驟04:配置垂直時間表小部件的設置

擴展設置部分。您可以配置是否顯示日期,時間,內容箭頭滾動樹。您還可以更改標題標籤,圖標框對齊,樹對齊背景顏色

自己做一個誠實的設置。但是對我們來說,默認的對齊方式看起來不錯。因此,我們將堅持本教程。

Configue Settings for the Verticle Timeline Widget

步驟05:對垂直時間表小部件進行樣式化

進入“ Elementor面板”上的樣式選項卡。您可以從此選項卡上自定義小部件上的所有類型的內容和視覺元素。

Stylize the Verticle Timeline Widget

首先,展開內容框。您可以從此處自定義字體,顏色,箭頭顏色,背景類型,邊框類型邊框寬度。這樣做。

Customize content of the verticle timeline widget

以同樣的方式擴展圖標框部分。您可以從此處更改與小部件上的圖標相關的寬度,高度,框空間和其他選項。如果您對默認樣式滿意,請不要觸摸任何東西。

Stylize the Icon Box of the Verticle Timeline Widget

如果有必要的話,將小部件的標題定型。您可以看到我們改變了排版。

Stylize the title of the verticle timeline widget

以同樣的方式自定義時間和日期的外觀。我們改變了其顏色,重量和排版。

Stylize time and date

最後,擴展按鈕部分。您可以對其背景顏色,複製排版風格化。

Stylize the button on the verticle timeline widget

步驟06:預覽垂直時間表小部件

來到預覽頁面,然後檢查佛提比時間軸是否正常。通過滾動小部件來做到這一點。我們希望它能像我們一樣效果。

因此,您可以在網站上創建不同類型的時間表部分,以呈現各種內容。

您可以使用Happyaddons做更多的事情

老實說,HappyAddons是一個全面的插件。使用一次後,您一定會愛上此插件。看看您可以使用插件來處理的以下操作。

Things More You Can Do with HappyAddons

一個。使用免費主題建造者

Elementor還擁有一個主題構建器。但這僅保留給高級用戶。但是對於HappyAddons,它是完全免費的。使用HappyAddons主題構建器,您可以創建標題,頁腳,博客文章模板和檔案頁面。免費查看如何免費使用HappyAddons創建博客文章模板。

b。 wooCommerce友好

Happyaddons配備了九個強大的WooCommerce友好的小部件,以增強您的電子商務網站。這些小部件是產品網格,產品旋轉木馬,產品類別網格,產品類別旋轉木馬,單產品,迷你購物車,購物車,結帳和運輸欄。

c。跨域複製紙

借助此功能,您可以將相同的小部件,部分和頁面從一個網站直接複製到另一個域。這可以節省您的寶貴時間,因為您不必總是從頭開始。以下視頻說明了插件的跨域複製 - 副本功能。

d。設計創意內容

憑藉其小部件,例如圖像懸停,動畫鏈接,有趣的因素,圖像堆棧組,照片堆棧,創意按鈕,文本滾動和圖標,您可以創建引人入勝的創意內容來吸引用戶。

e。顯示統計信息

與許多其他Elementor附加組件不同,此插件提供了幾個圖表小部件,您可以通過這些小部件來展示統計信息並創建信息圖表和頁面。了解如何使用Elementor創建信息圖表。

除了所有這些外,Happyaddons插件還可以做更多的事情。

最後的想法!

對於所有網站而言,創建時間表並不是強制性的。但是它們可能會變得必要,因為它們可能是展示某些信息和內容的理想選擇。因此,每當您覺得需要創建時間表時,我們希望此教程帖子能夠使用。

如果您喜歡這篇文章,我們要求您通過下面的評論框告訴我們。此外,如果您對HappyAddons插件有任何疑問,則可以在聊天框中留言。我們的現場支持代理人將盡快回應您。

感謝您與我們在一起,直到最後。我們祝您未來快樂。