WordPress 五天自學衝刺班:形象篇
第四天:用 Avada 客製化外觀

認識網頁的主要四大區域+Avada 主題選項全攻略+Avada 網站客製化

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

今日目標:用強大的Avada來客製化網站外觀!

  1. 認識網站的四大區域 ----------------------------------- (3:33 觀念)
  2. 如何修改頁首區域 ? ------------------------------------ (9:11 觀念+實作)
  3. 如何修改頁尾區域 ? ------------------------------------ (7:58 觀念+實作)
  4. 如何客製化網站的整體樣式? ----------------------- (6:43 觀念+實作)
  5. 什麼是彙整頁面?怎麼客製化他的樣子呢?------ (14:00 觀念+實作)
  6. 什麼是側邊欄?怎麼客製化他的樣子呢?--------- (8:07 觀念+實作)
1_avada-anatomy-all

第四天的課程要開始囉!

Avada的客製化選單超多,沒辦法瞬間搞懂沒關係,請把這頁加入書籤,當作參考書隨時回來複習?

認識網站的四大區域:頁首、內容、側邊欄、頁尾

3:33 一定要看喔!幫自己的網站換上一個獨特的 LOGO 圖片吧!

為什麼要分四大區域?

區域是帶路姬自己幫大家區分的,為了幫助新手比較好猜測,你想改的東西「可能」從哪裡改?

假如你想改 Logo,他在頁首的區域,就不會跑去頁面的內容編輯器改,因為他不在內容區域,所以,請到主題選項 (Theme Options) 裡去找。

假如你想改頁尾的小工具區域,你也不會跑去頁面的內容編輯器改,他不在內容區域,所以請到主題選項去找。

以此類推...

如何修改頁首區域 ?

9:11

頁尾 = 頁尾小工具區 + 版權聲明區。

和頁首區域 (Header) 相關的客製化設定,大概在這些地方可以找到:

  • Avada > Theme Options > Header: 控制頁首區的背景色等等。
  • Avada > Theme Options > Logo:上傳與設定 Logo 圖片
  • Avada > Theme Options > Menu:修改選單的樣式
  • Avada > Theme Options > Social Media:社群圖示按鈕

Avada 本身就有增加社群圖示的功能:

  1. 先到「 The Options > Social Media Icons」:新增你有的社群帳號。
  2. 在「Theme Options > Header」:設定要不要顯示 Social Links (icons)。
  3. 在 The Options > Social Media >Header Social Icons:設定社群圖示的樣式。

如何修改頁尾區域?

7:58 

頁尾 = 頁尾小工具區 + 最下面的智慧財產權區。

1. 頁尾小工具區:

  • 樣式都在「 Theme Options > Footer」來改。
  • 內容則在「外觀 > 小工具」去增加,增加到 Footer Widgets 的欄位。

2. 頁尾智慧財產權區:

樣式和文字都在 「Theme Options > Footer」修改。

如何客製化網站的整體樣式?

6:43  

Avada 有些設定是「全站性」的改變整體的樣式

  • Theme Options > Color: 設定一個主要色系。
  • Theme Options > Page Title Bar: 不管哪種內容類型,每個頁面都會有自己的頁面標題。頁面標題的樣式在這裡設定。
  • Theme Options > Typography:各種「內容」部分的文字相關的設定,像是標題大小、內文字體大小、字體粗細等等。

什麼是彙整頁面?怎麼客製化他的樣子呢?-

14:00

頁面有兩種,一種是站長自己新增的,另一種是WordPress 自動匯集相關性內容,自動整理產生的。

舉例來說:文章如果有一個分類叫「美食」,然後你在主選單裡,加入這個分類到選單裡,你覺得他會怎麼呈現呢?

因為你並沒有自己去「新增一個頁面」,而是讓WordPress替這個分類自動產生一個頁面,這種頁面叫做「分類的文章彙整頁面」。

另外一個例子是,一個網站裡可能有很多作者,我們並沒有幫每個作者新增一個頁面去列出他寫的文章,可是WordPress自動幫你整理出來,產生一個「作者的文章彙整頁面」。

這些頁面都在你新增分類或新增作者時,就自動存在了,只是你要知道怎麼讓訪客連結到他們。

  • 像是某個分類的文章彙整頁面:從「選單」去新增「分類」到選單中,就會新增這個「分類的彙整頁面」的連結到選單中,讓訪客連結到它。
  • 從主題選項,去設定要不要顯示 Blog Meta(文章摘要資料:作者、日期等等),如果有顯示,這個作者名稱就會直接連到作者彙整頁面。

不只文章分類和作者會有彙整頁面喔!像是Portfolio 作品、FAQ(常見問題) ,只要是有分類的,都會有喔!

什麼是側邊欄?怎麼客製化他的樣子呢?

8:07 

側邊欄,可顯示可隱藏!

這個影片教你怎麼隱藏側邊欄,可以全站式隱藏,也可以單獨每個頁面各自隱藏喔!(這也是只有Avada才能做到喔!)

WordPress Sidebar 側邊欄可以隱藏

第四天的課程結束囉!

今天真是辛苦大家了! (也辛苦我了... ?) 今天的內容,比較像是參考書,大家可以一邊客製化、一邊來這邊找點方向。如果你喜歡帶路姬的教學服務,請大家多分享,讓我有機會可以賺到一點回饋獎金,可以鼓勵我寫更多有價值的教學分享給你們,謝謝你們!

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

你喜歡這樣的學習方式嗎?

這裡需要你的真實見證! 成功時,別忘了留言告訴我喔!- 網站帶路姬

標籤

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
close-link
Close