第三天:編輯首頁與選單

只要堅持約一小時,你就可以有個漂亮的門面!而且訪客也可以輕鬆找到你用心寫過的內容囉!
建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

0.第三天的課程開始囉!

哈囉!歡迎來到第三天的課程!只要再撐一個小時,上完今天的課程,最重要的基礎就差不多上完了!明天再改一下 Logo 等等,幾乎就可以開始運作了喔!加油加油!

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

 跟著影片操作就可以了喔! 11’17”

什麼是 UX Builder 內容編輯器?
  1. 沒有 Flatsome 時,WordPress 預設的內容編輯器是像 Word 一樣,讓你從上往下,純粹打字和插入圖片。
  2. 但是 Flatsome 附帶了獨特的頁面內容編輯器,叫 UX Builder,他替換掉 WordPress 預設的區塊編輯器,讓你模組化你的內容,像是玩拼圖一樣,自己建立很多內容拼圖,再用拖拉的方式來改變排版,幾乎所見即所得,而且他有預設很多互動元素,讓你直接插入使用,非常方便,做出來的內容,就專業漂亮多了。

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

 跟著影片操作就可以了喔! 4’15”

首頁的 Featured Categories 是由 UX Builder 的 Product Categories 元素所做成
如果你在任何頁面,想要列出某幾個產品分類時,都可以使用這個 Product Categories 的元素:
    1. 他有很多的呈現方式可以選擇。
    2. 你可以指定要顯示哪些分類
    3. 你可以指定總共要顯示幾個分類
    4. 如果要編輯商品的分類與代表圖片,記得到左手邊 「商品>分類」去編輯喔!

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

 跟著影片操作就可以了喔! 6’36”

首頁的格狀橫幅圖片,是由 Grid 元素所做成
  1. 如果你在任何頁面,想要用格狀的方式,很漂亮的列出圖片與幻燈片秀的組合時,就可以插入這個 Grid 元素。
  2. 在 UX Builder 上面,有許多元素是可以包含子元素的,像是 Grid 元素可以包含很多個 Grid Items,每個 Grid Item 可以包含 Banner(橫幅)、Image(圖片) 或者 Slider(幻燈片秀) 元素。

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

 跟著影片操作就可以了喔! 6’46”

Flatsome 有兩種匯入預先設計好的版型的方式喔!
  1. 如果你不是設計師,或者你不想花很多時間從零開始編輯新的頁面,可以善用匯入範例頁面與區塊的方式,可以快速幫你製作專業的頁面喔!非常方便呢!
  2. 在新增頁面時,以 UX Builder 打開頁面,可以在下面直接匯入整個頁面。
  3. 左手邊,點選 Flatsome Studio 開啟區塊版型庫,找到你喜歡的區塊,點選 Import 匯入就可以囉!
  4.  

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

 跟著影片操作就可以了喔! 4’23”

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

每當你想要加內容時,請先思考一下你的內容是不是需要分類的?是不是會有很多篇數的?適合使用哪一種內容類型來製作呢?
  1. 通常靜態的頁面,不常更新的、不會有很多篇數或分類的,會使用「頁面」類型。
  2. 通常部落格,會有文章分類、會累積篇數的,會使用「文章」類型。
  3. 通常作品集,會有作品集分類、會累積作品篇數的,會使用「Portfolio」類型。
  4. 通常產品,會有產品分類、會有很多產品,會使用 WooCommerce 外掛所預設的「商品」類型。
如何新增各種內容類型的頁面:
    1. 你可以從後台最上面「新增」的地方去增加新的內容。
    2. 或者從左邊都選單找到你想增加的類型,像是:「頁面> 新增」、「商品> 新增」、「Portfolio > Add New」等等。

6. 如何新增或修改選單?

 跟著影片操作就可以了喔! 10’55”

有組織的主選單,可以幫助訪客快速找到你的內容喔!
  1. 這個影片教你如何從控制台的左邊「外觀 > 選單」來新增和修改選單。
  2. 主選單建議不要太多項目,最多大約6~8個,太多項目會讓人覺得凌亂、不知道從何選起。
  3. 一個網站的選單其實可以不只有一個(主選單),還可以有其他選單,放置在網站的不同位置,你可以試試看把選單指定到不同的位置,看他會出現在什麼地方。

今天的課程完成囉!可以準備進入第四天囉!

建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧!

21 留言

陳冠宇 2019-10-12 - 11:52 am

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

