重點整理
Elementor Pro 的 Header 範本可以自訂網站頁首，不受佈景主題樣式限制：新增「頂部」範本、建立區段與欄位、放入選單小工具並設定背景與滑過顏色，發布時選擇套用到整站或特定頁面。不同佈景主題的相容性不同，發布後請檢查桌機與手機版。
Header Templates 是 Elementor 一個比較實用的功能，通常應用在想要客製化網站頁首選單的部分，比如想要改變網站 Logo 位置、加入網站標語、新增社交連結圖示、增加站內搜尋框區域等，讓網站不會再受限於佈景主題樣式，可以有更多的變化。
另外一提， Header Templates 是屬於比較進階的網站架設操作方式，雖然說可自訂的自由度很高，但相對的也需要建立網站的操作人員具有一定程度的網站專業架設知識，尤其在當前智慧型手機滿街跑的趨勢下，使用客製化的方式建立網站頁首也需注意到手機版網站的呈現方式，這一點必須要跟大家做個提醒。
使用 Elementor 建立網站頁首區域
第一步：點選 Templates->Saved Templates。
第二步：在標示的位置內按下新增。
第三步：版型種類選擇頂部，替版型命名後按下建立版型。
第四步：點擊紅框中的 + 符號，建立一個區域。
第五步：選擇區域欄位數量。
第六步：點選外框標籤圖示，這個位置是設定最外層區塊的樣式。
第七步：按下佈局->拉神段自由選擇->最小高度依據個人需求調整。
第八步：按下樣式->點擊背景->一般->選擇喜愛的背景顏色->這時候攔的背景就呈現出設定好的顏色。
第九步：將 Menu 小工具選單拖曳到欄位中。
第十步：點擊內容->選擇選單名稱->選擇後攔內就會出現該選單設定的連結。詳細選單小工具設定方式，可以參考此篇文章：Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學。
第十一步：按下樣式->Top Level Item->Hover->文字及背景顏色選擇不同的色塊，在滑鼠游標移動到選單文字上時，將會有變色的效果。
第十二步：設定完成後按下發佈。
第十三步：選擇此頁首版型要在網站中哪些頁面呈現，下圖所列出的條件第一、二、四項都是讓整個網站套用此頁首，第三項是只在 WooCommerce 相關頁面套用。
手機版頁首要怎麼調整？
自訂頁首最容易出問題的是手機版，發布前建議切換到編輯器下方的響應式模式逐一檢查：
- 選單收合：選單小工具可以設定在哪個斷點切換成漢堡選單，太多選單項目時建議在平板就收合。
- Logo 尺寸：手機版另外設定較小的寬度，避免把漢堡按鈕擠到下一行。
- 隱藏次要元素：電話、社群圖示等可在「進階 → 響應式」設定手機隱藏。
- 高度：手機畫面小，頁首高度盡量壓低，固定頁首時更要注意。
佈景主題原本的頁首要怎麼處理？
Elementor Pro 的頁首範本在相容的主題上會自動取代主題頁首，但不是每個主題都支援，常見狀況有：
- 出現兩個頁首：主題的頁首沒有被取代，需要在主題設定中關閉頁首，或改用支援 Elementor 主題建構器的主題。
- 樣式互相影響：主題的 CSS 可能影響選單字型或間距，在 Elementor 中明確設定樣式比較保險。
如果還在選主題，Hello Elementor 這類輕量主題本身幾乎沒有樣式，最適合全部交給 Elementor 設計。動手前記得先備份網站，或在測試站製作。
常見問題
Elementor 免費版可以自訂頁首嗎？
Elementor 免費版無法用主題建構器替換整站頁首，自訂 Header 範本並設定顯示條件屬於 Elementor Pro 功能。只用免費版時，可以改用佈景主題本身的頁首設定，或搭配支援 Elementor 的免費頁首頁尾外掛。
Elementor Pro 頁首發布後沒有顯示怎麼辦？
先確認發布時有設定顯示條件，例如「整個網站」；沒設條件的頁首不會套用到任何頁面。條件正確仍沒出現，可能是佈景主題不相容，Elementor 自家的 Hello Elementor 主題相容性最好，也記得清除快取再檢查。
Elementor 頁首可以做成捲動時固定在上方嗎？
可以。在頁首最外層的區段或容器，到「進階 → 動態效果」把「黏性」設為頂部，捲動頁面時頁首就會固定在畫面上方。黏性效果屬於 Elementor Pro 功能，設定後要在手機版確認不會遮住太多內容。
結語
Elementor 頁首模板在 Astra 及 Ocaen WP 這兩個主題上，只要發布後就會自動覆蓋掉主題原本的頁首樣式，這是鵠學苑網站開發人員實測後的結果，但如果是使用別種主題做搭配，有可能會導致錯誤或者顯示無效，因此在使用網站頁首 Templates 前建議先將網站備份，或者使用測試站來製作，這一點特別提醒大家。