在 Elementor 中建立黏貼式頁尾導覽，可以讓使用者在捲動頁面時仍能存取重要的導覽連結，改善使用者體驗，尤其是在行動裝置上。以下是關於在 Elementor 中設置粘性頁尾的全面指南，其中包含詳細步驟。

步驟 1：設定黏貼式頁尾導航範本

確保 元素 和 Elementor Pro 安裝，並使用與 Elementor 相容的主題，例如 你好，Elementor 或 Astra.

建立頁尾範本

1. 開啟 Elementor 編輯器
   • 選擇要編輯的頁面或前往 Templates > Theme Builder 來建立新的頁尾範本，確保所有頁面的設計一致。

3. 新增頁尾範本
   • 按一下「新增頁腳」以開始新的頁腳範本。使用範本可維持全站相同的樣式。

5. 插入頁尾範本
   • 使用 Elementor 的範本匯入功能插入預先儲存的頁尾範本。
   • 開啟範本庫，找到您儲存的頁尾範本，然後按一下 插入.

步驟 2：將導航元件新增至頁尾

在此新增主要頁面的連結，例如首頁、購物車、我的帳戶和搜尋列。

建立頁尾結構

1. 新增容器
   • 在 Elementor 頁面底部，按一下「+」，新增一個指定為頁腳的容器。

2. 設定欄位結構
   • 將區段設定為兩列或更多列，以排列導覽項目。例如，在左側放置「首頁」圖示，在右側放置「」圖示。購物車右側的 " 圖示可輕鬆存取關鍵頁面。

新增圖示元素

每一列都會得到一個導覽項目：

1. 新增「首頁」圖示
   • 使用 圖示 小工具：將圖示 Widget 拖曳到左列，然後選取 圖示方塊 來結合圖示和標籤。
   • 自訂圖示：從圖示庫中選擇首頁圖示，調整顏色和大小以符合設計。
   • 新增連結：在 Icon widget 的設定下，連結至首頁 (例如 / 或 https://yourdomain.com)。

2. 新增「購物車」圖示
   • 在右側欄位中，新增另一個圖示 Widget，並使用 購物車圖示.
   • 連結至購物車網頁 (例如 /cart 或 https://yourdomain.com/cart)。

3. 新增「我的帳戶」圖示
   • 在指定欄位中加入帳號圖示。
   • 連結至帳戶頁面（通常為 /my-account 或 https://yourdomain.com/my-account）。

4. 新增搜尋功能
   • 將 Search Widget 拖曳到欄位中。
   • 自訂搜尋列樣式：設定顏色、大小和占位符文字，以符合頁尾設計。

步驟 3：自訂頁尾版面與樣式

新增導覽元素後，微調頁尾的版面與樣式，以達到統一且友善的外觀。

佈局調整

1. 調整欄寬
   • 調整每一列的寬度，以便在容器設定中平均分佈導覽項目，例如將每一列設定為 25% 或 50%。

2. 對齊瀏覽元件
   • 選取每個 Widget 並調整對齊方式（居中、居左或居右）以達到平衡。

3. 偶像風格
   • 在每個圖示 Widget 的設定中，調整圖示大小和顏色，並視需要加入懸停效果。

步驟 4：啟用黏貼效果

使用 Elementor Pro 的黏貼效果，讓頁尾在使用者捲動時保持可見。

1. 設定黏住行為
   • 選取頁尾部分，並移至 Advanced Settings > Motion Effects.
   • 啟用 黏貼 並將其設定為粘在底部。

2. 選擇裝置顯示選項
   • 選擇要套用黏貼效果的位置 (桌上型電腦、平板電腦或行動裝置)。

風格自訂

1. 背景顏色
   • 按一下頁腳容器，然後在 風格 標籤，方便檢視。

2. 排版
   • 選擇每個 正文 元素，例如導覽標籤。
   • 前往 Style >Content 自訂字型、大小和顏色，以提高可讀性。

步驟 5：儲存與預覽

設定完成後，按一下 節省 來發佈範本。進行預覽，以確保黏貼式頁尾保留在底部，且所有連結都能正常運作。

摘要

在 Elementor 中建立具黏性的頁尾導覽，可讓使用者在捲動頁面時仍能存取重要連結，提升可用性，尤其是在行動裝置上。在 Theme Builder 中設定頁尾模板，可確保所有頁面的設計一致。在結構化的欄位中加入導覽元素，例如首頁、購物車、我的帳戶和搜尋圖示，可讓您輕鬆存取關鍵頁面。自訂版面、調整圖示樣式，以及啟用黏貼效果，可讓使用者在瀏覽時看到頁尾。完成這些步驟後，儲存並預覽範本，即可確認黏貼式頁尾能順利運作，讓整個網站維持一致且友善的設計。