內容大綱

第三天：編輯首頁與選單

只要堅持約一小時，你就可以有個漂亮的門面！而且訪客也可以輕鬆找到你用心寫過的文章囉！

建立全新
WP 網站

套用版型
增加內容

編輯首頁
編輯選單

調整設計
修改樣式

安裝外掛
擴展功能

好學生推廣
加碼影片！

第三天課程大綱

🎊 課後彩蛋 🎊

加入社團討論

課程中使用的工具

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

哈囉！歡迎來到五天自學衝刺班形象篇第三天的課程！只要再撐一個小時，上完今天的課程，最重要的基礎就差不多上完了！明天再改一下 Logo 等等，幾乎就可以開始運作了喔！加油加油！

1. 如何編輯主選單？

要先建立內容與分類，才能把他們加到選單中喔！

重要觀念＋操作示範 15’32”

到網站後台的外觀 > 選單
編輯現有的選單或新增一個選單
從左邊選擇勾選你想加到選單的項目，點選新增至選單
右邊可以改項目的標籤，或上下拖拉順序
下方記得勾選選單要出現的位置
儲存選單就可以囉！

2. 如何編輯首頁＆認識 Elementor頁面編輯器

使用 Elementor 編輯首頁，享受 100% 的創作自由！

跟著影片操作就可以了喔！ 19’07”

基本運作方式：新增段 ->決定段裏面包含幾個欄位->插入元素到欄位中
編輯頁面時，請從兩種頁面編輯器二選一（ WordPress 預設的區塊編輯器或 Elementor 頁面編輯器）來編輯頁面
點選每個元素，從左邊「內容」處，通常可以編輯該元素的文字內容、連結內容、圖示內容、圖片內容、重複性內容等等
請不要每篇文章都用 Elementor 編輯器來編輯（第五天會講解更多）

如果想使用 Elementor Pro 專業付費版的進階元素，可以透過帶路姬的連結去購買 Elementor Pro 專業付費版。一個網站只需要每年1400元左右，就可以多非常多元素可以用，還多了非常多示範區塊與頁面可以直接匯入，大幅縮短製作時間！（停止續約後仍可繼續使用，但是無法升級外掛版本）

3. 如何編輯服務項目的頁面與修改元素樣式？

Elementor 讓不懂程式的人，也能輕鬆掌握每個設計細節！

跟著影片操作就可以了喔！ 8’47”

