Avada教學 :18 個網頁製作課程(WordPress主題)

2
1981
Avada教學 :18 個網頁製作課程(WordPress主題)
Avada教學 :18 個網頁製作課程(WordPress主題)

這篇文章是一篇,使用 WordPress 的 Avada 佈景主題,從 0 到 1的完整 Avada教學。

跟著文章動作,你將學會 WordPress 形象網站的 網頁製作,不但是客製化且支援響應式(手機版),相信會容易上手的。

建議在開始之前,先看一下 這篇文章 完成前置作業,如:網址&虛擬主機申請、WordPress安裝、SiteGround教學等 .. ,整篇文章才串的起來。

若有任何操作上問題,歡迎在下方留言區,或 我的社團 發問,我會盡力的為你們解答。

若對 WordPress 後台還不是很了解,可以看我寫的 WordPress教學,會幫助你更了解 WordPress 操作(本篇文章看完再回去看也沒關係,不會有影響)。

本文章節如下:

  1. Avada 主題介紹
  2. 安裝 Avada 主題
  3. 選擇模板
  4. Fusion Builder Live 教學
  5. 更改Logo
  6. 更改頁首
  7. 更改選單
  8. 佈局觀念
  9. 新增頁面
  10. 自訂佈局
  11. 頁面設定
  12. 更換輪播圖
  13. 頁面標題欄
  14. 側邊欄調整
  15. 全局使用
  16. 更改頁腳
  17. Avada 功能面板
  18. 開始起飛

好,話不多說,我們開始學習之旅吧:)


1. Avada 主題介紹

Avada教學 :Avada主題介紹

Avada 是一款 WordPress 的佈景主題,截至目前已經狂銷 550,000 套以上,在 WordPress 主題上是個絕無僅有的數字 ..

你可以用它架設個人或公司網站、部落格、媒體網站、購物網站等範例 ..

原因是,它有超棒的客製化網頁設計功能,我列出幾個優點:

  • 超多展示網站,可一鍵安裝
  • 有拖拉編輯器,可客製化網頁設計
  • 超多功能元件,可完成需求
  • 與 WordPress 多數熱門外掛相容
  • 很棒的客服體驗

在之前接案的過程 .. 發現,大多數客戶不太曉得,自己想要怎樣的設計,或是 .. 找到很雷的設計師。

與其這樣,不如直接使用 Avada 上的展示網站(超過 60+ 個展示推薦,下面只列舉部分),在做部分修改,也可達到客製化設計。

Avada教學 :Avada展示網站
Avada 展示網站

它的使用元件,也真的讓人歎為觀止,重點是佈景主題速度,一點也沒被影響。

Avada教學 :Avada客製化面板
Avada 客製化面板
Avada教學 :Avada使用元件
Avada 使用元件

所見即所得的線上編輯器,也是新版加上來的特色,整個也很實用,可線上切換電腦、平板、手機方便檢視,如下圖:

Avada教學 :Avada線上編輯器
Avada 線上編輯器

少不了的還是放上它的熱銷數字 .. ,有這麼多人購買,代表它的好口碑,和使用分享教學也比較豐富:)

Avada教學 :Avada熱門銷售
Avada 超熱門銷售

驚人的銷售數字下,是有超多可客製化元件 & 應用模板 & 佈景主題速度等 .. 特色,所以熱銷是有原因的。

下一章節,我會帶著大夥兒,開始安裝 Avada 主題,Let’s GO!


2. 安裝 Avada 主題

Avada教學 :安裝 Avada 主題

首先,前往 Avada 佈景主題,點擊「 Buy Now 」,進行購買流程,也有線上預覽的功能,可以先觀看。

Avada教學 :Avada 佈景主題
Avada 佈景主題

購買完成後,前往 downloads 頁面,會發現剛買的 Avada 主題,然後點擊 「 Download 」按鈕,下載「 WordPress 主題檔案 」,如下圖:

Avada教學 :下載主題文件&認證文件
下載主題文件&認證文件

