WordPress 五天自學衝刺班:形象篇
第三天:建立更多內容

認識內容編輯器+編輯文章與作品+新增選單

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

今日目標:認識頁面編輯器、認識不同類型的內容、修改內容、新增選單

  1. 如何使用 Avada Builder 頁面編輯器來修改內容?------- (10:58 重要觀念 )
    如何快速在編輯器裡匯入更多現成的版型?------------------- (8:37 實作 )
    如何利用 Avada Builder Live 來更視覺化的設計頁面?------ (10:19 實作 )
  2. 如何修改幻燈片秀 (Avada Slider)--------------------- (6:44 觀念+實作)
  3. 要怎麼修改「近期文章」?-------------------------- (10:28 觀念+實作)
  4. 要怎麼修改「作品展示」與增加「內容列表」到頁面中?-- (6:46 觀念+實作)
  5. 如何新增更多內容頁面? ---------------------------- (4:23 觀念+實作)
  6. 如何新增或修改選單?--------------------------------(6:12 觀念+實作)
final_result

第三天的課程要開始囉!

成功是給堅持下去的人喔!課程會越來越難一點點,要認真聽喔!Avada要開始發威了~~~

如何使用 Avada Builder 內容編輯器來修改內容?

10:58 

什麼是 Avada Builder 頁面編輯器?

沒有 Avada 時,WordPress 預設的頁面編輯器是像 Word 一樣,讓你從上往下,純粹打字和插入圖片。

但是 Avada 附帶了獨特的內容編輯器,叫 Avada Builder (原稱 Fution Builder),他替換掉 WordPress 預設的編輯器,讓你模組化你的內容,像是玩拼圖一樣,自己建立很多內容拼圖,再用拖拉的方式來改變排版,幾乎所見即所得,而且他有預設很多互動元素,讓你直接插入使用,非常方便,做出來的內容,就專業漂亮多了。

使用頁面編輯器來設計頁面非常方便,但是,它畢竟會產生額外的程式碼來建構網頁,太濫用的話,容易造成網頁變慢、及未來換主題的一些問題,所以,建議大家僅在「頁面」使用頁面編輯器,不要大量用在每篇文章上面喔!

8:37

如何快速的在內容編輯器裡匯入更多現成的版型?

有時候,你可能覺得你選的這個展示網站,其中有一個頁面的內容排版方式不適合你,這時可以利用「Library」來匯入其他展示網站的範例內容喔!超方便的!

這個影片是後來補充的,只好又多增加了8分鐘的影片,不過我想這麼方便的功能,大家一定不要錯過了!馬上又幫你節省了好幾天的工作了...

10:19  參考影片,讓大家對 Avada Builder的新功能稍作了解,大家可以有空再慢慢嘗試。

如何利用 Avada Builder Live 來更視覺化的設計頁面?

2019年8月之前,使用 Avada Builder 編輯器時,看到的畫面,比較像是框架版 (Wireframe) 的頁面。

現在,Avada 6.0 推出了 Avada Builder Live 的功能,方便大家:

  1. 切換於「框架版」與「視覺化版」的呈現方式,讓編輯更直覺、更節省時間,不用猜測自己正在編輯的東西的呈現結果。
  2. 編輯全站式的設計選項,或者編輯僅影響單一頁面的設計選項。
  3. 預覽不同螢幕大小時的呈現結果。

如何修改幻燈片秀 (Avada Slider)

6:44

每個幻燈片秀(Slider)可以包含很多張幻燈片(Slides)

如果要在內容裡新增一個幻燈片秀:

  1. 請先新增一個幻燈片秀 (Avada > Sliders)。
    • 填寫幻燈片秀的名稱與設定後,最下面可以點選 Add Slider來新增
    • 或者滑鼠移到現有的幻燈片秀上面,點選 Clone 來複製成新的
  2. 點選 Slides 去新增幻燈片,並且在右手邊指定是屬於哪一個幻燈片秀。
  3. 再去編輯頁面裡,使用 Avada Builder 頁面編輯器,去新增一個 Avada Slider 元素,指定你要顯示哪一個幻燈片秀。
    • (或者到最下面的 Avada Page Options 的 Sliders 裡面,選擇你要的幻燈片秀)。

要怎麼修改「近期文章」?

10:28 

為了方便站長們編輯內容,WordPress有把內容分成不同的類型,最基本的就是「頁面」和「文章」。

「頁面」不能分類,「文章」才可以依照「分類」或「標籤」來分類。

