WordPress 網頁設計教學｜自己打造高質感網站，響應式網站設計 RWD 必做《個人網站架設》第 6 集

在這部影片，我會帶你用 Blocksy 自訂器完成整個網站的視覺設計，從顏色、字體到排版一步步調整，做出符合你風格的版面。你也會學到怎麼用 AI 快速生成專屬配色和免費 LOGO，並完成 RWD 響應式設計，讓網站在所有裝置上都一樣好看又有質感。

🌟 免費 WordPress 佈景主題 Blocksy
→ https://notesstartup.com/blocksy

⚡ 章節重點
🎯 影片介紹 00:00
🎯 認識 Blocksy 自訂器 00:48
  🔹 進入 Blocksy 自訂器的方法 01:19
  🔹 Blocksy 自訂器介面 01:36
🎯 認識網站架構與設計流程 02:25
  🔹 網站的基本架構 02:33
  🔹 網站設計操作流程 02:54
🎯 步驟 1：編輯網站整體設計 04:02
  🔹 調整網站配色 (色彩調色盤) 04:13
  🔹 修改文字 (排版樣式) 06:00
  🔹 版面配置、按鈕、社群連結、返回頂端按鍵 (一般) 07:21
  🔹 網站圖示 / 分頁小圖示 (網站識別) 09:02
  🔸 用 AI 設計 LOGO 09:25
  🔸 上傳網站圖示 10:12
🎯 步驟 2：編輯頁首 10:41
  🔹 頁首樣式 (主要列) 11:11
  🔹 新增頁首 LOGO (標誌) 11:33
  🔹 頁首選單 11:58
🎯 步驟 3：編輯頁尾 13:18
  🔹 編輯頁尾樣式 (下面列) 13:40
  🔹 修改版權聲明 13:54
  🔸 諾特斯觀眾小默契 14:06
  🔹 新增社群按鈕 (社交網路服務) 14:27
🎯 步驟 4：編輯網站內容 15:36
  🔹 網誌文章 15:59
  🔸 編輯資訊卡 (卡片選項) 16:19
  🔸 開啟側邊欄 (資訊欄) 18:24
  🔸 分頁導覽 18:33
  🔸 資訊卡揭示效果 18:43
  🔹 單篇文章 18:52
  🔹 分類 20:02
  🔹 頁面 20:38
  🔹 作者頁面 20:59
  🔹 搜尋頁面 21:19
  🔹 設計側邊欄 (資訊欄) 21:43
  🔹 Blocksy Companion 擴充功能：趨勢文章 23:20
🎯 步驟 5：響應式網頁設計 RWD 24:02
  🔹 頁首的響應式設計 25:00
  🔹 頁尾的響應式設計 26:19
  🔹 網站內容的響應式設計 27:14
🎯 諾特斯的經驗分享 28:10
🎯 本集回顧與下集預告 29:13

🎯：大標題 🔹：中標題 🔸 小標題
希望章節重點與標示能幫助你快速了解影片架構，有效率地獲取想知道的資訊！

✨ 相關連結
⭐ 免費 WordPress 佈景主題 Blocksy
→ https://notesstartup.com/blocksy

⭐️ 請 chatGPT 配色用 Prompt
→ https://notesstartup.com/wordpress-bl...

⭐️ 請 chatGPT 生成 LOGO 的 Prompt
→ https://notesstartup.com/wordpress-bl...
 
⭐「WordPress 個人網站架設教學」圖文好讀筆記
→ https://notesstartup.com/wordpress-bl...

⭐《個人網站架設》系列：WordPress 部落格 (Blog) 網站製作教學
→    • 《個人網站架設》系列  

✏️ 諾特斯小默契
大家可以在網站的頁尾加入「✏️」Emoji。這是屬於諾特斯觀眾的秘密記號，以後看到頁尾有這個秘密記號的網站，就知道是自己人，大家可以互相照顧一下！

🚩 製作團隊
內容企劃：鹹魚
內容錄製：諾特斯
動畫剪輯：蚊子

📚 參考資料
→ https://notesstartup.com/wordpress-bl...

🌐 官方網站
網站架設：https://notesstartup.com
手繪動畫：https://notesscribe.com

🙌 觀眾許願池
→ https://notesstartup.com/wishing-well/

👍 諾特斯團隊好評瀑布
→ https://notesstartup.com/teamnotes-re...

☕️ 聯盟計畫聲明
諾特斯有參與部分廠商的聯盟計畫。如果你透過我提供的連結購買需要的數位工具，我就能夠獲得一些收入。這不會對你造成額外的費用，而且可以支持我繼續製作更多能幫助到大家的免費影片。此外，有些數位工具有諾特斯觀眾的專屬優惠折扣，希望這也對你有幫助。

我希望透過公開這些資訊，讓我們之間更透明，加深我們的信賴關係。我只會推薦我真心覺得優質的數位工具。如果真的有購買的需求，歡迎利用我提供的連結購買，非常感謝你的支持！

💌 聯絡資訊
網站表單：https://notesstartup.com/contact/
Facebook：諾特斯   / notesstartup  
Instagram：notesstartup   / notesstartup  
Email：[email protected]

❤️ 支持諾特斯
→ https://notesstartup.com/support-notes/