fbpx

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

菈喜大叔

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

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

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

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

Elementor】打造自己的 Header

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

看下去…

更新於 04/06/2021

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

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

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

1️⃣ 從新增 Header 開始

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

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

2️⃣ 決定功能

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

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

 

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

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

elementor_20210406_4

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

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

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

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

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

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

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

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

elementor

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

elementor

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

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

elementor_Header_

3️⃣ 外觀微調

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

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

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

elementor 欄寬度

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

elementor_Header

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

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

elementor_Header

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

4️⃣ 準備發佈

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

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

elementor

網站最後的樣子

菈喜大叔的 header

總結一下 -Elementor 教學

3分鐘打造自己的 Header

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

 

請幫大叔一個忙

如果內容你覺得還不錯的話,
請分享給一個朋友,讓有價內容給更多人看見。

分享在 facebook
分享在 pinterest
分享在 linkedin

發表迴響

希平方五次間隔學習法

讓你…

忘記單字 你做不到