在網站的持續運作中，使用者體驗優化始終是我們關注的核心。作為輕量且高效的互動組件，懸浮按鈕可將常用入口固定在使用者視線範圍內，顯著縮短點擊路徑、提升導航效率與操作順暢度。
借助Elementor這個WordPress外掛的視覺化構建，即便沒有程式設計基礎，也能透過拖曳快速製作出美觀、響應式、功能完善的懸浮按鈕。
接下來，本Elementor教學課程將手把手示範製作流程，並提供樣式、行動裝置適配與可訪問性等實戰要點，幫你為網站增添一處「好用不打擾」的互動。
前提條件
- 已在WordPress 網站上安裝並啟用Elementor 外掛程式。並且使用Elementor製作了一個Footer，且設定Footer為整站展示。
- 如果需要更進階的功能，可能需要 Elementor Pro。
1. 編輯Footer模板
我們透過在Footer中加入Icon或其他按鈕小部件，並讓其固定浮動在我們網頁中來實現底部懸浮按鈕的效果。
如果你是使用Elementor Pro，那就透過Templates –> Theme Builder來進入到Footer範本編輯頁面。
如果你使用的是Elementor免費版+ Elementor Header & Footer Builder這個WordPress外掛程式製作的Footer，那麼可以透過Appearance –> Elementor Header & Footer Builder來編輯Footer。
製作Footer的過程不再贅述，如果你還沒製作好Footer，可以看我這篇文章先開始。
我們進入Footer的視覺化編輯介面後，在Footer容器下新建一個Flexbox容器，用來裝我們的底部懸浮元素，像這樣子：
2. 新增Icon小工具
在Elementor 編輯器左側的元素面板中，找到 “Icon” 小部件。將 “Icon” 小部件拖曳到懸浮按鈕容器中。
3. 設定Icon小工具
我們先給Icon小工具設定樣式，具體設定什麼樣式，依照自己的需求來定：
- 如果是返回頂部按鈕，那麼就給它一個向上的箭頭；
- 如果是需要一個聯絡方式的懸浮按鈕，那麼我們可以為它設定一個微信的LOGO。
我們在做懸浮按鈕的時候，要讓使用者看到這個懸浮圖示就能夠知道預期的一個跳躍效果是什麼。
我們新增了三個Icon小工具，分別對應：微信、WhatsApp、以及回傳頂部功能。
設定懸浮按鈕的內容
例如我們要做一個聯絡方式的懸浮按鈕，那我們可以選擇使用微信的LOGO，點擊該懸浮按鈕後跳轉至聯絡頁面，然後讓用戶掃碼加微信。
設定懸浮按鈕的樣式
這邊的Icon樣式對應的表現形式如下圖註釋，可依實際需求自行調整：
設定懸浮按鈕為懸浮狀態
我們給第一個Icon小工具設定Fixed佈局，使其固定在我們的瀏覽器視窗的某個位置。
- 點選左側面板的 “Advancaed” 選項卡。
- 定位設定：
- 展開 “Position” 部分。
- 將 “Position” 設定為 “Fixed”。
- 選擇位置：
- 在 Horizontal Orientation 和 Vertical Orientation 中設定為右，下。
- 調整偏移量：
- 如果需要微調按鈕的位置，可以調整 “水平偏移” 和 “垂直偏移” 數值。
- 設定Z 索引：
- 在 “Z-index” 欄位中輸入較高的數字（如 999），確保按鈕位於其他內容之上。下圖漏設了。
如下圖所示：
然後其他兩個懸浮按鈕也重複上述步驟，即可得到以下效果：
4. 設定在其他裝置端下的樣式
我們完成第三步以後，我們就已經實現了PC端下的懸浮按鈕樣式的設定。
但如果想要在其他裝置端正常顯示，我們需要透過Elementor的響應式佈局功能來實現。
我們點擊頂部欄的不同裝置可以切換預覽在不同裝置下的顯示效果：我們可以對這些懸浮按鈕進行一些細微的調整來達到最優的效果。例如，字體大小、間距等等。
在不同的裝置端調整的樣式最終會在不同的裝置端顯示出來。
平板端：
M端：
比方說我不想在M端顯示WhatsApp這個懸浮按鈕，那我們就可以透過「Advanced」標籤中的「Responsive」屬性來設定隱藏，效果如下：
5. 設定展示條件並發布懸浮按鈕
完成以上四步驟以後，如果達到你滿意的效果，那麼此時我們點擊右上角的Publish按鈕，即可將我們的懸浮按鈕應用至整站。