回到 WordPress 後台,到 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題,安裝剛下載的 Avada 主題檔案(副檔名是zip),安裝成功後就直接「 啟用 」。

啟用成功後,前往 Avada > Registration,往下滑點擊「 Generate A Personal Token(生成個人憑證)」,如下圖:

Avada教學 :Avada 註冊面板
Avada 註冊面板

接著「 命名憑證 」,然後照下圖「 勾選允許權限 」,完成後就「 確認送出 」,開始生成憑證號碼。

Avada教學 :創造憑證頁面
創造憑證頁面

成功生成後,記得複製憑證密碼,打勾確認會妥善保管密碼,最後點擊確認。

複製憑證密碼
複製憑證密碼

回到 WordPress教學 後台,把剛複製的憑證密碼,貼至憑證註冊框,點擊 Submit,完成後會出現打勾的符號,代表憑證已經註冊成功!

Avada 安裝流程,到這裡也差不多要完成了,只剩最後佈景主題,需安裝搭配的外掛,所以前往 Avada > Plugins,整個流程如下:

Avada教學 :啟動憑證密碼&前往 Avada 外掛安裝
啟動憑證密碼&前往 Avada 外掛安裝

開始安裝 Avada 必要外掛,分別是「 Fusion Core 」和「 Fusion Builder 」,是用來做頁面編輯的工具。

安裝 Avada 必要外掛
安裝 Avada 必要外掛

最後,我們去前台網站看一下,是否Avada已安裝成功,答案是 .. BingGo,搞定!

一個 Avada 的「 經典版 」模板主題,呈現在我們面前:)

Avada教學 :Avada 經典版出現~
Avada 經典版出現~

這章節你已經學會了,如何安裝+啟用 Avada 佈景主題,但 .. 美中不足的是,可否把網頁設計的更美?

下一章節,我會繼續 Avada教學,教你如何使用高質感模板,往下看囉:)


3. 選擇模板

Avada 有內置許多高質感的模板(目前有超過 60+),可以直接引入使用,節省要重新設計的時間,我來教大家如何操作。

首先前往 Avada > Demos,會發現有非常多模板,這邊先跟著我用「 Food 模板 」學習(之後都可以做更換),然後點「 import 」安裝。

Avada教學 :安裝喜歡的模板~
安裝喜歡的模板~

接著會跳出小視窗,先安裝模板相關外掛( Food 模板是表單外掛&輪播外掛,必裝),再點選 All,匯入模板資料文件,最後點「 import 」匯入。

Avada教學 :安裝模板相關外掛&資料
安裝模板相關外掛&資料

等待模板安裝完,會發現 .. 一個很美的食物主題出現了,話說 .. 還滿愛這種風格的:)

Avada教學 :Avada 的 Food 模板~
Avada 的 Food 模板~

當模板套用後,若是想要改 網站設計 ,要如何操作呢?

其實,Avada 有一個「 主題選項 」,讓你調整 Logo、選單、頁面、文章列表、版面等 .. ,等於是可以客製化自己的網站,如下:

Avada教學 :Avada 超多調整功能~
Avada 超多調整功能~

除了一般文章編輯功能,也提供了可線上編輯的功能,超棒的所見即所得:)

Avada教學 :Avada 線上編輯器
Avada 線上編輯器

有了所見即所得編輯器,在網頁設計的速度上,又變的更快了許多!

Avada 除了能夠讓你客製化頁面+版面外,也提供許多元件,讓你在 網站設計 時,能夠直接套用,即可立馬使用:)


4. Fusion Builder Live 教學

Avada 編輯器:Fusion Builder Live

Fusion Builder Live 是 Avada所見即所得編輯器,可加速 網站設計 流程,這章節會做個介紹。

首先,選擇一個頁面 Or 文章,進入後會發現面板有變化,這是 Avada 主題開發的編輯器,有 Fusion Builder(一般版)& Fusion Builder Live (線上版)兩種。

Avada教學 :Avada 編輯器, 網站設計
Avada 編輯器, 網站設計