像關於我們、服務價格,這種單一個頁面,也很少更新的,是適合放在頁面類。

像最新消息、心情故事、經驗分享之類的,會因為時間累積而越來越多篇的,適合放在文章類,然後用新增「分類」或「標籤」的方式來區分是最新消息?還是心情故事?還是經驗分享?

有了這個最基礎的概念後,我們先來試試看編輯一篇「文章」。

要怎麼修改「作品展示」與增加「內容列表」到頁面中?

6:46

Avada 提供了更多的內容類型:作品類、常見問題類、幻燈片秀類

WordPress 預設的內容類型就只有頁面和文章,但是,時常有很多公司需要作品展示的頁面,會累積一篇篇的文作品,類似文章那樣。可是,如果把作品和最新消息之類的全部都放在文章那邊,後台管理的地方又有點凌亂,而且把作品類型和文章分開,之後做樣式客製化的時候,可以讓兩者有不同的呈現方式。

所以,Avada延伸了文章的方式,另外分開了作品的部分,叫做 Portfolio(作品內容),這樣作品可以有自己存放的地方,還可以有自己的分類和標籤。FAQ 常見問題,也是一樣的情況。

有了這個概念後,這個影片會示範給你看,怎麼樣在某個頁面裡面,增加文章列表的元素,把文章全部或選擇某類列出來。或者在某個頁面,增加 Portfolio 的元素,把作品都全部或選擇某類出來。

如何新增更多內容頁面?

4:23

如果你想開始新增更多頁面時,從控制台左邊,找到你想編輯的內容類型,他的下拉選單,會有新增該類型內容的選項。

現在你應該知道,使用 Avada 主題時,內容有分頁面、文章、Portfolio、FAQ、Avada Sliders。

你可以從後台最上面「新增」的地方去增加新的內容,或者從左邊都選單找到你想增加的類型,會有「新增頁面」.「新增文章」。

這裡順便一提,由於翻譯不正確的原因,Portfolio > 新增文章,其實就是新增一個 Portfolio (作品)。正確翻譯應該是 Portfolio > 新增Portfolio。

如何新增或修改選單?

6:12

有組織的主選單,可以幫助訪客快速找到你的內容喔!

這個影片教你如何從控制台的左邊「外觀 > 選單」來新增和修改選單。

主選單建議不要太多項目,最多大約6~8個,太多項目會讓人覺得凌亂、不知道從何選起。

一個網站的選單其實可以不只有一個(主選單),還可以有其他選單,放置在網站的不同位置,你可以試試看把選單指定到不同的位置,看他會出現在什麼地方。

第三天的課程結束囉!

今天真是辛苦大家了!第一次學WordPress就要一下塞這麼多知識,如果暫時一知半解也沒關係,請大家之後慢慢嘗試,先用假的內容來熟悉介面,比較節省學習時間喔!明天!我們要正式來客製化外觀囉!

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

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

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

網站帶路姬 / Erin Lin

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

