讀者權益

在閱讀前,請容許大叔聲明幾件事情:這些事情對您可能蠻重要的:

  • 內容中連結可能有參加聯盟計畫,這並不影響您的購買權利。
  • 聯盟計畫和廣告收入都會做為網站經營基金。
  • 而部份收入將捐給流浪動物基金會。(公益捐款明細)
  • 喜歡我的文章的話,請幫我這樣做,點擊下面的拍手圖示。

#19 Elementor Header 用主題編輯器打造精美的標頭

Elementor 設計出精美的 Header ,而且十分簡單,真的是連我阿罵都會操作。 如果你也想要打造自己版本的頁首的話,大叔使用 Elementor 操作給大家看。

Header 標頭 / 頁首是一個網站上方的元素,通常包含了回首頁、選單頁面、登入註冊等常見的功能,以及品牌 Logo 等設計。儘管功能重要,但視覺上也不能搶了主內容的工作。本篇文章將使用 Elementor 做出一個相似 Notion 網站的 Header ,教你如何打造出精美的 Header。

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

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

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

  • 回首頁
  • 選單頁面
  • 登入註冊 or 呼籲功能( Call To Action )
  • 搜尋框( 網頁內容多 )
  • 其它

  • 以大叔常用的網站為例:Notion方格子Google News

    Elementor Header


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

    所以在設計上,常見的做法有:

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

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

    Elementor Pro 是什麼?

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

    如果你是 WordPress 網站設計新手,推薦你使用 Elementor Pro 這個工具。Elementor 可以幫助你在自架網站上創建漂亮的網頁設計,並且非常易於使用。

    Elementor Pro 3 個特點

    和免費版本相比,它有 3 個漂亮的特點:

  • #1 專業元素功能 – Elementor Pro 提供了更多的元素設計選項,除了讓我們的網站美觀之外,還可以加入許多專業功能,例如說:「表單」、「動態照片或橫幅」、「定價表」等。 這些功能都能讓我們的網站更加豐富和多樣化,大叔喜歡自己架設網站的理由之一就是它是「自由的」,網站的風格和功能都能依我的們的需求來調整。 它可以是個人作品集,也可以是旅遊的記錄中心,也能成為一個電子商場。
  • #2 更多範本和模板 – Elementor Pro 提供實用的功能的同時,還有大量模板可供選擇,豐富的模板庫,涵蓋各種類型的網站,幫助我們使用少少的時間,完成美美的網站。 另外,還可以使用主題構建器,可以計對「Header」、「Footer」或是文章分類等頁面來設計和修改,總之,我們控制著任何大大小小的細節;唯一的問題是,改上癮的你可能會睡眠不足。
  • #3 動態內容 – Elementor Pro 允許使用動態內容,例如,通過從 WordPress 的自訂欄位中獲取內容,或是由自定資料庫來創建動態內容。 動態內容是十分好用的功能,特別對於有大量商品、作品需求的商家,使用像是 Excel 的表格,更快速新增和修改內容,更符合業界快速變化的需求。

  • 最後,Elementor Pro 還提供了更多的設計選項。可以使用更多的字體、顏色、背景圖片等,讓網站設計更迎合客戶需求。而且 Elementor Pro 低資源讓網站可以順暢使用。

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

    使用 Elementor Pro 設計 Header

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

  • Logo
  • 選單
  • 連絡我 Contact sales
  • Log in
  • 按鍵 Try Notion Free
  • ▼ 以 Notion 為例

    Elementor Header


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

    Elementor Header

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

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

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

    Elementor Header

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

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

    Elementor Header


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

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


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

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

    4️⃣ Step4. 功能二 選單

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

    Elementor Header

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

    Elementor Header


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

    Elementor Header

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

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

    Elementor Header

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

    Elementor Header

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

    左邊按鈕

  • 修改按鈕文字 – Login
  • 新增連結,輸入你的註冊/登入頁面的網址
  • 修改樣式如下圖
  • 右邊按鈕 – Try Lashi Free (聽起來有點變態)

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

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

    6️⃣ Step6. 樣式調整

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

    Elementor Header

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

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

    Elementor Header


    7️⃣ Step7. 發佈

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

    Elementor Header

    Elementor Header 模版下載

    Elementor 怎麼買才便宜

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

    Elementor Header

    在每年的 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


    讀者優惠

  • Elementor Pro + Crocoblock 組合包
  • 主機 + Elementor Pro 優惠計畫
  • 「中年大叔的秘密武器,WordPress 網站獲利攻略大揭密!」 – 下一篇給他看下去
  • 大叔專案,上網吃到飽基本月租費466,為原價550之方案,每月折抵84元
    複製優惠碼
    LASHI
    1/1-12/31
    無框行動
    大叔專案,上網吃到飽基本月租費466,為原價550之方案,每月折抵84元
    複製優惠碼
    LASHI
    2022-12-31-2023-12-31
    無框行動
    大叔專案,上網吃到飽基本月租費466,為原價550之方案,每月折抵84元
    複製優惠碼
    LASHI
    -不限時間
    無框行動
    Birthday Grab deals now 50% off
    複製優惠碼
    免優惠碼
    2023-03-21-2023-12-31
    Elementor Pro
    2TB Annual Plan
    複製優惠碼
    無需優惠碼
    2023-06-01-2023-06-26
    Internxt
    30% off
    複製優惠碼
    INTERNXT30
    -不限時間
    Internxt

    目錄:
    #19 Elementor Header 用主題編輯器打造精美的標頭