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,他在頁首的區域,就不會跑去頁面的內容編輯器改,因為他不在內容區域,所以,請到主題選項 (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(常見問題) ,只要是有分類的,都會有喔!

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

側邊欄,可顯示可隱藏!

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

8:07

WordPress Sidebar 側邊欄可以隱藏

第四天的課程結束囉!

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

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

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

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

"Lacinia neque platea ipsum amet est odio aenean id quisque."

— KELLY MURRY
ACME Inc.

"Aliquam congue lacinia turpis proin sit nulla mattis semper."

— JEREMY LARSON
ACME Inc.

"Fermentum habitasse tempor sit et rhoncus, a morbi ultrices!"

— ERIC HART
ACME Inc.
標籤

網站帶路姬 / Erin Lin

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

16 則留言

  1. 感謝Erin Lin老師的教學,聽完後對我這新手還說幫助很多~聽完才知道Avada如此強大!對新人來說超推的~

    1. 哈哈!不客氣喔!很多新手常常想做這、想做那… 卻發現這也改不了、那也改不了,很挫折… Avada 可以改的東西真的很多~ 第一次看好像很複雜,可是其實是有邏輯的,看完我的教學,應該會比較找得到在哪裡改喔~ 你應該很快也會愛上它的~~ 加油!等著看你的網站~~

  2. 第四堂課開始學習頁首頁尾外觀樣式、側邊欄選項設定等學習。Avada可調整的部份很多很細,是很棒的軟體,但相對的使用者要花點時間嘗試並熟悉介面。剛開始摸索感覺稍微複雜點,不過今日的彙整和側邊欄能夠理解,但分類文章的部份我還是有點小亂,我再多複習幾遍,複習不懂再請教妳^_^邊上課邊筆記哈哈,好像學生時代喔!謝謝Erin老師

  3. 發現Avada可以更改的部份很多很細,是很棒的外掛,但相對的功能越細使用者就要多花點時間摸索與嘗試,今天上完第四堂認識了很多功能,對於彙整、標籤、側邊欄設定、頁首頁尾樣式條整有初步的認了和理解,但文章分類和呈現方式的部份我有點小亂哈哈,不過我會再複習,試著整理一套邏輯出來,真的沒搞懂再請教Erin老師!😃

  4. 很感謝老師的分享~學到了很多
    這邊想請問main menu上“聯絡我們”的那個藍色,怎麼改成跟其他的一樣呢?

    1. 在 外觀 > 選單,選單項目都有 Avada Menu Options, 打開後第一個 Menu First Level Style,可以選擇你是要預設的樣子或者改成按鈕。
      這個按鈕的樣式,是繼承一般按鈕的樣式的,設定的地方在 Avada > Theme Options > Fusion Builder Elements > Button Element

  5. 非常感謝老師的分享與教學!
    想請教問老師幾2個問題:
    1.我該如何另外增加黑體等字型呢?
    2.如何將其中一項的目錄(ex聯絡我們)直接連結至外部網址呢?
    謝謝

  6. 非常感謝老師的分享教學!
    想請教老師2個問題:
    1.請問如何增加其他中文字型(圓體、黑體等)呢?
    2.假設我要將其中一個目錄(ex.聯絡我們)直接連結至外部的網址的話,要怎麼設定呢?

    謝謝老師!

  7. 請問若我要去下載free 的WooCommerce Theme,用Avada可以來修改網頁內容嗎?
    還有elementor 和 Avada是一樣的東西嗎? 想用WooCommerce去架商務網站,
    掛綠界金流,初次使用,所以很多問題,謝謝你

    1. 一個網站,只能用一個Theme. 所以,選擇WooCommerce Theme 或 Avada,二選一。
      免費的WooCOmmerce主題,功能很少,不太推薦。建議選擇Avada, Flatsome或Astra。
      全新手的話,目前只有Avada有完整的教學,會節省你很多摸索的時間。未來可能會有Flatsome的主題教學,不過可能還要等一陣子。
      Elementor不是佈景主題,他是一個功能外掛,用來編輯頁面的排版,可以搭配任何佈景主題,不過通常是搭配Astra或OceanWP。
      Avada 預設的頁面編輯器是 Fusion Builder, 如果你拿來改成搭配Elementor,Avada 沒有保證他們的相容性,如果有問題時,客服可能會不幫忙。

      希望這些對你有幫助喔~

    1. 可以試試看用Foo Gallery 這個外掛,如果是Avada的話,也有Gallery這個Fusion Builder的元素可以使用。

發佈留言

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

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

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

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