點選每個元素，從左邊「樣式」處，通常可以編輯該元素的樣式，像是文字排版 (Typography：包含字體、文字大小、文字行距等）、文字顏色、線條顏色粗細、背景顏色或圖片、圓角程度、圖示顏色、圖示大小等等

4. 如何編輯關於我們＆調整行動版樣式？

Elementor 讓網頁在手機上與平板上都能完美呈現！

跟著影片操作就可以了喔！ 5’07”

點選左下角的「響應模式」圖是，即可啟用響應模式的預覽
再透過切換 Desktop（桌機）、平板、手機三個圖示，來預覽三種螢幕尺寸
可針對該螢幕尺寸，來設定指定的文字大小、間距等等（請參考影片）。

5. 如何編輯作品集來展示作品？

Soledad 主題贈送的元素，讓訪客輕鬆過濾作品分類！

跟著影片操作就可以了喔！ 9’50”

從網站的後台，到 Portfolio > All Projects，可以找到所有的作品。
編輯作品的方式和文章一樣，都是使用預設的區塊編輯器。
如果想要用 Elementor 來編輯，可以到 Elementor > 設定，勾選 Portfolio 內容類型即可（不建議大量使用，可能讓網站變慢喔！）
示範頁面中是使用 Penci Portfolio 元素來列出作品，如果你選擇的 Demo 示範網站沒有 Portfolios 頁面，只需要自己新增一個頁面，加入這個元素，跟著影片中的說明去設定就可以囉！
影片當中會教你如何過濾作品分類、決定作品欄位數量、顏色等等。

6. 如何編輯聯絡我們與輕鬆插入地圖

只要五分鐘，輕鬆崁入 Google 地圖喔！

跟著影片操作就可以了喔！ 5’52”

7. 如何編輯部落格與使用Elementor元素的右鍵

在段、欄位、元素上點右鍵，會發現很多好用功能喔！

跟著影片操作就可以了喔！ 8’27”

選取每個段、欄位、元素時，點擊右鍵會看到一排工具，可以用來複製該項目、複製該項目的樣式、刪除該項目的等等。

8. 如何匯入更多的版型來加速完成網站！

Elementor Pro 和 Soledad 都有提供更多的版型喔！

跟著影片操作就可以了喔！ 11’36”

新增一個段
點選 Elementor 新增版型圖示或 Penci Templates 圖示
找到自己想使用的區塊或頁面
點選插入或 Insert 連結，就可以匯入囉！
Elementor 版型中，有標註 Pro 的，是需要付費升級到 Elementor Pro 專業版才可以使用的喔！

9. 如何使用選單錨點來做一頁式網站？

雖然不是必學的項目，但是是個很受歡迎的功能，帶路姬就特別教一下囉！

跟著影片操作就可以了喔！ 12’13”

在頁面中想要製造停留點的上方，新增一個「選單錨點」元素，並且指定一個獨特的 ID名稱。
編輯選單項目或頁面中的連結（看你要從哪裡連到剛剛設定的錨點），在連結處，填入 #你設定的ID
如果連結目標和你正在設定的連結處於不同頁面上，連結處則要先輸入連結目標的網址，再接 #你設定的ID

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

建立全新
WP 網站

套用版型
增加內容

編輯首頁
編輯選單

調整設計
修改樣式

安裝外掛
擴展功能

好學生推廣
加碼影片！

歡迎分享課程

歡迎贊助帶路姬

刷卡

或

PayPal

留言給帶路姬吧！取消回覆

49 留言

Erin Lin 2018-08-22 - 4:17 下午

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

留言後，會過幾分鐘後才顯示出來喔～

回答

小曾 2018-08-25 - 10:41 上午

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

回答

Erin Lin 2018-08-25 - 10:11 下午

謝謝小曾的推薦喔！網站做好，可以來跟大家分享喔！

回答

Kevin 2018-10-18 - 3:20 下午

錄影好像在餐廳裡面進行，會有雜音干擾

回答

Erin Lin 2018-10-18 - 6:40 下午

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

回答

Carson 2019-07-08 - 4:33 上午

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

回答

網站帶路姬 / Erin Lin 2019-07-18 - 9:31 上午

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

回答

leoleolai 2018-11-06 - 9:18 下午

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

回答

Erin Lin 2018-11-07 - 10:31 上午

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

回答

羅悅文 2018-11-08 - 12:27 上午

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

回答

Erin Lin 2018-11-08 - 11:12 下午

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

回答

sony 2018-11-09 - 8:30 下午

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

回答

Erin Lin 2018-11-09 - 8:48 下午

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

回答

張之穎 2018-11-26 - 12:26 下午

謝謝分享這麼棒的課程！！請問如果要將幻燈片的字體往下移動，要怎麼挑整呢？

回答

Erin Lin 2018-11-26 - 10:12 下午

哪一個幻燈片呢？Fusion Slider 嗎

回答

Stella 2019-03-31 - 1:10 上午

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

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

麻煩您了~

回答

網站帶路姬 / Erin Lin 2019-04-02 - 11:19 上午

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

回答

kenneth 2019-05-14 - 9:34 下午

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

回答

網站帶路姬 / Erin Lin 2019-05-15 - 3:44 下午

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

回答

Ryan 2019-06-04 - 4:22 下午

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

回答

網站帶路姬 / Erin Lin 2019-06-05 - 6:22 下午

我不太了解你的問題噎，請描述清楚一點喔！謝謝～

回答

Richard 2019-06-22 - 2:54 上午

您好

非常感謝您在網路上分享 ,我已安裝AVADA Version 5.9.1,下載了DEMOS 的CRETIVE  進入後有2個問題,

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

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

回答

網站帶路姬 / Erin Lin 2019-06-25 - 5:28 下午

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

回答

巧巧 2019-07-03 - 3:33 下午

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

回答

Vivian 2019-07-28 - 12:59 下午

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

回答

網站帶路姬 / Erin Lin 2019-08-08 - 4:26 下午

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

回答

Ken 2019-10-17 - 8:29 下午

請問網站左上角的最新消息是用哪個plugin呢?感謝。

回答

凱文 2019-10-30 - 12:34 上午

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

回答

凱文 2019-10-30 - 3:19 上午

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

回答

網站帶路姬 / Erin Lin 2019-10-30 - 1:46 下午

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

回答

凱文 2019-10-30 - 11:35 下午

不會喔
只是把我的真實感受告訴你
你很棒~~~
加油加油~

回答

網站帶路姬 / Erin Lin 2019-11-05 - 2:03 下午

謝謝你的諒解與支持喔^^

回答

翁紹恩 2020-01-15 - 8:01 下午

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

回答

金 2020-03-01 - 1:34 下午

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

回答

網站帶路姬 / Erin Lin 2020-03-17 - 11:43 下午

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

回答

sean 2020-03-13 - 4:24 下午

請教近期文章精選圖片下方的文字如何調整呢？謝謝。

回答

網站帶路姬 / Erin Lin 2020-03-17 - 11:52 下午

請到社團裡來發問，並且附上截圖喔，這樣比較不會誤解你的意思。
https://www.facebook.com/groups/wpointer

回答

磊 2020-09-05 - 11:49 下午

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

回答

clayder 2021-01-24 - 12:01 上午

請問怎麼跟改選單的顏色

回答

網站帶路姬 / Erin Lin 2021-01-27 - 11:08 上午

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

回答

謝 2021-12-01 - 12:47 下午

感謝帶路姬的課程讓我進入WP的世界，正在觀看第二天課程，因職業不同佈景主題是否更改其他的佈景主題.還是先依照帶路姬的佈景主題操作，謝謝

回答

soledadsupport 2021-12-08 - 11:31 下午

建議先跟著帶路姬的教學操作練習，等到第五天的課程，帶路姬會教你換 Demo 示範網站喔！

回答

Allen 2021-12-08 - 11:37 下午

跟著帶路姬一直做到第四天了，想要回頭來製作作品集的文章內容，
才發現我的作品集點進去編輯居然沒有區塊編輯器，我整個措手不及不知道該怎麼辦
不知道是不是關掉什麼東西＞＂＜

回答

網站帶路姬 / Erin Lin 2021-12-08 - 11:40 下午

請試試看跟著第五天的課程，先更新你的 Soledad 佈景主題看看喔！
https://wpointer.com/wordpress-tutorials/5days-self-learning-wordpress-day5/

回答

Allen 2021-12-09 - 4:20 下午

老師好，我更新了佈景主題，作品集的區塊編輯器還是沒有出現，
但是文章裡面的是有的，想請問可以怎麼解決呢？謝謝🥺

回答

強 2022-04-13 - 11:21 上午

請問帶路肌我在電腦上製作網站登入帳號密碼無法再手機APP的wordpress登入，這是甚麼問題

回答

梁卓爾 2022-09-01 - 3:19 下午

帶路姬老師，午安！請教一下，我意外地把公司網頁用WordPress製作的header目錄給刪除了，會不會有方法可以恢復呢？
謝謝您！

回答

Tianna 2022-09-05 - 3:55 上午

帶路姬你好，謝謝你精闢的影片說明！跟著步驟做了幾天，想請問在編輯首頁的時候，上面沒有編輯頁面或是Elementor頁面編輯器的選項的話，是代表首頁不是頁面嗎？還是有什麼功能被隱藏了呢？

回答

spring 2022-12-01 - 12:50 下午

您好，Erin,
我的element or 编辑器元素拖不进栏里面请问是什么原因啊？其它功能正常。

回答

相關熱門文章

[data-arkb-linkbox]{cursor:auto}[data-arkb-link][aria-hidden="true"]{visibility:visible;color:transparent;z-index:0;width:100%;height:100%;pointer-events:auto}a.arkb-boxLink__title{text-decoration:underline}

第三天：編輯首頁與選單

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

1. 如何編輯主選單？

2. 如何編輯首頁＆認識 Elementor頁面編輯器

3. 如何編輯服務項目的頁面與修改元素樣式？

4. 如何編輯關於我們＆調整行動版樣式？

5. 如何編輯作品集來展示作品？

6. 如何編輯聯絡我們與輕鬆插入地圖

7. 如何編輯部落格與使用Elementor元素的右鍵

8. 如何匯入更多的版型來加速完成網站！

9. 如何使用選單錨點來做一頁式網站？

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

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧！取消回覆

49 留言

以關鍵字搜尋

WordPress 周年慶＋有獎徵站

第三天：編輯首頁與選單

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

1. 如何編輯主選單？

2. 如何編輯首頁＆認識 Elementor頁面編輯器

3. 如何編輯服務項目的頁面與修改元素樣式？

4. 如何編輯關於我們＆調整行動版樣式？

5. 如何編輯作品集來展示作品？

6. 如何編輯聯絡我們與輕鬆插入地圖

7. 如何編輯部落格與使用Elementor元素的右鍵

8. 如何匯入更多的版型來加速完成網站！

9. 如何使用選單錨點來做一頁式網站？

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

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧！ 取消回覆

49 留言

以關鍵字搜尋

WordPress 周年慶＋有獎徵站

留言給帶路姬吧！取消回覆