Elementor 教學小工具應用(三) - 為網頁加入動態視覺效果

Elementor 網頁動畫教學

Elementor 網頁動畫教學 :

1. Elementor 小工具進場動畫設定方式

2. Elementor 標題小工具動態打字效果

Elementor 網頁動畫教學 – Elementor 小工具除了可以快速建構網頁元素外,也可以在樣式中設定動態視覺效果,比如當網站載入時讓網頁元素以不同方式進場,像是淡入淡出、滑動、旋轉等,可以讓網站不會顯得過於死板,在整體視覺上能更加生動,根據官方資料可以選擇的進場動畫如下圖所示:

Elementor 網頁動畫教學

另外在這篇文章中也會介紹動態標題小工具,可以讓文字以打字的方式逐一出現,當網站中有需要宣傳的標語,或者是需要醒目提示的文字內容,使用打字特效呈現能讓網站訪客加深文字內容的印象。詳細的文字打字動畫可以參考 Elementor 官方影片:

Elementor 進場動畫說明:https://docs.elementor.com/article/57-entrance-animations
Elementor 動態標題介紹:https://elementor.com/widgets/animated-headlines/
Elementor 動態標題說明網頁:https://docs.elementor.com/article/231-animated-headline

• 進場動畫設定方式

第一步:新增一個標題選到 ” 進階 ” 裡面的 Motion Effects。

Elementor 網頁動畫教學

第二步:裡面有很多進場動畫效果,如果不懂字面意思可以直接選擇,在預覽畫面中會直接套用效果。

Elementor 網頁動畫教學

第三步:在下方選項可以針對動畫進場效果的持續時間與延遲時間做設定。

Elementor 網頁動畫教學

第四步:動畫延遲的部分可以做成依序進場的感覺,你可以如下圖這樣設置。

Elementor 網頁動畫教學

第五步:以上一步驟圖片中所設置的範例,動畫延遲分別設定為300、600、900、1200ms,就會像下面影片一樣呈現

• 標題小工具動態打字效果

第一步:選擇動畫頭條工具。

Elementor 網頁動畫教學

第二步:打字機樣式在內容頭條的選項,樣式選擇旋轉,動畫選擇 Typing 。

Elementor 網頁動畫教學

第三步:讓顧固定的文字打在”文本之前”及”文本之前後”,範例打的是「西南風發威!9縣市大雨豪雨特報」、「留意強降雨」。”旋轉文本”欄位是要輸入要動畫效果的文字 範例:嘉義、高雄。

Elementor 網頁動畫教學

第四步:結果如下方範例影片。

 

結語:

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WordPress 外掛 相關教學文章:

Elementor 教學 - WordPress 視覺化網站編輯外掛,基本操作及設定介紹

Elementor 教學小工具應用(一) - 標題文字與圖片影音設定方式

Elementor 教學小工具應用(二)- 網站版面設計操作要領

Elementor 教學小工具應用(四) - 設定數值欄位自動抓取網站資料

WordPress 網站翻譯 外掛 – Loco Translate 中文化網站主題與外掛

Post Types Order 更改文章及圖片排列順序,WordPress 外掛教學

網站架設知識推薦閱讀:

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top