Elementor Header | 精美的標頭怎麼做? 3 個模版

Header 標頭 / 頁首就是在網站上面，那個不管你滑到哪都看的到的東西，整體來說，功能很重要，但視覺上，又不能搶了主內容的工作。

所以大叔將使用 Elementor 做幾個常見的 Header 的樣式給大家參考。

一個 WordPress 網站的 Header 怎麼組成的?

大叔是一個功能取向的男人，所以這篇文章會以先「功能」後「設計」的順序，與大家分享。

一般的 Header 基本上會有 3-4 種功能，其它功能視網站的需求：

以大叔常用的網站為例：Notion、方格子、Google News。

接下來，我們不太可能在頁首上直接寫上「回首頁」就好，這樣有點 Low ，但事實上在網路元年，確實有些網站是這樣做的。

所以在設計上，常見的做法有：

打造一個 Header 標頭 / 頁首，基本上最困難的是準備一張 Logo 圖，看得出來網站的頁首一般都是「橫式」，而 Logo 怎麼做呢? 在我先前的文章「【Logo 設計】2022 自己品牌自己做 – 品牌DIY」中說明：首頁標誌尺寸大概為 180×60 寬度為 180 px 高度為 60px，比例約為 3：1，當然這不是硬性的設計標準，有些品牌確實可能做到 4：1 左右的比例。

如果你現在沒有自己網站的 Logo 的話，網路上有不少「免費」的 Logo 產生器，但大叔推薦你使用 Canva 線上設計軟體，自己做一個，難度不高，而且未來有圖片設計的需要的話，還可以延續使用，減少不斷學習新軟體的時間浪費。

使用 Elementor Pro 設計 Header

準備好 Logo 後，我們開始進入操作教學，目標使用 Elementor 做出一個相似 Notion 網站的 Header ，一共需要下述的步驟。

▼ 以 Notion 為例

1️⃣ Step.1 Elementor Pro 的主題建構器

從 WordPress 的後台點擊 Elementor → 主題建構器 ，如果你找不到「主題建構器」的功能不要害怕，你不是中毒了，主題建構器是 Elementor Pro 其中一項功能，你必須安裝 Pro 版本以及認證許可證 ( License Key )。

2️⃣ Step2. 由「頂部」並新增 Add New

進入頁面後，在左側的功能欄找到「頂部」並點擊，再按一下右上角的 Add New，就會進入編輯頁面，就可以開始設計我們的 Header 。

3️⃣  Step3. 功能1 – 回首頁

進入編輯頁面後，映入眼簾的是一堆的 Elementor Pro 的 Header Template ，所以你也可以在當中找到喜歡的模板，直接使用不用廢話，當然你很可能在當中找不到喜歡的風格，建議你都使用看看。

右上角關閉視窗，新增一個 Logo ，你有幾種選擇：

網站標誌

圖片

兩種都可以使用，將其功能圖示拖曳到右側的編輯視窗上，如果沒有圖片出現，表現你沒有設計網站標誌，所以我們做一下設定。

需要上傳一下 Logo ，從左上角的「漢堡」圖示進入選項，選擇「網站設定 → 網站識別」，最後上傳你的 Logo 到「網站標誌」，然後更新，這樣就可以看到圖片了。

4️⃣ Step4. 功能二 選單

在編輯視窗的左上角，點擊「新增欄位」，將功能框「導航選單」元素拖曳進入新增欄位上。

新增後，就看得到選單的 Menu 的選項，如果沒有內容的話，表示你需要新增一個「Menu」，在「選單」的下方，可以直接點擊 Go to the ”Menus screen” to manage your menus.

進入頁面後，我們先新增一個選單，設定選單的名稱，大叔習慣設定「自訂連結」做為選單項目，我們新增 3 個項目：Product、Download、Price。

5️⃣ Step5. 功能三 註冊/登入

一樣我們需要新增一個欄位，並將「Inner Section」這個元素拖曳到新的欄位上。

接下來將「按鍵」，拖曳到內部段的兩個欄位上。

左邊的按鍵元素，我們要做下面幾個動作：

到這裡，我們算是把功能都放上去了，再來調整所有的樣式內容。

6️⃣ Step6. 樣式調整

由 Notion 網站的 Header 設定看來，高度為 80 px ，左右有 60px 的留言，Logo 高為 30 px ，以這樣大方向的來為我們的 Header 調整一下。

到這裡終於完成了，大致上完成後樣子就像下面，整個操作流程下來，其實可以發現 Elementor 並不難學習，而真正花費時間的是在調整「樣式」。

以前如果有學過網頁設計，它們基本上是由 HTML 和 CSS 程式碼組合而成的成果，現在感謝有 WordPress 和 Elementor 這類的編輯器，不需要懂程式撰寫，也可以完成自己的網頁。