我自己的使用方式,使用「 線上版 」設計,「 一般版 」當作輔助使用。

  • Fusion Builder Live(線上版):所見即所得,加速 網頁製作 流程。
  • Fusion Builder(一般版):可用來了解當前頁面的組成方式。

點擊上圖「 Fusion Builder Live 」按鈕,會看到頂端有一排的工具列。

由於功能滿多的,可依照號碼,對照下面說明,如下:

Avada教學 :功能介紹

頂端工具列,功能介紹:

  1. 切換側邊欄(Toggle Sidebar):有分「 全局 / 頁面 / 元件 」,可供頁面調整。
  2. 引用排版&元件(Library):可引用公版&自訂佈局,和自訂元件。
  3. 裝置切換(Responsive):切換不同裝置瀏覽。
  4. 模式切換(Toggle WireFrame):有一般版&線上版,可供 網頁製作 設計。
  5. 線上預覽(Preview):發佈文章前,可以先預覽一下。
  6. 發佈&草稿(Publish & Draft):切換頁面模式。
  7. 儲存(Save):保存內容。

這邊對側邊欄(Toggle Sidebar)做個介紹,當點擊它後,會有 3 個分頁可以切換:

分別是全站樣式(更改整個網站)頁面樣式(更改當前頁面)元件調整(更改指定元件)

Avada教學 :Avada Fusion Builder Live

上面有列出來的,都算是比較常用的,和一些實用觀念,可以幫助你上手。

下一章節,我會教大家如何「 更改Logo 」,我們接著看下去 ..


5. 更改Logo

Avada 更改Logo

導入了 Avada教學 模板,首先要做的,當然就是換上自己美美的 Logo 啦!

首先,前往要編輯的頁面,若從前台前往,就到頁面上方,點擊「 Fusion Builder Live 」即可。

Avada教學 :頭部介紹

點擊後,會前往 Avada 線上編輯器,把滑鼠移至頭部區塊,點擊「 Edit Logo 」。

然後,在側邊欄更換新 Logo & Logo 連結,最後按「 Save 」儲存,如下圖:

側邊欄往下滑,有「 Retina Mobile Logo(更換手機版Logo)」和其他 Logo,也一併更換(礙於圖片長度,故無全部截圖)。
Avada教學 :Avada 更換 logo

接著在側邊欄,返回上一頁,前往「 Logo > 網站圖標 」,進行圖標更換。

Avada教學 :更改網站圖示 favicon
Avada 更改網站圖示 favicon

這樣我們的 Logo 就更換完成啦~是不是很方便!

下一章節,會教大家如何更換頁首樣式(Header),把它變成自己喜歡的樣子:)


6. 更改頁首

Avada 頁首更改

這章節會教大家「 更換頁首 」,也就是網站最上面的那一塊,我分成 4 小部分的課程教學:

  1. 頁首佈局(Header Content)
  2. 樣式設定(Header Styling)
  3. 置頂頁首
  4. 更改社群(頁首右上方,需到 Avada 功能面板調整)

把滑鼠移到頁首,點擊「 Edit Header Layout(編輯頭部佈局)」,側邊欄會出現,可修改的項目,我們對應下面的教學修改。

Avada教學 :更換頁首
Avada 更換頁首

1. 頁首佈局(Header Content)

點擊側邊欄「 頁首 > Header Content 」,選擇 Logo 在左側的頁面佈局(依個人喜好),選好後儲存,如下圖:

還可更換右上角的區塊(默認是社群連結),可以換成聯繫方式,或都不顯示。

Avada教學 :頁首佈局
更改頁首佈局

2. 樣式設定(Header Styling)

點擊側邊欄「 頁首 > Header Styling 」,這邊可更改樣式,如:內距、背景顏色、文字顏色等 .. (側邊欄比較長,僅擷取部分)。

Avada教學 :更改頁首樣式
Avada 更改頁首樣式

3. 置頂頁首

置頂頁首:簡單來說就是當螢幕往下滑時,頁首會固定在螢幕上方,是一種特效。

