Elementor Pro: Lottie 動畫插件

Elementor Pro: Lottie 動畫插件

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on telegram
Telegram
Share on email
Email

文章目錄

Lottie是Airbnb開發的新世代的動畫庫。有別於以往的GIF,Lottie能提供流暢的json動畫體驗。而現在,Elementor Pro用家將可輕鬆插入Lottie動畫了!

簡介

先不多說,大家看看下列的動畫效果:

很流暢吧!這就是Lottie動畫了。動畫製作員在Adobe After Effects製作動畫後,把檔案經過Lottie插件“Bodymovin”導出為json格式,再把連接套到網站,便可呈現這麼漂亮的景象!

倘若不是動畫製作員的你,怎麼可以為你的網頁添加Lottie動畫呢?這個時候你只需要完成以下2個簡單步驟即可:

  1. Lottie動畫資源
  2. Elementor Pro Lottie插件

Lottie動畫資源

現時最大的資源庫是 lottiefiles.com,它擁有大量免費及付費動畫內容。現在我們先前往註冊。在首頁點擊“Sign Up”進行註冊。由於註冊相當簡單,這裡我便省略過程,直接跳到主題。

完成註冊後,點擊菜單的“Animations”進入動畫庫。這裡你可以隨便瀏覽,挑選心愛的動畫。

現在我們隨便點開一個動畫,這時播放器會播放完整的動態。留意指標地方的URL,稍後我們將會用到。

lottie

Elementor Pro Lottie插件

挑選好心儀的動畫後,我們便可以把它放到網頁處。

打開Elementor控制台,找到Lottie插件,並把插件拉到網頁。

現在看到儀錶板的選項,在“Source”選擇“External URL”,然後在“External URL”方塊,貼上剛才提醒大家需要留意的“Lottie Animation URL”。

screenshot-oblivions.net-2020.06.16-23_13_20

這時候,動畫立馬出現!先別開心,留意到動畫只播放1次就停了嗎?這時候我們需要多一個動作。

找到Settings,把“Loop”打開,這時候動畫將無限重播!至於其它的選項,則可根據喜好自行設定。

screenshot-oblivions.net-2020.06.16-23_17_32

總結

由於Lottie動畫不像一般Vector插圖般能輕易利用Adobe Illustrator修改顏色,使動畫與網頁配色相同,因此若你並非專業動畫製作員,Lottie動畫只適合單獨點綴你的網頁。若經濟條件許可的話,可以考慮在LottieFiles網頁的“Marketplace”分頁,購買色調相對一致的組合包,這樣能為網頁格調提升不少!

Oblivions 站長 | Lau B
各位網友大家好,我是 Lau B!業餘網站設計愛好者,從2016年接觸 WordPress 及 Avada 主題,到現在移情別戀深愛 Elementor,我希望在這裡分享一些華語地區相對缺乏的 Elementor 及其第三方外掛的使用教學予各位有志建站的新手老手。
Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on telegram
Telegram
Share on email
Email

歡迎留言

相關教學

WordPress 建站 新手組合

託管主機

SiteGround

超值、優質,而且最近S家把整個服務搬進了 Google Cloud Platform,整體性能更變態、反應速度更高了。

SiteGround

新手最佳入門網頁寄存主機

查看最新優惠

WordPress 主題

Elementor Pro

我曾經購買過5款知名,在今天,包括這個網站在內的4個經營網站,我全把網站們都轉為了Elementor Pro + Hello Theme。別糾纏在那些“全能”的主題了,

Elementor Pro

它不便宜,卻是新手最值得投資的頁面編輯器。而且它包含了很多示範模板,極速美化你的網站!

查看更多

必備插件

Crocoblock 插件

作為Elementor Pro的最佳功能補充插件,Crocoblock提供價廉物美的插件包,進一步完善你的網頁功能。

Crocoblock 插件

通過本網頁的教學,新手輕鬆掌握Crocoblock插件的各種功能!

馬上購買