WordPress 用邏輯設計網頁：區塊編輯器

課程緣起

你都怎麼編輯頁面的？

WordPress 可以說處於一個百花盛開的情況，可以編輯頁面的方式有非常多樣，正因為它的擴充性非常高，因此人人都有屬於自己的編輯頁面方式。總結幾種編輯頁面方法，你可以問問自己習慣使用的方式是下面哪一種：

1. 傳統的方式，自己手刻寫 PHP 以及使用傳統編輯器

2. 使用頁面編輯器 Page Builder（例如 Elementor、Divi 等）

3. 使用區塊編輯器

4. 無頭 Headless WordPress，並搭配前端語言

而這個課程，主要是針對區塊編輯器為主題而開設的。

什麼是區塊編輯器？

WordPress 於 2020 年推出區塊編輯器，這個嶄新的編輯方式有別於以往的頁面編輯器與傳統編輯器，區塊編輯器完美整合 WordPress 內建編輯頁面方式，實現了前後台 「所見即所得」 的頁面編輯方式。

它是以 React js 為基底，製作成一個又一個的區塊，讓使用者可以更加方便且不用寫程式的方式編輯與設計頁面。

而技術層面來說，對比 PHP 後端渲染的框架，由 React js 前端渲染這種現代框架，更加符合目前網頁製作的標配！

更重要的是，React 是 Html inject，因此目前 WordPress 推出的 Full Site Editing FSE（已改名為 Site Editor）所使用的模板都是以 html 檔案取代 php 檔案，不論是整體速度與安全性都大幅度的提升！（好的！開始聽不懂了～課程中不會說到程式語言或開發的部分，但如果你知道程式語言的進階使用者，相信你知道這樣的更動是非常大幅度的提升。）

區塊編輯器的優點

當然上述說到的所見即所得的編輯方式，頁面編輯器早就可以做到這件事，但為什麼要使用區塊編輯：

1. 速度優化：區塊編輯器不論是後台速度、或者前台速度相較於頁面編輯器還要快一點～當然現在漸漸出現了更新的技術所撰寫的頁面編輯，因此截至目前為止，速度整體來說沒有顯著差異。

2. 原生的使用體驗：頁面編輯在使用上還是需要重新載入編輯器的頁面，而區塊編輯完整地整合進 WordPress，因此你不需要有重新載入，開啟編輯器的動作。

3. 選擇多樣：相較於一個產品統包多功能的頁面編輯，區塊編輯比較像是自己組裝的機器人，你缺啥功能就找啥區塊，比較不會出現 “需要某個功能但被限制在一個產品” 的情形發生。

4. 免費功能多：相較於頁面編輯器大部分都屬於付費軟體，區塊編輯器大部分免費的就能做到許多事情，對於成本考量也是一個優點。

時至今日，區塊編輯器已經可以做到現代化排版以及複雜的排版方式。更重要的是，不間斷推成出新的區塊與功能在社群中一直推出，學習好區塊編輯，往往你缺什麼功能，查一下有沒有相關區塊，安裝後就可以使用了！

不論在節省成本或未來網站功能的擴充，都看得出 WordPress 不斷朝向更現代更友善的編輯方式前進。邀請你來學習使用區塊編輯器來設計你的頁面！

WordPress 系列課程

無 WordPress 基礎

看完上述內容後，發現沒有任何 WordPress 基礎！觀迎加入平凡以上老師的基礎免費課程「WordPress 新手第一堂必修入門課」。

WordPress 功能導向、進階課程

平凡以上老師推出一系列 WordPress 課程，想要進階學習的朋友，歡迎根據自己的學習需求，加入以下課程喔！

• WordPress 部落格架設：頁面彙整到進階工具
• WordPress SEO 優化：提升 Google 排名
• WordPress 追蹤碼設定：GA4、GTM、FB Pixel
• WordPress 優化：圖片壓縮、安全性與備份
• WordPress 打造電商網站：WooCommerce 系統

探討網站設計的種種

這個課程不僅僅只是要教你如何使用區塊編輯，還要教你如何使用區塊來設計網站！

