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

認識 UX Builder 頁面編輯器+編輯文章與作品+新增選單

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

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

  1. 如何使用 UX Builder 內容編輯器來修改內容?---- (11:17 觀念+實作 )
  2. 如何修改首頁的焦點分類?------------------------------ (4:15 觀念+實作)
  3. 如何修改首頁的幻燈片秀 (Banner)?---------------- (6:36 觀念+實作)
  4. 如何單獨匯入範例頁面或區塊?----------------------- (4:23 觀念+實作)
  5. 如何新增更多的網站內容?----------------------------- (5:48 觀念+實作)
  6. 如何新增或修改選單?------------------------------------(10:56 觀念+實作)
Flatsome 目標

第三天的課程要開始囉!

成功是給堅持下去的人喔!課程會越來越難一點點,要認真聽喔!Flatsome 真的很強大喔!!~~~

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

11:17 重要觀念喔!一定要看喔! 

什麼是 UX Builder 內容編輯器?

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

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

如何修改首頁的焦點分類?

4:15 觀念+實作

首頁的 Featured Categories 是由 UX Builder 的 Product Categories 元素所做成

如果你在任何頁面,想要列出某幾個產品分類時,都可以使用這個 Product Categories 的元素:

  1. 他有很多的呈現方式可以選擇。
  2. 你可以指定要顯示哪些分類。
  3. 你可以指定總共要顯示幾個分類。
  4. 如果要編輯商品的分類與代表圖片,記得到左手邊 「商品>分類」去編輯喔!

如何修改首頁的幻燈片秀/Banner?

6:36 觀念+實作 

首頁的格狀橫幅圖片,是由 Grid 元素所做成

如果你在任何頁面,想要用格狀的方式,很漂亮的列出圖片與幻燈片秀的組合時,就可以插入這個 Grid 元素。

在 UX Builder 上面,有許多元素是可以包含子元素的,像是 Grid 元素可以包含很多個 Grid Items,每個 Grid Item 可以包含 Banner(橫幅)、Image(圖片) 或者 Slider(幻燈片秀) 元素。

如何單獨匯入範例網站裡的頁面或預先設計好的區塊?

6:46

Flatsome 有兩種匯入預先設計好的版型的方式喔!

如果你不是設計師,或者你不想花很多時間從零開始編輯新的頁面,可以善用匯入範例頁面與區塊的方式,可以快速幫你製作專業的頁面喔!非常方便呢!

  1. 在新增頁面時,以 UX Builder 打開頁面,可以在下面直接匯入整個頁面。
  2. 左手邊,點選 Flatsome Studio 開啟區塊版型庫,找到你喜歡的區塊,點選 Import 匯入就可以囉!

如何新增更多的網站內容?

4:23 重要觀念與實作喔!

使用 Flatsome 主題時,大致上可以新增這些內容類型:頁面、文章、Portfolio、商品、Block等。

每當你想要加內容時,請先思考一下你的內容是不是需要分類的?是不是會有很多篇數的?適合使用哪一種內容類型來製作呢?

  1. 通常靜態的頁面,不常更新的、不會有很多篇數或分類的,會使用「頁面」類型。
  2. 通常部落格,會有文章分類、會累積篇數的,會使用「文章」類型。
  3. 通常作品集,會有作品集分類、會累積作品篇數的,會使用「Portfolio」類型。
  4. 通常產品,會有產品分類、會有很多產品,會使用 WooCommerce 外掛所預設的「商品」類型。

如何新增各種內容類型的頁面:

  1. 你可以從後台最上面「新增」的地方去增加新的內容。
  2. 或者從左邊都選單找到你想增加的類型,像是:「頁面> 新增」、「商品> 新增」、「Portfolio > Add New」等等。

如何新增或修改選單?

10:55  觀念+實作

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

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

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

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

第三天的課程結束囉!

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

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

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

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

標籤

網站帶路姬 / Erin Lin

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

10 則留言

  1. Hello Erin
    請問一下商品部分,我是否可以隱藏價錢,然後建立會員制,讓會員看到價錢就好。

    謝謝你的細心指導
    陳冠宇

  2. 老師您好
    我已經購買了BetheMe,如果要使用UX Builder,是不是一定要再重買Flatsome,還是有單買UX Builder,不然接下來的課程似乎無法上下去

    1. UX Builder 沒辦法單買喔… 他就是 Flatsome 預設附帶的編輯器喔。
      如果你很想使用這些功能,就一定得換成 Flatsome 喔。

  3. 老師你好
    看到你有三個五天的學習課程,不太確定自己應該看哪一個教學。
    ✅用五天下班時間做好第一個部落格網站
    ✅用五天下班時間做好第一個形象作品集網站
    ✅用五天下班時間做好第一個型錄購物網站

    因為自己想寫部落格,但同時也想放插畫作品集,以及販售一些自己的文創商品

    你會建議我看你哪一個課程呢?謝謝

    1. 看你比較想著重在哪一部分,這三個系列都可以做到。
      如果販售的商品多於40個,可能就學習型錄篇好一點。
      如果販售的商品不多,那部落格篇或形象篇都可以。
      文章多的話,建議走部落格篇。

      最終,第一個網站,其實我建議,多看看每個主題的 Demo 示範網站,找到越接近自己要的越好,就可以不用修改這麼多,比較有機會做出自己的網站:)

  4. HI Erin妳好,

    我依照影片的學習目前買了Flatsome的佈景主題,剛開始選的先依照妳影片介紹的款式來使用,
    但後來想換,想請問如果要更換主題的介面在哪裡?還有換了之後我之前建置的內容會跟著轉移還是要重新開始?

  5. 你好,很喜歡你的課程,深入淺出,非常適合小白,萬分感謝。

    已看過Soledad的課程,印象中未提到在這邊分享的「匯入預先設計好的版型」,想請問Soledad有這個功能嗎?

    1. Soledad 沒有預設的編輯器,不像 Flatsome 有預設 UX Builder,所以 Soledad 沒有辦法匯入預先設計好的小區塊,只能在網站架設初期,匯入整個範例網站 (Demo Site)喔。

發佈留言

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

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

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

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