【Elementor教學】WordPress佈景主題,做網站必學製作首頁、Menu方法!

【Elementor教學】WordPress佈景主題,做網站必學製作首頁、Menu方法!

學會頁面佈局之後,就可以開始製作簡單的首頁,或是等文章數累積5篇以上再來製作,會有更好的效果唷!

此篇教你透過 Elementor Pro 的模板,做出簡單又美觀的網站首頁及 Menu。

如果你正在試用「免費版」,這篇也會教你透過 WordPress 後台更改外觀設定。

如果你還沒下載安裝 WordPress 頁面編輯器 Elementor 的免費外掛,或是還不知道 Elementor 是什麼,可以參考:
【Elementor 教學】 WordPress 最好用的頁面編輯器,基本操作及設定介紹

16個使用 Elementor Pro,WordPress 頁面編輯器架設網站的理由

「佈景主題」的選擇很重要

✔ 預設的網站外觀,是你「佈景主題」的選擇

在做新的網站時,將一些 WordPress 後台設定設定好後,會選擇一個喜歡的「佈景主題」安裝並啟用,這時候你的首頁與文章顯示的樣子,都會是佈景主題套用後的效果。

✘ 換佈景主題,勞心又耗時

所以佈景主題的選擇非常的重要好的佈景主題,可以免去之後換佈景主題,重新更改網站外觀設定的巨大工程,換佈景主題,可以說是耗時又耗費心力的事情!

但如果首頁及 Menu 選單都是用 Elementor 編輯的,可以免去一些換新佈景主題重新設定的困擾,例如 Menu 選單就不用再重新調整。

✔ 用 Elementor 快速製作屬於自己風格的首頁

而通常架站新手,在架站的初期,會花非常多的時間在外觀調整上,所以這篇就是要教你,如何快速的運用 Elementor 現有的模板,做出美觀的首頁及 Menu。

兩款適合 Elementor 的 WordPress「佈景主題」

這裡介紹兩款 WordPress「佈景主題」與 Elementor 搭配會有不錯的效果,讓你免去太多佈景主題的抉擇當中!

  1. Ocean WP:對 WordPress 初學者相當友善的設計,對 Elementor 有較好的相容性,各式各樣的免費和付費擴充外掛功能,對於搜尋引勤優化很好,而且速度也非常快。
  2. Astra:是一款檔案輕量、快速、可高度客製化而且美觀的主題,適合製作部落格、個人作品集、商業網站或是 WooCommerce 電子商店。

以上兩款雖然功能較簡單,但非常好利用 Elementor 去佈局,輕鬆設計好看的版面。(這個網站目前是使用 Ocean WP 佈景主題。)

好的主題,讓你在架站初期或未來更新、維護,都事半功倍!

用 Elementor Pro 製作「頂部選單」

STEP 1:

進入 WordPress 後台 ➜ Templates (模板) ➜ 【新增】

Elementor菜單設定
可點擊放大,看得更清楚

STEP 2:

選擇【頂部】 ➜ 版型【取名】 ➜【建立版型】

Elementor菜單設定
可點擊放大,看得更清楚

STEP 3:

點選喜歡的模板

Elementor菜單設定
可點擊放大,看得更清楚

STEP 4:

預覽選好的版型 ➜ 點選【插入】

Elementor菜單設定
可點擊放大,看得更清楚

STEP 5:

左邊可以更改設定,設定完後 ➜ 點選【發佈】

Elementor菜單設定
可點擊放大,看得更清楚

完成!

選擇【整個網站】 ➜ 點選【儲存 & 關閉】

Elementor菜單設定
可點擊放大,看得更清楚

安布錄製了「頂部選單」實際操作影片,可以邊操作邊看!

時間軸:

0:33 Elementor 頁面編輯器介紹
0:59 Elementor 有哪些模板可以使用
1:30 Elementor 下載教學
1:43 Elementor Pro的3種價格方案
2:22 先至後台新增選單模板
2:28 調整logo大小
3:03 調整選單區塊大小
3:08 修改下拉選單設定
3:20 修改下拉選單的尺寸與顏色
3:36 修改下拉選單懸停顏色
3:56 修改主選單懸停顏色
4:10 將選單底線隱藏
4:23 將選單區塊垂直內距縮小
4:29 修改選單背景色
5:08 新增下拉選單的邊框
5:30 調整主選單距離
6:00 手機平板裝置呈現方式
6:13 Elementor 對於移動裝置的友善說明與在手機實際呈現的樣子(Iphone XS)
6:35 發布
6:53 插入 Logo 至 WordPress 裡
7:43 結語

