網站右下角顯示聯絡小圖示

網站右下角顯示聯絡小圖示

不懂得程式語法也可以製作網頁互動特效!類似KeyReply的功能

有興趣的朋友可以到 Elementor 官網部落格觀看所有特效如何運作,網址連結如下:https://elementor.com/blog/introducing-motion-effects/

一、前置步驟

  1.  準備圖片素材
  2. 到Elementor編輯

二、設定步驟

1. 新增「段」,為物件創造放置的空間

2. 在「佈局」進行滿版設定

 編輯 段

拉伸段:開啟
內容寬度:全寬
欄間距:沒有間距

3. 插入「圖片」,請先插入「聯絡小圖示」

4. 至「進階 -> Positioning」

 編輯 圖片

寬度:自訂,請將單位調整為「vw」,並將圖片尺寸調整至適切大小
位置:Fix
Horizontal Orientation 至左;Offset 單位調整為「px」
Vertical Orientation 至下;Offset 單位調整為「px」
* 位置請依照自己的需求調整

5. 至「內容 -> 連結」

 編輯 圖片

連結:貼上聯絡小圖示對應的連結
如果是要電話連結(手機點擊會直接撥號),填上
tel:電話號碼
例如:+886937808408

Try it ! 測試看看吧!

功能完成!

藉由以上操作步驟,成功製作出想要的聯絡小圖示,完全不需要寫程式!

About the Author