使用 Elementor 就可以設計出精美的 Header 喔! 而且簡單又方便，真的是連我阿罵都會操作。
如果你也想要打造自己版本的頁首的話，試試 Elementor 吧，只需要 3分鐘而且十分的容易。
我們要打造的是有 LOGO 、選單加上社群連結的頁首，就像是下面這個樣子。
很清爽的感覺! 但基本的回到首頁及分類功能都有，除外再加上「社群」或是你想要客制的任何外部連結。
看下去…
【Elementor】3分鐘打造自己的 Header | WordPress網頁編輯器
1️⃣ 從新增 Header 開始
請由 WordPress 後台的 「主題建構器」進入，點一下畫面上的 「Try It Now」
就會看到 Elementor 的主題建構器頁面，請點擊「頂部」然後 Add New ，新生成一個頁首，就可以開始設計我們的 Header 。
2️⃣ 決定功能
在文章中，我們一共會用到 4個 Elementor 部件功能：
- 網站標誌
- 導航選單
- 圖示
- Inner Section
首先先點擊一下「中間的紅色+」，右邊則是 Header Template ，如果你想要從模版開始學習如何設計頁首的話，也是不錯的選擇。
但是本文先做基本的功能介紹，看下去。
選擇中間有 3個洞的架構。「為什麼是要三個?」「剛好這次就用三個啊!」
如果成功的話，應該看到像是下圖這個樣子，在上面藍藍的地方，點擊「右鍵」並選擇「編輯段」。
請在版面配置上做 2項設定。
- 內容寬度 → 全寬
- 拉伸段 → 打開
內容寬度是用來決定畫面的寬度，例如你設定為 1200px 那使用者的電腦上就會以這個寬度來呈現。
但是全寬的話，不管使用者的畫面大小為何，都以 100% 來呈現，也就是說大叔希望任何裝置，都可以看起來都差不多。
拉伸段則是讓背景也呈現一種全寬的狀況。
再來將功能拖曳到「功能欄」上。先將 Inner Section 功能放上去，再放上圖示功能。
在 Elementor 內建 Icon Library 裡面，有不少的圖示免費使用，但也只有基本圖案；推薦有需要的朋友也可以參考：
然後在連結的地方，放上社群的網址，這樣就完成了。
基本上功能篇就完成了，應該會長的像是下面這個樣子喔~
3️⃣ 外觀微調
一般外觀調整會需要修化 CSS 程式碼，但 Elementor 可以讓我們不用麻煩；這次做三個方面的調整，分別為：
- 欄寬度調整
- 垂直置中
- 背景顏色
欄寬度調整 – 在圖案左上角點擊右鍵的「欄編輯」，然後可以看到版面配置的畫面；設計為 20-60-20 的寬度調整。
垂直置中 – 點擊上面紅框中間，右鍵選擇「編輯段」，設定一下 Vertical Align 為「中央」。
背景顏色 – 選取中間的「樣式」，點擊背景裡面的刷子，就可以出現顏色選擇器 ( 背景 )。
大叔使用為【#F3EAE3】這個顏色，此為我的主體設計顏色之一。
微調設計可以依你的需求及喜好來進行，多試試不過的效果和顏色，都會是有趣的過程喔!
4️⃣ 準備發佈
如果你都準備好的話，就可以發佈你的設計，發佈完成了整個網站就會套用這個設計。
- 點擊左下角的「發佈」
- 系統會問「你想在哪裡顯示你的範本?」 我們點擊中間的「新增條件」
- 包含整個網站，如果你有特殊需要的話，也可以在「單頁」或某些條件使用。
- 儲存和關閉
網站最後的樣子