課程中我們會探討網站設計的風格、概念，甚至是簡易的設計系統，讓你更加清楚網站設計邏輯。

最符合區塊的卡片式設計

Card Design 卡片式設計一直是網頁設計的主流方法，卡片式設計也被眾多的大公司擁抱（Apple, Facebook, Twitter, Google 等），而 WordPress 的區塊就像是樂高一樣一塊一塊的，簡直就像是為卡片設計而生的。

因此這個課程你將可以學會使用卡片設計的一切技術，包括如何調整寬度高度、調整陰影、調整圓角半徑等等... 而課程最終目的就是要訓練你可以自己設計自己的卡片樣式！

像堆積木一樣設計網頁

課程中包含實際應用的部分，我們會將以實際案例搭配卡片式設計的方式，架設好首頁的四個區塊，最後再將四個區塊組合成一個實際頁面。

你可以在這個過程當中精熟區塊編輯的設計方法，也能更加熟悉如何製作出屬於自己的卡片資訊。

WordPress 外掛推薦與學習，節省你的寶貴時間

時至今日，WordPress 商城上架的外掛數量已高達 59,000，而且逐年攀升。即使是同功能的外掛也有 10~20 支左右，品質參差不齊，因此挑選適合的外掛是一個非常耗時的事情。

我的興趣是研究外掛，從眾多的同功能外掛中挑選出 1~2 個符合我使用的外掛來使用，因此如果你非常需要節省時間，在有限的時間快速挑選出泛用性高的外掛，這個課程絕對能幫助你節省超多時間！

免費軟體教學

WordPress 架設網站本體是開源的，然而，玩久了就會發現，你需要的其他功能很多都是需要付費的！因此節省成本變成很重要的課題。

我是個很注重 CP 值的使用者，為了以降低成本的方式在維護與經營網站，我所使用的軟體大多都有提供免費使用（當然你的用量如果高達一定程度，也是需要付費的）。

學習別人的架站經驗（就是我！），避免走冤枉路

我使用 WordPress 已經長達八年的時間，學習的過程當中難免會碰壁與撞牆。我碰到許多不好的軟體（免費與付費都有），因此初期網站常常重新架設，走了好多冤望路。

這個課程，我將整理我所有的學習經驗與使用經驗，跟你分享我架設網站的方式，並組織規劃成一堂課程！

在這個課程當中，你完全不需要擔心怎麼選擇軟體、選錯軟體等等，因為我非常精挑細選，只推薦好東西！而我的選擇方式也會在課程中與你分享，你也可以在未來應用在任何軟體上。

這個課程總共有三大章節，你將學會完整的區塊編輯設計與設定方法。

章節一：網頁設計概念

這個章節中，我們將探討網頁設計與平面設計思考上的差別，包括網頁設計需要思考不同裝置的排版（RWD 響應式設計）、包括了邏輯思維的培養與設計風格的設定與使用。

我們也會以卡片式設計為主要設計方式，這種設計方式最適合應用在區塊編輯的使用，而這也是現代科技大公司最主要的設計方式（Google超愛）。

我們也會一起探討什麼是 「設計系統」，做網站其實有時候 邏輯 > 創意。舉個例子，我常說 「你的按鈕要像按鈕！」，如果按鈕不像是按鈕，使用者真的不知道你的網站哪裡可以按，哪裡不能按。設計系統可以幫助你在架設網站時有一套脈絡可以跟隨，你的整個網站在任何裝置上閱讀起來才會非常合理又好理解！

網頁設計 VS 平面設計｜思維不同，你需要考量的角度也會不同

網頁設計風格探討｜網頁設計也有風格，嚴肅的感覺、活潑的感覺，在設計上我們要注意什麼？

卡片式設計｜從蘋果到 Google 大公司都愛，讓你提供的資訊一眼就看明白

設計系統與應用｜設計系統的建置與使用，讓網站保持一致性或許比你想的還要容易

學習重點：了解網頁設計概念

章節二：排版強化

有了概念，我們就要來培養技術的部分。究竟在 WordPress 區塊編輯中我們要怎麼調整各個元素的長寬高、大小、間距等... 