系統默認是開啟,可自由調整,也可針對平板、手機,客製化是否開啟此功能,還可修改置頂頁首的顏色、內距、字體大小等 .. ,如下:

Avada教學 :Avada 置頂頁首
Avada 置頂頁首

4. 更改社群

頁首右上方的社群媒體,點進去似乎不是正確路徑,要如何修改呢?

Avada教學 :更換社群
Avada 更換社群

我們前往 WordPress 後台,點「 主題選項 > Social Media > Social Media icons 」,在這就能新增 / 刪除社群&連結囉!

Avada教學 :更換社群&連結
Avada 更換社群&連結

這章節學習了如何更換頁首,下一章節我會教大家如何更換選單,把它變得更完整。


7. 更換選單

更換 WordPress 選單

這章節會教大家「 更換選單 」,我把內容分成 3 個小部分教學:

  1. 新增子選單
  2. 調整選單樣式
  3. 管理選單位置

1. 新增子選單

使用 Avada 線上編輯器(Fusion Builder Live),滑鼠經過頁首,會出現工具列,點擊「 Edit Main Menu(編輯主選單) 」。

Avada教學 :更換 Avada 選單

點擊後,會自動前往 WordPress 後台的選單管理,依照下面流程新增一個文章類型的選單,記得要確認正在編輯的選單是「 Main Menu(主選單)」,如下:

Avada教學 :WordPress 後台選單更換

新增後,再回到前台,新的子選單就出現了:)

Avada教學 :wordpress子選單,新增成功

2. 調整選單樣式

Main Menu(主選單) Mobile Menu(手機選單),這兩個是選單樣式,主要更改的地方。

Avada教學 :更改選單樣式

首先,點擊側邊欄的「 選單 > Main Menu 」,這裡可修改主選單樣式,內容滿多種的,如:間距、字體大小、顏色等 .. 。

我把自己用到的,用中文標示出來(你也可以依自己喜好調整),修改完成後記得儲存,如下圖:

Avada教學 :主選單調整

再來,點擊側邊欄的「 選單 > Mobile Menu 」,這裡可修改手機版選單樣式,如:選單風格、項目高度、字體大小(Font Size)、顏色(Font Color)等 ..。

Avada教學 :調整手機選單樣式
Avada 調整手機選單樣式

如此一來,選單樣式也調整差不多了,變得更美了:)

3. 管理選單位置

Avada 主題有許多選單位置,可在 WordPress後台的「 外觀 > 選單 > 管理選單位置 」調整,如下:

補充:這邊先依照系統預設即可,若未來有其他選單想更換,可以來這調整。

Avada教學 :wordpress管理選單位置
wordpress管理選單位置

想學習更多「 WordPress 前後台 」如何使用,這有完整教學 icon-arrow-down  icon-arrow-down 

WordPress教學 :25個後台課程(含安裝+主題推薦)

看完這章節,對 Avada教學 如何更改選單,也變得更上手了吧!

下一章節,會教大家 Avada 主題,很重要的佈局觀念,若想製作客製化網頁,這一定要懂 ..


8. 佈局觀念

Avada 客製化網頁設計

想使用 Avada教學 ,進行客製化網頁設計頁面嗎?

一個頁面的組成,主要由這 3 個組合而成,由大到小層層包裹,依序是:

  1. Container(容器)一個區塊的最外層,裡面會包不同數量的 Column。
  2. Column(欄位)包在 Container 內,可自訂多個 Column,數字湊成 1,即形成一排。
  3. Element(元件)包在 Column 內,可自訂多個 Element,如:文字、圖片等 .. 工具。

可以把它想成一部車子,最外層有車殼(Container),裡面有 4 個位置(Column),位置上有人(Element),是不是容易了解許多:)

也可以隨意找個頁面,然後點擊上方「 Toggle WireFrame 」即可切換模式,方便瀏覽網站架構,如下:

Avada教學 :佈局觀念
Avada 佈局觀念

