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

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

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

elementor 03 2

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

開啟 Page Transitions

elementor 03 3

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

設定 Page Transitions

elementor 03 4

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

elementor 03 5

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

設定 Preloader

elementor 03 6

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

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

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

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

廣告
延伸閱讀
相關標籤:
SHARE
WRITTEN BY
Hend Chen
Hend Chen
嗨,我是 Hend!專長於網頁設計 、UI 設計、品牌設計,熱愛參與社群活動、分享設計新知。我的英文名字取自中文名字發音,發音和手的英文 “hand“ 沒有差異,如果您正面臨網站設計的困擾,我很樂意成為協助您的那雙手!

目錄

Subscribe