40 則留言

  1. 你覺得這份教學對你有幫助嗎?有幫助你釐清很多觀念嗎?帶著你很順利的做好第一個網站嗎?幫助你節省了很多時間嗎?有沒有很喜歡Siteground和Avada呢?請在這裡告訴我喔!我喜歡聽聽你們的學習故事喔!

    留言後,會過幾分鐘後才顯示出來喔~

  2. 講解詳細 受益良多 ,影片很詳細一步步
    照著操作就可以輕鬆建立起屬於自己獨一無二的網站
    很棒值得推薦

    1. 真是不好意思,當時因為能準備的時間很短,帶路姬也還沒有經費購買專業的錄音工具,以後我會注意一點的,未來如果製作課程,我會選擇更好的錄影地點?

      1. 有點小心得分享,可以買一個專門收音的麥克風,不貴,專門錄影用的,非常有指向性,基本可以解決問題,夠用了

        1. 恩恩 謝謝你的心得分享喔!我後來其實有買了,所以型錄篇的教學有改善很多,只是形象篇我還沒辦法重新錄製,因為教學都有連續性,我要錄製的話要全部重來… 是比較困難一點… 不好意思呢!辛苦你了~

  3. 帶路姬老師,想請教一下您範例中的字型是如何修改的? (跟我預設的新細明體字型不同)

    1. 關於字體的部分,第四天的課程會提到喔,都在Avada> Theme Options> Typography的地方可以修改。

  4. 謝謝 Erin 老師,第三堂課一樣輕鬆完成。
    懂得越多就越有趣,第一次如此愉快的製作網頁。以往都一直卡東卡西?
    之後我還想加入更多功能,期待老師更多更深入的教學

    1. 耶!太好了喔!我真的很喜歡看完的同學都能像你這樣來分享一點心得❤️

  5. 帶路姬老師,想請教一下
    請問 Avada 的 Main Menu 的字型可修改為
    中文字型? 似乎找不到可修改的地方

    1. 修改選單文字是在外觀>選單,修改選單文字的樣式,是在Avada>Theme options>Menu>Main Menu

  6. 謝謝分享這麼棒的課程!!請問如果要將幻燈片的字體往下移動,要怎麼挑整呢?

  7. 謝謝老師~ 講的很有層次, 很容易上手.
    好興奮喔~ 終於要架一個屬於自己銷售網站了!
    我需要大量產品的銷售頁, 所以學完了會更換主題.

    這裡有一點想請問老師, 在”如何修改幻灯片秀(Fusion Slider)”單元中, 置換底圖的部分不清楚, 請問老師有沒有比較深入可以參考的資訊? 或是步驟? 或是路徑?
    我在這裡卡住了!

    麻煩您了~

    1. 在編輯幻燈片時,右手邊的地方,在精選圖片的地方改喔。

  8. 老師你好,想請問一下,為什麼我頁面中的Fusion slides的介面和您影片中的不太一樣,我的只有下拉顯示 “ add or edit slides“ 和 “export/import“,怎麼辦..卡住了

    1. 你是不是匯入範例內容時沒有完全成功匯入,請到 Avada > Demos,確定一下 Creative,是不是顯示 Full Import。
      或者,你是不是匯入了其他範例?其他範例網站,就不一定都是一樣的內容編輯方式。
      建議你到社團裡面來發問,並且附上截圖,大家會比較容易幫助你喔! https://www.facebook.com/groups/wpointer

  9. Hi
    感謝你的系列分享,對於初學者真的很有幫助!但現在進行到一半有個問題是,Portfolio是否無法再新增另一組?只能在現有唯一的Portfolio內切分類,再挑到前台顯示?

  10. 您好

    非常感謝您在網路上分享 ,我已安裝AVADA Version 5.9.1,下載了DEMOS 的CRETIVE

進入後有2個問題,

    1.每一個頁面Slider 上全是亂碼
    2.學習到第三天課程,試著編輯ABOUR…Fusion Builder 無法編緝運作

    請問是否是哪裡出現錯誤?

    1. 你是不是Demo沒有匯入完成?或者Fusion Builder外掛沒有啟用?

  11. 我真的不小心將 幻燈片秀欄位 給弄消失了 !! 該如何復原 或新增幻燈片秀欄位呢 ><"

  12. 請問您文章底部的留言區塊,是使用外掛嗎 ?
    我也是套用 AVADA 主題,但好像沒有留言板這個東西,
    是否可以詢問這種留言板可以安裝哪款外掛或是內建哪裡有呢 ? 謝謝

    1. WordPress 預設就有留言功能喔,在設定>討論,可以設定,還有每篇文章,也可以個別設定是否要開放迴響(讓人留言)。

  13. 是很棒的課程,但必須說…
    影片最好還是注意一下聲音,那個餐廳的吵雜聲真的很惱人…

    1. 還有那個看起來是網咖的地方,小朋友的叫聲也太誇張,根本沒辦法專心聽你講話,
      要錄這種教學課程還是找個好環境吧~

    2. 我懂… 我後來的其他影片都有注意到這點,也都有改進了喔~ 真是抱歉呢~ 當初只是趕著在答應大家的時間內錄製完畢,硬著頭皮把小孩送到婆家,自己臨時找家咖啡廳趕著錄製… 因為教學會有連續性的問題,我後來就也沒有重新錄製了… 讓大家聽得不清楚,辛苦了…

  14. 不好意思 請問我更改字體以後,為什麼點一下別的頁面,字體又變回來了

  15. 老師好
    請問第三天的第二支教學影片
    avada那個網站怎樣去找參考呢?
    好像跟這個網站長不太一樣:https://avada.theme-fusion.com/

    1. 應該是同一個網站,只是他們網站有更新,所以看起來有點不同。

  16. 带路姐 我安装了 avada landing商业模板 为什么他指向的位置都是主页 不是指定的一个网页

發佈留言

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

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

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

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