內容大綱
第四天課程大綱
加入社團討論
0.第四天的課程開始囉！
歡迎來到五天自學衝刺班的第四天！今天的課程的前兩個影片蠻重要的，我會帶著你改網站的 LOGO 和最下面的智慧財產權宣告的文字。
其餘的影片呢，會幫助你對 Soledad 主題可以客製化外觀的項目有更深的了解，基本上除了文章與頁面的內容以外，首頁、頁首、側邊欄、頁尾等等的設計與排版調整，都將在今天的影片會提到喔！（幾乎都在 外觀>自訂 裡 ）
大家可以參考今天的影片，依照自己的需求來做外觀上的調整，如果對示範網站的樣式與排版已經很滿意，也不一定需要改動太多☺️。
看完今天的影片，你也會更加了解，原來可以客製化的選項這麼多！
- 所以才能用同一個佈景主題，做出幾百個看起來差別很大的示範網站！
- 而且，每個佈景主題的自訂項目與分類的方式都不一樣喔！所以如果能找到比較完整的教學（像帶路姬的五天自學衝刺班），真的會比較有頭緒一些！
- 很多免費的佈景主題，大概就是把 外觀 > 自訂裡 的選項 90%都鎖起來，讓你體驗看看他的用法、看看選項是如何分類的而已，不過大部分的細部設定是需要升級才能解鎖使用的，順帶提一下讓大家有點概念囉🥰！
1.認識網站的四大區域
重要觀念！ 5’04”
為什麼要分四大區域？
- 區域是帶路姬自己幫大家區分的，為了幫助新手比較好猜測，你想改的東西「可能」從哪裡改？
- 假如你想改 Logo，他在頁首的區域，就不會跑去頁面的內容編輯器改，因為他不在內容區域，所以，請到外觀自訂編輯器裡的 Header 去找。
- 假如你想改頁尾的小工具區域，你也不會跑去頁面的內容編輯器改，他不在內容區域，所以請到外觀自訂編輯器裡的 Footer 去找。
以此類推…
2. 如何修改頁首區域 ?
跟著影片操作就可以了喔！ 8’03”
可透過 Flatsome 獨有的 Header Builder 來自訂頁首的排版！
- 先打開「外觀 > 自訂 > Header」
- 利用右下角黑色的 Header Builder 來編輯頁首
- Header Builder 有分成四個橫列：Top Bar (頁首上排)、Header Main (主要一排)、Header Bottom (頁首下排)、和最下面的 Not in use (未使用）
- 請把你想要的資訊拖拉到你想放置的位子，如果不需要時，請拖到 Not in use 這排就可以囉！
其他和頁首區域 (Header) 相關的客製化設定，大概在這些地方可以找到：
- Header >Header Presets: 從預先設計好的頁首排版中直接選擇套用。
- Header > Logo & Site Identity：上傳與設定 Logo 圖片
- Header > Sticky Header：捲軸往下拉時，黏著於網頁頂端的頁首
- Header > Dropdown Style：下拉選單的樣式
如果你還沒有自己的 LOGO，可以參考這兩篇文章來自己設計一個喔！
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
3. 如何修改頁尾區域？
可以先參考，如果有需要才調整，非必做項目：7’23”
頁尾 = 頁尾小工具區塊 1 (Footer 1) +頁尾小工具區塊 2 (Footer 2) +最下面的智慧財產權區塊 (Absolute Footer)。
這三個頁尾區域的樣式：
- 請到「外觀 > 自訂 > Footer」來修改樣式。
- 包含他們的字體顏色、背景顏色、還有智慧財產權區的宣告文字等等。
Footer 1 與 Footer 2 兩個小工具區塊的內容：
-
- 可以點選 「外觀 > 自訂 > Footer」裡面的「Edit Footer Widgets」來分別編輯包含的小工具。
- 或者到「外觀 > 小工具」，展開「Footer 1」或「Footer 2」來分別編輯包含的小工具。
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
4. 如何客製化網站的整體樣式？
可以先參考，如果有需要才調整，非必做項目： 2’49”
Flatsome 有些設定是「全站性」的改變整體的樣式
-
- 外觀 > 自訂 > Style > Colors: 設定一個主要色系。
- 外觀 > 自訂 > Style > Typography: 各種字體相關的設定，像是標題大小、內文字體大小、選單字型等。
- 外觀 > 自訂 > Layout : 設定網站的寬度與整體的背景圖片與顏色。
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
5. 如何修改部落格的樣式與排版？
可以先參考，如果有需要才調整，非必做項目：5’02”
只要在設定的地方指定一個空白的頁面，部落格會自動列出文章喔！這個部落格頁面，有自己獨特的設定樣式的地方。
-
- 到「設定 > 閱讀」: 請選擇你要哪一個頁面當「文章頁面」，也就是部落格頁 (範例中是指定Blog頁)。
- 到 「外觀 > 自訂 > Blog > Blog Layout」: 可以設定部落格列表頁的排版，以及是否要隱藏側邊欄。
- 到 「外觀 > 自訂 > Blog > Blog Single Post」: 可以設定部落格單一文章頁面的排版，以及是否要隱藏側邊欄。
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
6. 什麼是彙整頁面？怎麼客製化他的樣子呢？
可以先參考，如果有需要才調整，非必做項目：5’45”
頁面有兩種，一種是站長自己新增的，另一種是WordPress 自動匯集相關性內容，自動整理產生的。
- 舉例來說：文章如果有一個分類叫「美食」，然後你在主選單裡，加入這個分類到選單裡，你覺得他會怎麼呈現呢？
- 因為你並沒有自己去「新增一個頁面」，而是讓 WordPress 替這個分類自動產生一個頁面，這種頁面叫做「分類的文章彙整頁面」。
- 另外一個例子是，一個網站裡可能有很多作者，我們並沒有幫每個作者新增一個頁面去列出他寫的文章，可是 WordPress自動幫你整理出來，產生一個「作者的文章彙整頁面」。
- 這些頁面都在你新增分類或新增作者時，就自動存在了，只是你要知道怎麼讓訪客連結到他們
- 像是某個分類的文章彙整頁面：從「選單」去新增「分類」到選單中，就會新增這個「分類的彙整頁面」的連結到選單中，讓訪客連結到它。
- 從主題選項，去設定要不要顯示 Blog Meta（文章摘要資料：作者、日期等等），如果有顯示，這個作者名稱就會直接連到作者彙整頁面。
- 不只文章分類和作者會有彙整頁面喔！像是 Portfolio 作品、商品，只要是有分類的，都會有喔！
- 如果要修改彙整頁面的排版，請到「外觀 > 自訂 > Blog > Blog Archive」做設定喔！
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
7. 什麼是側邊欄？如何編輯裡面的小工具呢？
可以先參考，如果有需要才調整，非必做項目：5’06”
小工具可以在側邊欄或頁尾的區域
- 這個影片教你怎麼新增與編輯小工具，並且把小工具指定到你想要的位置。
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
8. 如何修改 WooCommerce 商店相關的設計？
可以先參考，如果有需要才調整，非必做項目：7’23”
WooCommerce 是一個管理商品與訂單的電子商務外掛。
- 在「WooCommerce > 設定 > 商品」，可以指定要哪一個頁面當作「商店頁面」，會列出所有的商品。
- 在「外觀 > 自訂 > Shop (WooCommerce)」，可以設定許多與購物功能相關的細節，例如：
- 產品目錄：商品目錄頁的排版與設計
- Product Page：單一商品頁面的排版與設計
- My Account：我的帳號的頁面的設定
- Payment Icons：付款方式的圖示
- 商品圖片：商品圖片的大小
- 結帳：結帳頁面的設定
- Cart：購物車的設定
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
9. 如何啟用型錄模式，完全隱藏購物相關功能？
可以先參考，如果有需要才調整，非必做項目：5’45”
如果你只是想展示商品，不需要實際線上銷售，可以用這個設定，快速隱藏購物車相關功能喔！非常方便！
- 請到「Flatsome > Advanced > Catalog Mode」。
- 勾選「Enable catalog mode… 」就可以了喔！
- 如果想要隱藏價格，可以勾選「Select to disable prices… 」
- 還可以跟著影片做，把「加入購物車」的按鈕換成任何你想寫的文字、連結、或者短代碼喔！
- 範例：<a href=”https://wordpress-135792-1331098.cloudwaysapps.com” target=”_blank”>請詢價</a>，記得把粗體字換成你要連結過去的網址。
如果你真的找不到修改樣式的地方，歡迎到帶路姬的社團找找看答案，或者購買 YellowPencil 外掛來輔助，會簡單很多喔！
歡迎分享課程
歡迎贊助帶路姬
以關鍵字搜尋
A2 HostingBBBloggerCloudflareDigitalOceanDivi BuilderEssentialsGoogle CaptchaGoogle WorkspaceJannahLearnDashLinodeMediumMemberPressOptimize SEOOshinePortoStyler for WPFormsSucuriTemporary Login Without PasswordTheGemUX BuilderWoodMartWordfencewpDataTableWPFormsWP RocketWPvividXuiteYellowPencil 部落格建置圖庫垃圾留言抽獎換主題文章排序時間管理更新書籍推薦短代碼社群媒體移轉網域精選主機網站備份網站安全翻譯選單部落格建置隨意窩黑色星期五
© WordPress 網站帶路姬 2018~2024 版權所有 | 本站使用 Soledad主題 + Elementor Pro 編輯器 | 推薦使用 Cloudways主機
1 留言
Hello, Erin, 請問如果有多樣商品詢價 是否可以一次加到與我們聯絡，在與我們聯絡收信中可以顯示多樣商品的詢價嗎？ 該如何做呢？？謝謝