【Elementor】3分鐘打造自己的 Header | WordPress網頁編輯器

使用 Elementor 就可以設計出精美的 Header 喔! 而且簡單又方便，真的是連我阿罵都會操作。

如果你也想要打造自己版本的頁首的話，試試 Elementor 吧，只需要 3分鐘而且十分的容易。

我們要打造的是有 LOGO 、選單加上社群連結的頁首，就像是下面這個樣子。

很清爽的感覺! 但基本的回到首頁及分類功能都有，除外再加上「社群」或是你想要客制的任何外部連結。

看下去…

【Elementor】3分鐘打造自己的 Header | WordPress網頁編輯器

請由 WordPress 後台的 「主題建構器」進入，點一下畫面上的 「Try It Now」

就會看到 Elementor 的主題建構器頁面，請點擊「頂部」然後 Add New ，新生成一個頁首，就可以開始設計我們的 Header 。

在文章中，我們一共會用到 4個 Elementor 部件功能：

• 網站標誌
• 導航選單
• 圖示
• Inner Section

首先先點擊一下「中間的紅色+」，右邊則是 Header Template ，如果你想要從模版開始學習如何設計頁首的話，也是不錯的選擇。

但是本文先做基本的功能介紹，看下去。

選擇中間有 3個洞的架構。「為什麼是要三個?」「剛好這次就用三個啊!」

如果成功的話，應該看到像是下圖這個樣子，在上面藍藍的地方，點擊「右鍵」並選擇「編輯段」。

請在版面配置上做 2項設定。

• 內容寬度 → 全寬
• 拉伸段 → 打開

內容寬度是用來決定畫面的寬度，例如你設定為 1200px 那使用者的電腦上就會以這個寬度來呈現。

但是全寬的話，不管使用者的畫面大小為何，都以 100% 來呈現，也就是說大叔希望任何裝置，都可以看起來都差不多。

拉伸段則是讓背景也呈現一種全寬的狀況。

再來將功能拖曳到「功能欄」上。先將 Inner Section 功能放上去，再放上圖示功能。

在 Elementor 內建 Icon Library 裡面，有不少的圖示免費使用，但也只有基本圖案；推薦有需要的朋友也可以參考：

• Flaticon – 免費圖示
• Canva – 自制圖示

然後在連結的地方，放上社群的網址，這樣就完成了。

基本上功能篇就完成了，應該會長的像是下面這個樣子喔~

一般外觀調整會需要修化 CSS 程式碼，但 Elementor 可以讓我們不用麻煩；這次做三個方面的調整，分別為：

• 欄寬度調整
• 垂直置中
• 背景顏色

欄寬度調整 – 在圖案左上角點擊右鍵的「欄編輯」，然後可以看到版面配置的畫面；設計為 20-60-20 的寬度調整。

垂直置中 – 點擊上面紅框中間，右鍵選擇「編輯段」，設定一下 Vertical Align 為「中央」。

背景顏色 – 選取中間的「樣式」，點擊背景裡面的刷子，就可以出現顏色選擇器 ( 背景 )。

大叔使用為【#F3EAE3】這個顏色，此為我的主體設計顏色之一。

微調設計可以依你的需求及喜好來進行，多試試不過的效果和顏色，都會是有趣的過程喔!

如果你都準備好的話，就可以發佈你的設計，發佈完成了整個網站就會套用這個設計。

• 點擊左下角的「發佈」
• 系統會問「你想在哪裡顯示你的範本?」 我們點擊中間的「新增條件」
• 包含整個網站，如果你有特殊需要的話，也可以在「單頁」或某些條件使用。
• 儲存和關閉

網站最後的樣子

頁首是一個最常被點擊的位置，所以可以放上「熱門內容」或是想要提高「轉換率」商品。