培養這個技術活，讓你在製作網站時，也能像在做簡報一樣信手捻來，各種圖形都難不倒你！

網站寬度｜定義你的網站寬度、因應不同裝置有不同的設定

欄位排版｜橫向排版的重要性！簡單將資訊攤開來

高度設定｜透過最小高度來定義你的元件大小

邊界 Margin｜元件之間的距離，將別人推開的參數

邊框間距 Padding｜元件內部的距離，將自己往內縮的參數

間距 Gutter Gap｜欄位之間的距離，我建議你看英文比較分的出來

邊框 Border｜正方形的那個線！

陰影 Shadow｜質感升級的方式，就是把陰影加上去就對了！

卡片製作｜上面都學完後，你就能開始製作屬於自己的卡片設計

學習重點：製作屬於自己的卡片

章節三：設計應用

學習好基本技能與了解概念之後，我們要來實際的應用在架設網站上。這個章節我將會以三個內容區塊，示範如何架設一個首頁，之後這個設計方式，你可以廣泛應用在任何頁面。

Hero Section｜網站標頭怎麼做，那個超大圖一看就是重點

Feature Section｜功能特色說明區塊，我們用欄位排版將特色簡單說明，讓使用者一目瞭然、快速了解你的網站

Call To Action｜最重要的行動呼籲按鈕，成功的網站從這顆按鈕開始

優化設計｜掌握基本原則，接下來就讓創意發生，花時間讓每個區塊更加美觀～

學習重點：設計頁面

關於講師

平凡以上的創辦人，李東霖

擁有中山大學教育所學位，致力於線上學習與無所不在學習，結合教育專長與影片學習，教你有邏輯有組織規劃的學習軟體知識。相信終身學習與線上學習之間新型態的翻轉教育。

曾開課包括 WordPress 網站架設、網站速度優化、WooCommerce 電商平台、SEO 搜尋引擎優化等。

擅長軟體操作與生產力工作的使用。

平凡以上作品集

很多網站都隨著時間新增更多不同內容，並有排版與設計上的更改，截圖畫面為當時製作完成的成品樣式，想觀看更多網站專案，或觀看最新的網站設計樣式，歡迎您點擊以下連結：

前往平凡以上開發部落格，觀看更多專案

更多平凡以上教學連結

平凡以上致力於 WordPress 的教學，發現好用的東西、實驗性的產品、資訊的分享與統整等，都會放在 Youtube 頻道

以及資訊中心呦～

這些資源較多以分享資訊為主，扎實的教學內容一定要來 Hahow 學習～

學員分享心得

上完課的文字心得

• 迷途羔羊／產品部落客

原本有打算架設 WordPress ，結果安裝完成發現什麼都不懂也不知道怎麼操作… 看完平凡以上的教學真的可以順利架設網站！

• Lay 皮革工作室／個人工作室

超讚的架網站方式，原本只有經營粉絲專頁，自從加入網站後有許多顧客透過 Google 搜尋找到我～ 業績增加了不少呢！

• 卡米拉／上班族

本來沒想那麼多，只是有興趣架設網站，沒想到這麼有趣啊～

學員作品連結分享

網站經營每日都在變化，因此學員作品不以截圖的方式分享，以連結的方式與您分享，不同時間點進去觀看都可能有更多不同的內容～

• 迷路的郭

• 牛肉老實說

• 陳建源律師事務所

• 長奕記帳士事務所

• 富民當舖

回覆與作業設計

問題回覆頻率

線上課程大家最害怕的就是有問題沒地方問，平凡以上是由 Youtube 起家的，至今已經解決了超過百名網友的問題，身為我的學生你絕對找得到我。

平凡以上有 Facebook 社群、粉絲專頁、官方網站、Youtube 頻道與 Email 信箱，而這個課程也有留言回覆的功能，

我會以每週回覆至少一次訊息的頻率，協助大家學習！

作業批改頻率

課程中的作業設計皆以協助您檢視學習成果設計，記得要完成每個作業呦～

我會以每月批改一次作業的頻率，協助大家檢視學習成果！

資源引用

"Icon made by Freepik from www.flaticon.com"