7️⃣ Step7. 發佈

完成後，只需要發佈設計，讓整個網站套用後，整個網站都可以看到美美 Header。

Elementor Header 模版下載

Elementor 怎麼買才便宜

1️⃣ 一年一次的黑色星期五

在每年的 11 月的月底，是美國的 Black Friday ，通常我常用的數位工具的軟體，都會有年度大折扣，最高來到 30% off ，簡單來說，黑色星期五對於 Elementor 來說，幾乎是唯一一次的折扣時間，所以如果你要購入便宜的 Elementor Pro 的話，千萬不能錯過這天。

2️⃣ 和朋友合購

合購其實十分的聰明，因為最便宜的 ESSENTIAL PLAN ，一個網站 / 年 需要 49 美金，而 ADVANCED PLAN 三個網站 / 年 只需要 99 鎂，相當一個網站只需要 33 鎂，比 ESSENTIAL PLAN 便宜了 34%。

更不用比 EXPERT PLAN 或是 AGENCY PLAN，不過有一點小問題，Elementor 是綁購買的用戶的帳戶，並非一個數位的「許可證」，也就是說，這個人需要一個後台的帳號進入別人的網站後，才能綁「許可證」，如果這個人不是熟人，那可能有一些安全問題，所以推薦選擇信任的人或是朋友一起購買。

3️⃣ 現金回饋信用卡

由於 Elementor 為國外公司，所以台灣的信用卡的時候，需要額外支付一筆國外刷卡

服務費用，如果你使用「高現金回饋」的信用卡，就可以最大程度抵銷這筆費用。

大叔是使用聯邦的「賴點卡」，國外刷卡 3% 回饋無上限，推薦給大家。

Line Bank 快點卡

▶國內消費現金回饋 1%
▶國外消費現金回饋 2.8%

• 立即發點數
• 免費跨行轉帳 88 次
• 免費 ATM 跨行提款 5 次
• 回饋上限 500 點
• 全通路基本回饋國內 1%、海外 2.8%，指定通路限時限量送茶葉蛋或加碼回饋 10%。
• 快點便利購」週一至週五，全家、7-ELEVEN、萊爾富、momo 購物網或 LINE 禮物擇一
• 「快點出遊趣」週五至週日，全家、7-ELEVEN、麥當勞、iParking 或 Autopass 擇一

更多內容

更多資訊

立即辦卡

聯邦銀行VISA賴點卡

▶國內消費現金回饋 2%
▶國外消費現金回饋 3%

• 開卡後30 天內，刷卡滿888 就送 Line Point 300 點。
• 指點網路通路回饋最高 10%
• 食在厲害 – 新戶外送訂餐、速食餐飲每月消費達 2000 元最高享 LINE POINT 1500 點。
• 有購好買 – 週三 LINE PAY 綁定賴點卡享指定網購最高5%

更多內容

更多資訊

立即辦卡

匯豐現金回饋御璽卡

限新戶
▶國內消費現金回饋 3.22%
▶國外消費現金回饋 4.22%

• 現金回饋御璽卡符合資格最高享海外4.22% 國內3.22%，回饋上限10,000
• 大方現金回饋：
  • 國內消費享現金回饋1.22%、海外享現金回饋2.22%．無消費門檻、無級距門檻、回饋無上限
• 厲害再升級，3種回饋方式任您隨心換
  • 折抵帳單金額： 每期自動折抵，或帳戶累積後一次折抵
  • 現金回饋轉換購物金最優加碼10%：回饋金可自由轉換至電商購物金，指定兌換門檻最優加碼10%
  • 兌換航空哩程：回饋金1元 = 2 哩；無兌換門檻， 適用於華航（天合聯盟）／亞洲萬里通／新航（星空聯盟）/長榮航空（星空聯盟）哩程，透過3大航空聯盟可兌換共67家以上航空公司獎勵機票
  •  

更多內容

更多資訊

立即辦卡

4️⃣ 主機+編輯器

如果你對網站新手的話，其實選擇 Elementor 主機服務，其實是聰明的作法，主機加上 Elementor Pro 編輯器，一年費用僅需 99 美金，相當一個月只要 8.25 美金，比不少的主機商費用更低，而且綁租一年，其實對於新手來說，是不種的入門選擇。

缺點是目前沒有主機的升級方案，隨著網站內容變多，你有很大的機率需要更大容量及網站速度的主機，所以提供使用者「無痛升級」是非常重要的事，但如果是個人或是公司的「形象」網站，就蠻適合 Elementor 主機。

https://be.elementor.com/visit/?bta=13598&nci=5343