Astra 佈景主題教學 | 頁首編輯器 (Header Builder) 操作應用

這篇文章最後更新日期：2024 年 4 月 26 日 | 作者： Mack Chan

Astra 佈景主題的頁首 (Header) 主要負責網站上方位置的版面配置，例如 標誌 (Logo)、選單 (Menu) 和 各種 WordPress 小工具功能。為了解決一般初學者的煩惱，Astra 佈景主題研發了非常簡單易用的頁首編輯器 (Header Builder)，這可以協助你透過 拖放 (Drag-and-drop) 的操作方式，將相對應的網頁元件，放置在合適滿意的位置之上，這篇教學會提供你一個簡易的操作指引。

相關網站連結：
Astra 頁尾編輯器 (Footer Builder) 教學
(管理關於我們簡介、重點的網站連結、留下訪客的聯絡資料)

Starter Templates 外掛目錄
(查詢外掛詳情，安裝數量、評價和反饋意見)

Starter Templates 線上佈景主題目錄
(查詢網頁版型、適用頁面編輯器、常見問題)

Astra 佈景主題 | 官方網站
(查詢免費版 / 付費版、價目表、會員資訊和更新消息)

快速進入 Astra 頁首編輯器的捷徑：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [頁首編輯器]

瀏覽 Astra 佈景主題
完整教學系列指南目錄

你將會學習得到以下知識和技能：

了解 Astra 頁首編輯器 (Header Builder) 是什麼？
學習管理 3 列式的頁首編輯器
如何 [新增] 網頁元件
如何 [刪除] 網頁元件
如何 [編輯] 網頁元件

Astra 頁首編輯器 (Header Builder) 是什麼？

這次介紹的 3 列式的頁首編輯器，像一個組合櫃，你可以放置不同的網頁元件進去，最基礎必須的是標誌 (Logo) 和選單 (Menu)。另外常見會加上 [社交媒體聯絡] 或 [行動呼籲按鈕] 等等，也可以放上 [公告] 和 [最新產品 / 服務信息]。

總知，你可以在這裡發揮自己天馬行空的創意，也可以簡簡單單只上 Logo 和選單。

如何啟用 Astra 頁首編輯器 (Header Builder)？

區域一：
前往 [網站後台] → [Astra]，介面外觀可能會隨版本更新出現略有差異。

區域二：
點擊 [Dashboard / 控制台] 就能進入設定區域。

啟用頁首編輯器 (Header Builder) 功能

頁面頁首 (Page Headers) 功能在 Astra 佈景主題 (免費版) 可能會有不少 [限制]，但基礎的功能是足夠應付大部分初學者的需要。

各版本的差異：
✅ Astra 佈景主題 (免費版)
✅ Astra Pro 佈景主題 (付費版)
✅ Essential Bundle (付費版)
✅ Growth Bundles (付費版)

如何前往 Astra 頁首編輯器 (Header Builder)？

快速進入 Astra 頁首編輯器的捷徑常見有 3 個方法，其實都是大同小異，選擇一個最方便自己的即可，條條大路通羅馬。

✅ [ 方法一]：傳統式：
請前往 [網站後台] → [外觀] → [Astra] → [頁首編輯器]

✅ [ 方法二]：Astra 專屬控制台：
前往 [網站後台] → [Astra]，[Dashboard / 控制台] → [頁首編輯器]

✅ [ 方法三]：管理工具列：
在最上方的黑色工具列，點擊 [自訂] → [Astra]，[頁首編輯器]

頁首編輯器 (Header Builder) | 管理網頁元件介面

區域一：
點擊 [Elements / 網頁元件]，這裡會出現在頁首編輯器裡，總共的網頁元件，例如有 5 個東西，就會出現 5 個元素。

區域二：
點擊每個 [網頁元件]，會出現獨立的設定功能介面，例如點擊標誌 (Logo)，你可以 上傳公司 Logo、設定公司名稱 和 網頁小圖示 等等。

頁首編輯器 (Header Builder) | 管理外觀設計介面

區域一：
點擊 [Design / 外觀設計]，能夠提供的外觀選項，依據不同的網頁元件而出現不同的變化。

區域二：
你可以控制網頁元素的上方、下方、左方或右方的邊界距離，讓不同的物件有合適的空間，不會推疊在一起或混淆。

3 列式的頁首編輯器 (Header Builder)

區域一：
預覽效果區域可以立即呈現你最近變動的資料，提供視覺化的反饋。

區域二：
欄位設定可以調整上下左右的邊距和內距，也可以調整欄位的高度。

區域三：
新增網頁元件區域，整個頁首 (Header) 會出現的元素，都可以在這裡設定，包含新增、編輯和刪除的動作。

區域四：
點擊 [齒輸圖示] 可以返回左邊的預設設定區域，點擊 [Hide builder / 隱藏編輯器] 會將 3 列式的頁首編輯器隱藏，你可以預覽整個效果。