上圖的「 欄位比例 」,若是一行的 Column,分數加總為1,即形成一排,超過則會往下排列,以此類推。

一個佈局的新增,會是「 Container > Column > Element 」,但 Avada 都大致做好了,我們只要負責引入即可,如下:

Avada教學 :新增區塊
Avada教學 :佈局種類
Avada佈局種類

或是用所見即所得,直接在想要的地方,新增&編輯區塊即可,如下:

Avada教學 :Avada新增區塊
Avada新增區塊

這章的 網頁製作課程 ,大家應該學了不少佈局觀念了,有了這些觀念,客製化一個網頁設計,相信也容易上手許多。

下一章節,會實際帶大家新增一個頁面,接著看:)


9. 新增頁面

Avada新增頁面

在這篇,會分享如何引入其他 Avada 模板的排版,並改成自己想要的內容。

我把內容分成 4 個小步驟教學:

  1. 匯入佈局
  2. 更改內容
  3. 新增元件(Element)
  4. 刪除不要區塊

Step1:匯入佈局

首先前往 WordPress 後台,使用 Avada 的「 Fusion Builder Live 」新增一個頁面。

wordpress後台:新增頁面

點擊「 Library 」,選取「 Avada Bakery 」主題模板,並匯入「 About 」頁面佈局,如下:

Avada教學 :匯入其他模板的佈局
Avada 匯入其他模板的佈局

Step2:更改內容

試著改看看內容,首先滑到想更改的區塊,點擊更改icon,側邊欄會顯示可更改的內容,我們隨意更改文字~

Avada教學 :wordpress更改文章內容
Avada 更改文字

再來改一下按鈕,滑鼠滑至按鈕上,點擊更改icon,更改按鈕連結、文字等 ..

Avada教學 :更改按鈕
Avada 更改按鈕

Step3:新增元件

再來更改一下右邊的區塊,模板默認沒有元件,所以我們來新增一個元件,如下:

Avada教學 :新增元件

點擊後會出現,超多種 Avada教學 元件,方便 網站設計 ,我們來新增一個「 image 圖片 」元件,如下:

Avada教學 :多種元件

然後依照下圖流程,新增一張圖片,側邊欄可修改多種狀態,最後按「 Save 」儲存。

Avada教學 :網頁設計

最後來看一下區塊修改的成品,恩 .. 看來改得還不錯:)

Avada教學 :區塊修改完成

Step4:刪除不要區塊

若是有不要的排版需要刪除,要如何操作呢?

只要把滑鼠移置不要的區塊上,點擊「 Delete Container 」即可刪除。

Avada教學 :刪除區塊

如此一來,就可以充分利用 Avada教學 其他模板的佈局了,除了不用重複造車,也省了許多時間。

下一章節,將會分享,若是你想從 0 開始,自己新增一個佈局,要如何操作 ..


10. 自訂佈局

Avada 自訂佈局

延續上一章節,除了引入現有模板排版,從中修改的方式。

若是打算自己從 0 到 1,新增一個客製化排版,要如何操作呢?

增加 container & column

我們在上一章節修改的區塊下面,再新增一個客製化排版。

首先,滑鼠移置右上角,點擊「 Add Container 」,新增一個 1/2 – 1/2 的容器。

Avada教學 :新增排版

然後在左區塊新增「 Post Silder 」元件,修改一下內容,若順利的話會正常顯示,如下圖:

Avada教學 :新增元件

如何增加子欄位?

再來,我們在右區塊的 Column 中,再新增兩個子 Column ,完成更多元的佈局。

Avada教學 :新增子欄位

欄位新增完成後,會發現原來右區塊的子欄位多了兩格,在其中一個新增「 Checklist 」元件,並修改一下,會變成這樣:

Avada教學 :新增 checklist元件

接下來,在另一區塊新增「 Counter Boxes 」元件,並修改欄位數量。

再修改一下區塊內容,如:文字( Counter Box Text),最後記得儲存,就完成啦!

最後,來看一下新增完成的區塊,是不是有成就感了許多,如下圖:)

