Elementor Header 主題編輯器 10 分鐘打造精美的標頭

本篇文章將教大家怎麼使用 Elementor Pro 的主題編輯器功能,打造一個網站的 Elementor Header ,快速、簡單又精美。



Elementor Header 是什麼?

Header 是網站的頂部部分,通常包含了標題、標誌、導航菜單等元素。它是網站的重要組件,用於引導用戶、展示品牌和提供導航功能。通過使用 Elementor Pro 的 Header 主題編輯器,你可以輕鬆地設計和自定義獨特而精美的標頭,以提升網站的視覺吸引力和用戶體驗。



Header 怎麼組成的? 有什麼功能?

Header 在設計前,我們要先決定它的需求。一般的 Header 基本上會有 3-4 種功能,其它功能則視網站的需求,我們以 Notion 、 Vocus 的官方網站做為一個設計參考,我們需要這些功能:

  • 回首頁:品牌圖片
  • 選單:網頁連結
  • 登入註冊 or 呼籲功能( Call To Action )
  • 搜尋功能
  • 其它:文字


Notion方格子Google News

Elementor Header|Name



當我們決定好需求、功能後,就可以開始使用 Elementor Pro 的主題編輯器,為我們的網站建立一個自定義的 Header。在開始之前,如果你不認識

Elementor Pro 的話,可以先看一下。



Elementor Pro 是什麼?

Elementor Pro 為 Elementor 的付費版本,它提供更多的元素功能和大量模板,讓你的網站更加專業和美觀。

如果你是剛開始學習 Wordpress 網站設計的新手,我非常推薦你嘗試使用 Elementor Pro 這個工具。Elementor Pro 可以幫助你在自己建立的網站上創建出漂亮的網頁設計,讓你的網站看起來更專業,同時也非常容易使用。

相較於免費版本,Elementor Pro 有三個令人驚豔的特點,讓你的網站更加出眾:

  • 專業元素功能:Elementor Pro 提供了更多的元素設計選項,不僅可以讓你的網站外觀變得更美觀,還能加入許多專業功能,例如「表單」、「動態照片或橫幅」、「定價表」等等。這些功能能夠讓你的網站變得更加豐富和多樣化。我們都喜歡自己建立網站的原因之一就是它的「自由性」,你可以根據自己的需求來調整網站的風格和功能,它可以成為你的個人作品集、旅遊記錄中心,甚至是一個完整的電子商務網站。
  • 更多範本和模板:除了實用的功能外,Elementor Pro 還提供了大量的模板供你選擇,這個模板庫包含各種類型的網站,能夠幫助你在短時間內完成一個美觀的網站。此外,你還可以使用主題構建器來設計和修改「Header」、「Footer」或是文章分類等頁面,你可以掌控任何大小細節;唯一的問題是,你可能會沉迷其中而失去睡眠。
  • 動態內容:Elementor Pro 允許你使用動態內容,例如,通過從 WordPress 的自訂欄位中獲取內容,或是從自定義資料庫中創建動態內容。動態內容是一個非常實用的功能,特別對於那些有大量商品或作品需求的商家來說,你可以像使用 Excel 表格一樣快速新增和修改內容,更加符合業界快速變化的需求。

最後,Elementor Pro 還提供了更多的設計選項,例如可以使用更多字體、顏色和背景圖片來讓網站設計更貼近客戶的需求。而且 Elementor Pro 的低資源消耗保證了網站的順暢運行。

總體來說,Elementor Pro 是一個非常優秀的工具,它可以幫助你快速建立出美觀、易用和專業的網站。如果你是 Elementor 的新手,或者是一個年輕的網站設計師,那麼 Elementor Pro 絕對是你不容錯過的工具!

更多相關內容:





如何使用 Elementor Pro 的主題編輯器設計自己的 Header

在開始之前,我們要先準備一件事情:「網站的品牌 LOGO」。打造一個 Header 標頭頁首,基本上最困難的其實是準備一張 Logo 圖。

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

這篇文章我們不教大家怎麼設計 Logo,需要更多內容的話,可以參考先前的文章「 2023 免費 Logo 設計:不需要花一分錢,打造專業的品牌標誌 【Logo 設計】2022 自己品牌自己做 - 品牌DIY」。




Step.1 開啟 Elementor Pro 主題建構器

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

如果你還沒有 Elementor Pro 的話,可以參考文章下方的讀者優惠。


Elementor Header|Name



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

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

Elementor Header|Name



Step3. 設計功能:回首頁

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

Elementor Header|Name



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

  • 網站標誌
Elementor Header|Name
  • 圖片
Elementor Header|Name



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

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



Step4. 功能二 選單

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

Elementor Header|Name



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


Elementor Header|Name



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

Elementor Header|Name



Step5. 功能三 註冊/登入

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

Elementor Header|Name




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

Elementor Header|Name




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

左邊按鈕

  • 修改按鈕文字 - Login
  • 新增連結,輸入你的註冊/登入頁面的網址
  • 修改樣式如下圖

右邊按鈕 - Try Lashi Free (聽起來有點變態)

  • 修改按鈕文字
  • 新增連結,輸入 Call to action 連結網址
  • 修改樣式如下圖
Elementor Header|Name



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




Step6. 樣式調整

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

Elementor Header|Name



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

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

Elementor Header|Name



Step7. 發佈

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

Elementor Header|Name


Elementor Header 模版下載



Elementor 怎麼買才便宜

#1 尋找促銷活動:黑色星期五


Elementor Header|Name


在每年的 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% 回饋無上限,推薦給大家。

[elementor-template id="27700"]



#4 購買 Elementor 主機 + 編輯器

如果你對網站新手的話,其實選擇 Elementor 主機服務,其實是聰明的作法,每月只要 9.99 美金,主機加上 Elementor Pro 編輯器,細算的話,其實比不少的主機商費用更低,而且綁租一年,其實對於新手來說,是不錯的入門選擇。

而且 Elementor 有提供 30 天的退費政策,不滿意也不用客氣。




#5 加入 mo Studio 工作室的社團

現在加入 mo Studio 的社團的朋友,等於我們的工作夥伴。我們將以不到官網 2 折的折扣,一起學習使用 Elementor Pro。

加入後,Message 給管理員,讓我們告訴你下一步怎麼做。



希望這些提示能幫助您在購買 Elementor 時節省金錢,同時確保您獲得優質的產品和服務。



讀者優惠

  • Elementor Pro 大叔優惠請看 → mo Studio
  • 部落客專屬:用 Notion 打造一個 Wordpress 網站,讓你專心寫,其它問題大叔幫你解決 → mo Studio