謝謝你的細心指導
陳冠宇

回答
網站帶路姬 / Erin Lin 2019-10-13 - 10:57 am

WooCommerce本身就帶有會員制,可以參考看看這個
https://wordpress.org/plugins/hide-price-until-login/

類似的外掛很多喔!

回答
Tom 2020-05-08 - 11:07 am

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

回答
網站帶路姬 / Erin Lin 2020-06-11 - 7:20 pm

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

回答
pg 2020-05-29 - 10:46 am

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

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

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

回答
網站帶路姬 / Erin Lin 2020-06-11 - 6:57 pm

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

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

回答
獅子 2021-03-15 - 11:35 pm

老師您好
請問要從哪裡可以進入 Demo 示範網站的頁面呢? 謝謝

回答
網站帶路姬 / Erin Lin 2021-03-18 - 2:40 pm

歡迎到社團裡來發問
https://www.facebook.com/groups/wpointer

回答
2020-08-19 - 4:46 pm

HI Erin妳好,

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

回答
網站帶路姬 / Erin Lin 2020-08-26 - 5:12 pm

歡迎到社團裡來發問喔:
https://www.facebook.com/groups/wpointer

回答
Chia-chen 2020-09-23 - 11:11 pm

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

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

回答
網站帶路姬 / Erin Lin 2020-09-28 - 2:30 pm

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

回答
ChunTe 2021-04-09 - 4:45 pm

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

此篇連結的影片有誤

回答
網站帶路姬 / Erin Lin 2021-04-11 - 9:47 pm

哪一個影片?

回答
ChunTe 2021-04-13 - 1:29 pm

此部落格 https://wpointer.com/wordpress-tutorials/wordpress-5days-cloudways-flatsome-day3/ 內的 “如何新增更多的網站內容?”

連結的影片為
https://www.youtube.com/watch?v=D6ksvtr0yQw
應該為
https://www.youtube.com/watch?v=i_ukJ-QE-HU&list=PLSwyHRZ3nNjLMKe4tUbYMRFo5d7TbRQiU&index=30

回答
網站帶路姬 / Erin Lin 2021-05-02 - 6:18 pm

感謝你的提醒,已經更正好囉!

回答
g22649 2021-05-07 - 10:27 am

請問老師,這個主題可以將購物車刪除嗎?因為只需要做商品型錄而已,還是在下載的時候就不下載購物車?先謝謝老師!

回答
網站帶路姬 / Erin Lin 2021-05-18 - 8:41 pm

可以喔,後面幾天的課程有教。

回答
jerry 2021-11-03 - 9:26 am

老師您好:
到第三天網第四天前進時 404 無法閱讀
請老師幫忙修復
謝謝~

回答
網站帶路姬 / Erin Lin 2021-11-03 - 1:50 pm

Jerry 您好,我剛剛已經把連結修復好了喔!謝謝你的告知!

回答
Vanessa 2022-03-05 - 5:18 am

無論選那一個page, 選edit with ux builder, 就一直停在 loading ux builder 的畫面…

回答
訂閱電子報 (週四寄)
帶路姬的文章重質不重量,所以請訂閱我的電子報,以確保會收到更多優質教學好文喔!
聯盟分潤聲明

此站內容為Erin的真實架站經驗分享,部分推薦的商品有參加 聯盟計畫,您若點選文中的連結而購買商品,Erin可以從中獲取一點分潤。不過Erin 100%保證,只誠懇推薦自己親身試用過的好東西。(什麼是聯盟計畫?)

支持帶路姬

假如你很喜歡帶路姬的文章,希望鼓勵帶路姬繼續寫作,幫助WordPress新手,與推廣WordPress,不如贊助一下帶路姬吧!

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,614,479(2024/2/2)
總訪客量:626,454 (2024/2/2)

© WordPress 網站帶路姬 2018~2024 版權所有 |  本站使用 Soledad主題 + Elementor Pro 編輯器   | 推薦使用 Cloudways主機

★ 完全免費的影音+圖文教學 ★

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

想完整的學好基礎嗎?快來看看吧!😊
close-link
網站帶路姬熱銷新書

用WordPress打造賺錢副業!

讓帶路姬手把手帶著不懂程式的你:規劃網站、架好網站、學會維護網站、美化網站、最後獲得收益!節省摸索的時間,減少卡關的機會,用最有效率的方式、更有系統地打造賺錢副業!
立即購買
close-link