Avada 區塊新增成功

下一章節,會分享「 新增頁面 」的最後一哩,就是頁面標題、描述等 .. 設定,並把頁面放入選單中,呈現在前台。


11. 頁面設定

Avada 頁面設定

當 網頁製作 好,還有一些小東西需要設定,我會分享 2 個小課程教學:

  1. 頁面標題&連結設定。
  2. 放入選單內,讓前台可顯示。

Step1:頁面標題&連結設定

首先,在側邊欄點選「 Page Options > Settings」前往頁面設定,幫頁面取個標題&設定連結,方便使用者尋找。

再來,把模式改成「 Publish 發佈 」後,再進行儲存,不然都會是草稿型態唷(要新增頁面分類時,會找不到),如下圖:

Avada教學 :頁面設定
Avada 頁面設定

Step2:放入選單內,讓前台可顯示

前往 WordPress後台「 外觀 > 選單 」,找到剛新增的頁面,並把它放置在任一選單之下,最後記得儲存。

Avada教學 :流程設定

於是呢 .. 我們的客製化佈局,就順利完成啦!

Avada教學 :客製化網頁設計
Avada客製化網頁設計

Avada教學 到了這邊,相信大家對主題的熟悉度,一定提升了不少。

若未來想新增頁面,就可以自己動手DIY了,是不是很方便:)


12. 更換輪播圖

更換輪播圖

來到首頁,會發現最上面有一個張大圖,這其實是一個「 Slider Revolution 輪播圖 」外掛,但要如何更改它呢?

這邊我拆成 3 個小流程教學,如下:

  1. 功能面板介紹
  2. 修改圖片
  3. 變成輪播圖

首先,滑鼠移至輪播區塊上,先點選「 Edit Slider Options 編輯設定 」,確認等下要修改的輪播圖名稱。

若確認無誤,再點選「 Edit Slider 修改輪播圖 」,開始輪播內容。

Avada教學 :修改輪播圖

Step1:功能面板介紹

接著會進入 Slider Revolution 功能面板,點選要編輯的輪播圖。

下圖我有列出幾個,比較常用到功能,下方有說明可對照學習:

Avada教學 :Slider Revolution 功能面板
Slider Revolution 功能面板
  • 全局選項:該區塊的修改內容,會影響到整個輪播。
  • 導航選項:可增導航控制,如箭頭、圓點等 .. 選項。
  • 輪播圖選項:該區塊的修改內容,會影響當頁輪播。
  • 佈局選項:該區塊的修改內容,會影響當頁輪播的某個元件。
  • 切換裝置:可對不同裝置進行調整。
  • 加入元件:可加入文字、圖片、按鈕、形狀等 .. 元件。
  • 新增&選擇輪播:可新增新的輪播,或切換到指定輪播。

Step2:修改圖片

Avada Food 首頁上方區塊,默認是抓取「 最新文章 」的內容。

首先到「 全局選項 > Content 」修改成「 Custom 自訂 」,這樣就可以自訂圖片內容(下面左圖)。

接著到「 輪播圖選項 > Background 」新增一個背景圖片,也就是你的區塊圖片(下面右圖)。

Avada教學 :輪播圖新增

再來修改一下圖片連結,讓使用者點擊後,可以前往到別的地方(下面左圖)。

然後到「 佈局選項 > Content 」修改一下元件內容(也可點畫面元件,會自動切換過去),填上想打的文字,最後記得儲存(下面右圖)。

Avada輪播圖新增

於是呢,我們的首頁上方區塊,就修改完成啦,點擊圖片也會跳頁到別的地方,恩 .. 看起來還不賴:)

Avada教學 :輪播圖新增

Step3:變成輪播圖

但如果 .. 我們想要變成輪播圖形式,要如何操作呢?

首先,在上方「 Slides > Add Slide > Bulk Slide 」新增一個輪播圖片。

Avada新增輪播圖

在「 全局選項 > Layout 」把種類改成 Carousel or Slider 輪播 (下面左圖)。

