頁首與頁尾

概述

頁首（Header）是網站最上方（或電腦版左側）的導覽列，幫助訪客認出品牌、切換頁面與點擊主要行動按鈕；頁尾（Footer）則是網站最底部的收尾區，集中呈現品牌簡介、多欄導覽、聯絡方式、社群圖示與法律條款連結。

• 如何開啟編輯：直接在編輯預覽畫布點選頁首或頁尾，或從頂部工具列開啟「版面」點選清單最上方的「頁首」、最下方的「頁尾」（修改時皆會即時預覽並自動儲存進草稿，確認後按右上角「發布」更新公開網站）。
• 全站共用：頁首與頁尾預設為全站共用，改一次就會同步套用到所有一般頁面（多連結工具頁不掛頁首與頁尾）。

設計頁首（Header）

1. 顯示品牌資訊與標誌設定

在頁首表單的「基本資訊」區塊，您可以自由組合左上角要顯示的品牌識別：

• 顯示品牌資訊（多選膠囊）：可分別勾選或同時開啟「品牌標誌」與「網站名稱」：
  • 同時勾選時，頂部頁首會將標誌與網站名稱左右並排顯示；若選用「左側欄」版型，網站名稱則會自動排在標誌正下方獨立一行。
  • 若兩者都取消勾選，品牌位置將完全留白；若只勾選「品牌標誌」但網站尚未上傳任何 Logo，系統會自動顯示網站名稱文字代替。
• 品牌標誌來源與大小：
  • 使用品牌標誌（預設）：直接沿用您在設定的全站 Logo（支援淺色與深色模式各自對應）。
  • 為頁首另外指定：若頁首想放專屬的橫式文字標誌，可改選此項單獨上傳圖片或挑選圖示。
  • 標誌大小：提供「小、中（預設）、大」三段尺寸切換。

2. 依裝置（電腦／平板／手機）設定品牌關聯網址

一般電腦版頂部導覽列通常保持精簡、不放一整排社群圖示，但在手機與平板點開漢堡選單時，放入社群圖示則非常方便訪客追蹤。因此，頁首的「顯示品牌關聯網址」支援依電腦、平板、手機三種裝置獨立設定：

1. 先在填好您的社群平台連結（或點欄位旁的「前往設定」直接打開面板）。
2. 在頁首表單的「顯示品牌關聯網址」右側，點選電腦、平板或手機圖示切換要設定的裝置：
   • 預設狀態：電腦版置頂導覽預設為關閉（僅在「左側欄」版型預設開啟）；平板與手機的漢堡選單底部預設為開啟。
3. 直接點選下方的平台膠囊（如 Instagram、LINE、YouTube），即可針對該裝置逐條勾選或取消要顯示哪幾個平台（把該裝置的膠囊全部取消勾選，即不在該裝置顯示社群圖示）。

3. 頁首版型、模組底色與外觀

在頁首的「版型與外觀」區塊，可透過視覺縮圖與開關調整整體風格：

• 模組底色（6 色表面）：提供自動交錯（預設微毛玻璃底）、純淨白（深色模式為深邃黑）、霧光灰（炭霧灰）、品牌柔光、品牌主色、消光黑（柔光炭） 6 種色票；選擇深色或品牌主色底時，導覽文字、圖示與按鈕會自動反白，確保跨頁 100% 清晰可讀。
• 向下捲動時自動縮窄頁首：預設開啟，訪客往下滑動閱讀時頁首高度會稍微收窄，留出更多畫面空間。
• 顯示底部品牌裝飾線：開啟後會在頁首底邊加上一道細緻的品牌色漸層線條。
• 加入自訂按鈕（最多 2 顆）：可在頁首右側（或左側欄底部）放入最多 2 顆全站共用按鈕，並為每顆按鈕選擇「品牌主色」「預設」或「文字箭頭」樣式。

4. 功能按鈕（搜尋、購物車）

頁首最右側、行動按鈕的右邊，放的是網站的功能按鈕，目前有「搜尋」與「購物車」。在頁首表單的「功能按鈕」區塊可以決定要不要顯示、以及用拖曳把手（⋮⋮）調整誰排在前面：

• 搜尋（站內搜尋）：新建立的網站預設為開啟，既有網站可在此手動開啟並按右上角「發布」（免費版、專業版與商務版皆可使用）。
  • 訪客如何使用：當網站已發布且有可搜尋的公開內容時，頁首會顯示放大鏡按鈕，訪客點一下（或在電腦按 /、⌘K）即可搜尋網站上已公開發布的所有內容（包含一般頁面、子頁面、部落格文章與分類標籤、上架商品與分類；售完商品自動排在最後），也可以點選視窗底部的「查看所有結果」進入 /search 結果頁查看完整卡片清單。
  • 自動排除範圍：草稿、設為「隱藏」的頁面、沒有上架商品的空分類、數位商品受保護檔案名稱不會被搜到；若希望將特定已公開的頁面、商品或文章從站內搜尋藏起來，可在該項目的。編輯器畫布固定顯示放大鏡按鈕供預覽搜尋視窗外觀，發布網站後訪客即可實際搜尋。
  • 關掉按鈕不等於關掉搜尋：這個開關只決定頁首要不要顯示放大鏡。您網站的 /search 結果頁與 對已發布的網站一律可用，索引也會照常更新，方便自訂前端或 AI 助理使用。不想讓訪客搜到某一頁，請用上一點的「不出現在站內搜尋」，而不是只關掉按鈕。
