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

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

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

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

  1. 認識網站的四大區域 ---------------------------------- (3:33 觀念)
  2. 如何修改頁首與頁尾區域 ? ----------------------- (4:24 觀念+實作)
  3. 如何客製化網站的整體樣式? -------------------- (6:43 觀念+實作)
  4. 什麼是彙整頁面?怎麼客製化他的樣子呢?-------- (14:00 觀念+實作)
  5. 如何針對某篇文章或彙整頁面做特別的排版?------- (7:55 觀念+實作)
  6. 什麼是側邊欄?怎麼客製化他的樣子呢?------------ (8:07 觀念+實作)
  7. 如何客製化商品頁面? --------------------------- (4:15 觀念+實作)
1_avada-anatomy-all

第四天的課程要開始囉!

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

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

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

為什麼要分四大區域?

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

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

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

以此類推...

如何修改頁首與頁尾區域 ?

4:24

你還沒有 LOGO 嗎?

網站的 LOGO 是網站的靈魂,他可以幫助訪客記得你的網站,如果你還沒有預算請專業設計師設計 LOGO,可以考慮看看用下面兩個工具來自己製作 LOGO喔!

新版的 Avada 7.0 將網頁排版分成四大區塊:

  • Header 頁首
  • Page Title Bar 頁面標題
  • Content 內容
  • Footer 頁尾

只要到 Avada > Layouts:

  1. 點選 Global Layouts 的 Global Header 就可以去編輯全站共用的頁首。
  2. 點選 Global Layouts 的 Global Footer 就可以去編輯全站共用的頁尾。

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

6:43  

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

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

你想改樣式,找不到設定的地方?

Avada 主題可以調整樣式的地方已經很多,但是也不可能涵蓋100%,如果有些地方你真的很想改樣式,卻找不到可以設定的地方時,可以考慮購買 Yellow Pencil 外掛(買一次終身用,可用在一個網站),就什麼都可以設定囉!他們還有提供線上試用(點選 Try Live Demo 開始)!

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

14:00

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

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

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

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

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

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

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

如何針對某篇文章或彙整頁面做特別的排版?

7:55 非必學!稍微進階的觀念,未來需要時再來參考即可!

Avada 7.0 起。可以透過 Layouts 的條件設定,來為特定的文章、特定分類的彙整頁面、特定商品等等來指定排版與設計喔!

  • 請到 Avada > Layouts,可以透過右上角的表單,填入版型名稱,點選 Create New Layout 去新增版型。
  • 滑鼠移到下面每個版型上面,會看到 Manage Conditions,可以去設定該版型要用在什麼條件下。
  • 到上面 Layout > Layout Section Builder,可以複製想要重複使用的區塊,再加以編輯,給其他版型使用。

關於文章彙整頁面的設計排版:

  • 方式一:可以參考上一個影片的方式,透過 Avada> Options 來設定排版。
  • 也可以透過左邊影片的方式,新增一個 Layout 版型,指定使用在某個文章分類或所有文章分類,就可以囉。

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

8:07 

側邊欄,可顯示可隱藏!

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

WordPress Sidebar 側邊欄可以隱藏

如何客製化商品頁面?

4:15

Avada 7.2 新增 12 個 WooCommerce 購物車元素,讓你輕鬆設計自己喜歡的商品頁面!

雖然 Avada 一直不是以購物網站為主要取向的主題,比較萬用一些,功能非常的多,如果用來做大量商品的購物網站,外掛用的又多的話,需要搭配強大一點的主機,速度才會比較好。

不過,如果你的商品數量少,外掛也不打算用太多的話,Avada 的這個客製化商品頁的新功能,真的非常的強大又方便喔!

只要透過 Avada 的頁面編輯器,就可以插入商品名稱、價格、平價、通知、庫存情況、描述、相關產品、向上推薦產品等等元素到頁面中,再加以排版與指定樣式即可。

 

第四天的課程結束囉!

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

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

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

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

網站帶路姬 / 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