然後把 Defaults(預設)的 Slide Duration(輪播秒數),改成 2000ms,也就是 2 秒,方便測試(下面右圖)。

前往「 導航選項 」把 Arrows 和 Bullets 開啟,就是箭頭&圓點,可點擊切換圖片,最後可預覽+儲存。

Avada教學 :修改輪播樣式

如此一來,我們的輪播圖功能,就完成了:)

你也可以新增多個輪播圖組,然後依照前台需求,配置不同輪播圖組,達到客製化目的。

小結: Slider Revolution 輪播圖外掛,可實現的功能很多,但缺點就是上手不是很容易。

若覺得不好用,或是照原設計,單純放一個圖就好了,那這篇就當學習用就OK。

若是有需要用到,如果上面 Avada教學 有幫助到你,那是再好不過了。


13. 頁面標題欄

Avada頁面標題欄

這章節滿容易上手的,主要來教大家如何更換頁面標題欄(跟首頁上方的輪播不一樣),接著來學習。

前往 Recipes 頁面,點擊 「 Edit Page Titlebar 」,進行當頁標題欄修改,可改標題文字、標題備註、圖片等 ..(因為側邊欄長度關係,無全部標出)。

修改頁面標題欄

再來前往 Blog 頁面,先點「 Edit Page Titlebar 」,修改當頁的標題欄,和備註文字等 ..

Avada教學 :修改頁面標題欄

若是想更換背景圖片要如何做?因為這個頁面的背景是在全局裡設定,所以要到全局選項更換,如下:

Avada教學 :修改頁面標題

只要記得,當頁修改就是「 只影響當前頁面區塊 」,全局修改會「 影響到其他頁面的同區塊 」,這個觀念即可,就比較容易上手了:)


14. 側邊欄調整

wordpress側邊欄設計

這章節,會教大家如何修改頁面的側邊欄,會搭配 WordPress後台一起使用,我們開始吧!

前往 Blog 頁面,然後在右邊側邊欄(Widget Area 元件),點「 Widget Area Options 」,並確認目前頁面搭配的側邊欄,是「 Blog Sidebar 」。

Avada側邊欄調整
Avada側邊欄調整

接著,前往 WordPress後台,到外觀 > 小工具 > Blog Sidebar 區域,編輯區塊功能。

Avada教學 :WordPress後台,修改小工具

想學習更多「 WordPress 前後台 」如何使用,這有完整教學 icon-arrow-down  icon-arrow-down 

WordPress教學 :25個後台課程(含安裝+主題推薦)

如此一來,就能順利更換頁面側邊欄的東西囉,其他頁面有使用「 Widget Area 」元件,也是同樣修改方式,是不是很容易呢:)


15. 儲存佈局

Avada儲存佈局

假如今天辛苦完成了 網頁製作 的佈局,但是 .. 在其他頁面也想使用,要怎麼做呢?

其實 Avada 的每一個網頁設計頁面、容器、欄位、元件等 .. ,都能夠進行儲存,並重複使用。

這章節,我會分成 2 個小教學,帶領大家上手這功能,如下:

  1. 頁面儲存&套用
  2. 容器儲存&套用

Step1:頁面儲存&套用

在想要儲存的頁面,點擊 Library(功能庫) > Templates(樣板),取個頁面名字後,點擊 Save Template,即可把整個頁面儲存下來。

若是哪天 網站設計 時,需要剛剛儲存的佈局,就到新頁面進行匯入即可,如下:

Avada教學 :匯入佈局教學

Step2:容器儲存&套用

除了儲存整個頁面樣式外,也可以對個別的 Container(容器)、Column(欄位)、Element(元件)進行儲存,這邊用 Container 做示範。

首先在想儲存的容器,點選 Save Container,如下:

儲存 Container 容器樣式
儲存 Container 容器樣式

接著一樣取個名字,最後進行儲存,如下圖:

