Elementor 教學 – 如何加入頁面轉場效果 (Page Transitions)

在網站添加頁面轉場效果 (Page Transitions)，可以讓網頁的呈現有更好的體感，讓讀取頁面所等待的時間不再枯燥乏味，在 Elementor Pro 3.6 版即內建此功能之設定，不需要另外安裝外掛或是撰寫程式碼，就可以製作出變化多端的頁面轉場效果。

Elementor 官方文件：https://elementor.com/help/page-transitions/

開啟 Page Transitions

在後台 Elementor / 設定 / Experiments，啟動 Page Transitions，以進行後續設定。

設定 Page Transitions

進入 Elementor 頁面編輯畫面，至「網站設定 / Page Transitions」進行設定。
此外，網站設定內可以調整網站上通用的元素，例如：圖片、表單、按鈕、標題及內文、超連結、背景等，詳細可以閱讀：最佳化你的 Elementor – Fonts / Color / Section 一次搞定。

在 Page Transitions 的設定欄位內，可以針對色彩以及動畫呈現進行設定，其第一個下拉選單為「進入頁面」的動畫，第二個為「離開頁面」的動畫，裡面有許多動畫呈現效果，可以依照自己的喜好進行選擇。Animation Speed 為動畫呈現的速度，數值越高動畫會跑越慢；反之則越快。

設定 Preloader

在 Preloader 的欄位內，可以設定在轉場同時呈現的影像，影像有三種類型可以選擇：

1. 動畫：目前動畫無法自訂呈現樣式，只有預設樣式可以選擇。
2. 圖示：可以選擇圖示庫的 icon，或是自己上傳 SVG 檔案，若希望 SVG 有動畫效果，請參考：如何製作 SVG 動畫？使用線上編輯工具 SVGator 讓網站圖片動起來！
3. 圖片：可以使用任何可以上傳媒體庫的影像，如：jpg、png 等。

在「動畫」欄位可以選擇影像的動畫效果，例如：放大、搖晃等。選擇好影像類型與動畫效果，可以在 「樣式」進行尺寸的設定，其設定支援響應式，可以針對平板、手機顯示進行調整。

不過，在網頁讀取速度不慢的情況下，我認為 Preloader 的設定會顯得尷尬，因為設定的影像有可能只顯示不到一秒，就馬上進入下一個頁面，反而會造成使用者的困惑，以為是當機或是出現 Bug，所以在設定時可以評估是否要設定 Preloader。