用 Elementor Pro 製作「首頁」

STEP 1:

進入 WordPress 控制台 ➜ 【編輯靜態首頁】

Elementor首頁設定
可點擊放大,看得更清楚

STEP 2:

點選【使用 Elementor 編輯】

Elementor首頁設定
可點擊放大,看得更清楚

STEP 3:

新增模板

Elementor首頁設定
可點擊放大,看得更清楚

STEP 4

有3款免費模板可以套用,付費版有較多選擇,點選喜歡的模板

Elementor首頁設定
可點擊放大,看得更清楚

STEP 5

模板預覽,確認好點選【插入】➜ 開始調整!

Elementor首頁設定
可點擊放大,看得更清楚

完成!

WordPress 後台 ➜ 外觀  ➜ 【自訂】 ➜ 【首頁設定】

  1. 網站首頁顯示內容 ➜ 【靜態頁面】
  2. 靜態首頁 ➜ 【首頁】

透過 WordPress 更改網站「外觀」

STEP 1

進入 WordPress 後台 ➜ 外觀 ➜ 【自訂】

Wordpress首頁設定
可點擊放大,看得更清楚

以下是「Ocean WP 佈景主題」的示範,介面根據「佈景主題」的不同,會有所不同。

Elementor外觀設定

  • 網站識別:網站標題、網站說明、網站圖示
  • 選單:調整頂部選單呈現出的頁面、調整順序
  • 小工具:可新增小工具至「頁尾」或「側邊欄」
  • 首頁設定:網站首頁顯示內容,可顯示「最新文章」或「特定頁面」
  • 附加的 CSS:網站中的自定義 CSS,在這裡新增
  • General Options:一般樣式、網站佈局、寬度設定、背景顏色、字型大小、邊框顏色
  • Typography:字型、字體粗細、字體大小、字母間距、字體顏色、標題樣式設定、Menu的字體樣式設定⋯等等
  • Top Bar:頂端樣式設定
  • Header:頂端選單設定、Logo、頁首圖片
  • Blog:文章佈局
  • Sidebar:側邊欄設定
  • Footer Widgets:頁尾工具設定
  • Footer Bottom:可以關閉佈景主題版權說明

常見QA

❶ 如何更改網站名稱?

有兩個地方可以更改「網站名稱」及「網站說明」

  1. WordPress 後台 ➜ 外觀 ➜ 【自訂】 ➜ 【網站識別】
  2. WordPress 後台 ➜ 設定 ➜ 【一般】

❷ 如何放上網站「Logo」?

WordPress 後台 ➜ 外觀 ➜ 【自訂】 ➜ 【Header】 ➜  【Logo】

❸ 如何更改 Menu 的顏色、連結顏色⋯等?

WordPress 後台 ➜ 外觀 ➜ 【自訂】 ➜ 【Header】 ➜  【Menu】

❹ 如何隱藏 Menu 下排的 Blog Title ?

WordPress 後台 ➜ 外觀 ➜ 【自訂】 ➜ 【General Options】 ➜  【Page Title】➜ 【Style】 ➜  【Hidden】

❺ 在外觀設定的「附加 CSS」中,已經加入了字型 CSS,為什麼還是沒改變?

WordPress 後台 ➜ Elementor ➜ 禁用預設字型 ➜ 【打勾】

結語

透過一步一步引導大家創建了自己的首頁及頂部選單,接下來如何使用 Elementor 創建自己風格的首頁,其實非常難用文字敘述的,因為有太多不同的變化,和能做的技巧非常多,安布會用更多影片呈現!

這個網站是用 Elementor Pro 打造的,如果你跟安布一樣,是自己架設並經營網站,對於改善網站外觀、風格營造、排版優化有興趣,可以先試用 Wordpress 免費的 Elementor 頁面編輯器外掛,可以幫助你在文章排版和網站外觀上,有更多的突破!

網站使用工具

知識有價,我們都能透過一點努力,出售技能。

Anbu Course
我是 Anbu
分享實用課程、網站經營

This Post Has One Comment

  1. jace

    很詳細

發佈留言