儲存成全局 container
儲存成全局 container
  1. 須留意一下上圖的 Save As Global,若是有勾選,之後這個容器內有任何修改,所有套用這容器的頁面,都會進行修改。
  2. 若是沒勾選,每個套用的頁面容器,是各自獨立的,不會互相影響。

若之後 網站設計 有需要,就可以到 Library > Container 拿來套用,且全局樣式的顏色 .. 是不太一樣的,是不是很酷:)

Avada教學 : 全局佈局
Avada 全局佈局

16. 更改頁腳

wordpress更改頁腳

這章節,我會分享如何修改 Footer 頁腳,協助你客製化網頁設計,我們開始囉:)

首先滑鼠移至到任一頁面尾端,點擊 Edit Footer > Footer Content,進行內容編輯。

Avada 頁腳設定
Avada 頁腳設定

接著可依照個人需求修改頁尾,若是有開啟 Footer Widgets 頁尾工具,可至 WordPress後台修改內容。

Avada教學 :Avada Footer修改
Avada Footer修改

點擊 Edit Footer Widgets ,前往 WordPress 後台修改頁腳工具。

wordpress頁腳設定

對照右側的 Footer Widget 序號編輯( Avada Food 樣板,有 4 個 Footer Widget),修改 Footer 頁腳內容。

WordPress 頁腳設定

如此一來,網頁 Footer 頁腳就能進行調整了,是不是很方便:)


17. Avada 功能面板

avada功能面板

Avada 在 WordPress後台,也有一個功能面板,可供我們調整網頁設計,可修改如:佈局、頁首、選單、Logo等 .. 。

部分功能在 Fusion Builder Live 線上編輯器,也能進行修改,所以可搭配使用。

前往 WordPress後台 > Avada > 主題選項,即可看到超多種樣式功能,編輯完成可點擊 Save Changes 儲存。

Avada教學 :功能面板
  • 小提醒:Reset 重置按鈕,會把樣式還原到 Avada Classic 經典版的樣式(樣式不搭),務必小心。

如此一來,才發現原來 Avada 會受到大家喜愛,是因為功能太全面了 ..

經過本文多個教學練習,相信你也對形象網站設計,也了解更多了!

隨著網頁設計的 Avada教學 到了尾聲,你是不是也成長不少呢:)


18. 開始起飛

形象網站教學,架設完成

經過一連串的努力,從「 網站架設前置篇 」到這篇「 Avada教學 」學習,若能堅持到這裡,相信一定也收穫滿滿,先給自己熱烈掌聲!!

若這篇文章,能在你人生路上幫助到你,那將是我最開心的事情:)

最後,回想起過去在自己摸索的路上,曾經遇到了許多 WordPress 網站架設的問題 .. 卻不知道問誰。

若有任何的 WordPress 網站設計疑問,可以直接在文章下面留言給我,或 前往社團發問,我會盡力協助的。

大夥兒,我們下篇文章見:)

我是站長小犬,長期關注:WordPress 網站架設、WordPress 後台教學、WordPress 佈景主題、WordPress 外掛、網路行銷等 ..:)

2 COMMENTS

  1. 你好,請問Logo如何設定不要忽大忽小且位置不變呢?例如就是在輪播圖某個位置大小4px,頁面下來也是某個位置4px,我嘗試一直調整圖片尺寸 可是不管條到多小,還是會忽大忽小且改變位置。

    還有Logo如何在手機頁面不要很大呢?我嘗試一直調整圖片尺寸,可是不管條到多小,在手機頁面上還是很大,也沒有變過。

    以上謝謝。

    • HI S:

      有關 Logo 的調整,可以使用 Fusion Builder Live > Logo,裡面可以調整上下左右間距,而有些 Avada demo 主題,預設會有導航固定在頂端效果,因此會影響到 Logo 變化,所以把該功能關掉即可。

      至於手機的圖片尺寸,在 Fusion Builder Live > Logo > Mobile Logo 裡面,可以專門設定給手機用的 Logo,就不會跟電腦版的 Logo 共用,就不會有太大的問題出現。

      希望有幫助到你:)

發表迴響