• 購物車：「商店 › 設定 › 一般」的「啟用購物車」要開著（新建立的網站預設開啟），而且至少有一件上架中的商品，頁首才會出現購物車按鈕。條件還沒滿足時，開關會顯示為關閉且無法切換，並寫出缺少哪一步；點旁邊的「前往設定」即可開新分頁處理，處理完切回編輯器就會更新。
• 不想在頁首放購物車：條件都滿足後，把「購物車」開關關掉即可。訪客按商品的「加入購物車」時會直接打開購物車，一樣能結帳。
• 從商店設定過來：「商店 › 設定 › 一般」的「啟用購物車」說明裡也有連結，可以直接打開這裡的頁首設定。
• 在不同裝置的位置：電腦版全部排在行動按鈕右側；手機與平板在選單鈕旁最多顯示前 2 個功能按鈕，其餘自動放在點開後的選單最上方；「左側欄」版型只有一顆功能按鈕時與品牌標誌排在同一列，兩顆以上則排在標誌與網站名稱下方獨立一列。

設計頁尾（Footer）

1. 品牌標誌、無框呈現與品牌關聯網址

• 顯示品牌資訊：透過多選膠囊決定是否顯示「品牌標誌」「網站名稱」與「品牌關聯網址」。
• 顯示品牌關聯網址（逐條勾選）：開啟後，下方會出現緊湊的平台膠囊列，您可以自由點選要在頁尾顯示哪幾個社群連結。
• 標誌大小與「標誌加上白底方框」：
  • 頁尾標誌預設採用乾淨無框等比呈現（橫式 Logo 或透明背景圖不會被多餘的白框切邊，尺寸可選小／中／大）。
  • 若您的圖片本身需要白底襯托，可打開「標誌加上白底方框」開關。
• 品牌簡介與版權文字：可填寫一段頁尾專屬的品牌短述（超過 150 字時支援長文收合）與版權宣告（如 © 2026 品牌名稱）。

2. 多欄群組導覽、聯絡資訊與法律條款

• 用「群組」做出多欄頁尾導覽：
  • 在頁尾的「導覽項目」新增項目時，若將連結類型設為「下拉選單群組」，該群組在電腦版頁尾會自動渲染為獨立的一欄（群組名稱會變成該欄的小標題，底下的子項目則是該欄的垂直連結清單）。
  • 單一連結項目則會歸入預設導覽欄，搭配右側的「聯絡我們」最多可並排成整齊的 4 欄頁尾網格。
• 聯絡資訊：可勾選是否顯示地址、電話、Email 與營業時間（資料來源為的商家資訊）。
• 法律條款連結與 Cookie 設定：勾選要在頁尾最下方列出的條款連結（請先在將對應條款頁開啟顯示）；若網站有啟用，也會在此提供「Cookie 設定」按鈕讓訪客隨時重選偏好。

3. 頁尾版型、模組底色與雙行動按鈕

• 頁尾版型（3 種）：
  • 多欄標準（預設）：左側為品牌標誌、簡介、按鈕與社群圖示，右側為多欄導覽與聯絡資訊。
  • 置中對稱：將標誌、名稱、簡介、按鈕、社群與導覽全部置中排列。
  • 極簡單行：省略上方大型區塊，僅以單列清爽呈現網站名稱、版權文字、行動按鈕、社群圖示與條款連結。
• 模組底色（6 色表面）：預設為柔和霧光灰／炭霧灰；當您改選「品牌主色」或「消光黑／柔光炭」時，頁尾的聯絡圖示底框、文字與分隔線都會自動切換為高對比語意色，絕不撞色。
• 加入自訂按鈕（最多 2 顆）：可在頁尾品牌簡介下方（或極簡單行右側）放入最多 2 顆行動按鈕。

建立導覽項目、下拉選單與頁內 #錨點 跳轉

頁首與頁尾的導覽選單不會因為您新增了頁面就自動塞入，而是由您在「導覽項目」中手動新增與拖曳排序：

1. 用統一連結選擇器綁定目的地

點選「新增導覽項目」，輸入顯示文字（例如「服務方案」），並在「選擇連結目的地」搜尋或點選：

• 網站內部內容：可直接選擇一般頁面、商品、商品分類、部落格文章、文章分類／標籤／作者（若選中的頁面目前為「隱藏」或文章為「草稿」，選單旁會顯示提醒標籤，且公開站會自動隱藏未公開的項目，不怕訪客點到死連結）。
• 外部網址：滑到選單最下方選「外部網址」（或直接在搜尋框貼上 https://... 網址），並可切換要在「同一分頁」或「新分頁」開啟。
• 下拉選單群組：切換為「下拉選單群組」後，可在底下新增最多 8 個子項目（若您原本選中的頁面底下已經建立好公開子頁面，也可直接點選下方的「將 N 個子頁面加入為下拉選單」按鈕一鍵帶入，見）。在頁首會呈現為滑鼠移上或點擊展開的下拉選單（左側欄與手機版為手風琴展開）；在頁尾則會自動變成獨立的一欄導覽。

2. 設定「點選導覽或按鈕 → 滑動到同頁指定區塊」（頁內 #錨點 跳轉）

如果您做了一頁式網站，或希望訪客點擊導覽列的「常見問題」時直接平滑捲動到首頁中段的 FAQ 區塊，只需兩步驟：

1. 先替目標模組命名錨點 ID：點選畫布上的目標模組（如常見問題），滑到右側表單最底部的「全站共用與進階設定」，在「區塊錨點 ID」填入英文小寫名稱（例如 faq）。
2. 在導覽項目或按鈕選取該錨點：打開頁首（或自訂按鈕）編輯器，在「選擇連結目的地」先選中該頁面（例如「首頁」），下方就會自動浮現「選擇頁面錨點」下拉選單，直接點選 #faq 即可！

相關文件