Blocksy 教學｜免費 WordPress 佈景主題推薦 (輕量、超強大)

你想自己打造一個漂亮又專業的 WordPress 網站，卻在上萬款佈景主題中，不知道該從哪裡下手嗎？

別擔心，我來幫你解決這個煩惱，推薦你一個超棒的選擇 —— Blocksy！

🎁 免費下載 Blocksy

Blocksy 是一款輕巧又快速的 WordPress 佈景主題，除了有漂亮的網站模板可以直接套用，它的自由度還很高，可以讓我們輕鬆變換網站風格，創造出獨一無二的網站設計。

在這篇筆記，我會直接套用 Blocksy 提供的網站模板，再搭配 Blocksy 自訂器內的免費功能，及 WordPress 內建的區塊編輯器，和你一步步設計出專業感十足的 WordPress 網站。

如果你偏好用影片學習，歡迎觀看下面的 YouTube 影片。

如果你喜歡透過圖文學習，請繼續往下閱讀吧！

圖文筆記會比較詳細、方便快速瀏覽，還會持續更新與補充內容。

Blocksy：WordPress 佈景主題介紹

WordPress 佈景主題是什麼

WordPress 佈景主題，通常簡稱主題，主題提供了豐富的網站模板和設計工具讓我們選擇。

我們可以把網站想像成一棟房子：WordPress 就像房子的結構，確保一切正常運作；網站外觀是裝潢；當我們挑選佈景主題，就像是在選擇裝潢的設計師。

主題會提供各式各樣的網站模板，讓我們可以快速變換網站外觀風格。

更換網站模板就像重新裝潢一樣，網站內容不會變，但網站外觀可能完全不同。

為什麼推薦 Blocksy 主題

在試用過各種佈景主題之後，我最推薦的是一款免費 WordPress 主題：Blocksy！

🎁 免費下載 Blocksy

這個 諾特斯網站 也是用 Blocksy 主題製作的。

為什麼推薦 Blocksy 呢？主要有以下幾個原因：

① 輕巧、網站速度效能佳

就算是使用資源有限的共享主機架站，Blocksy 主題依然能保持網站速度流暢，提升訪客使用體驗，降低跳出率，有助於 SEO 排名。

② 功能強大，適用各種網站

Blocksy 完全支援 WordPress 區塊編輯器，並相容 Elementor、Brizy 等熱門頁面編輯器，讓網站設計更有彈性；也支援像 WooCommerce 等電子商務外掛，是電商網站的好選擇。

另外，Blocksy 提供多款網站模板，可以直接套用，不用從零開始，不到 1 小時就能建好一個專業網站，對新手超級友善。

③ Blocksy 免費版 超佛心

Blocksy 光是免費版就很好用，許多在其他主題要付費才有的功能，Blocksy 都是免費提供，例如：固定的頁首、側邊欄、或是客製化網站調色盤等等。

安裝 Blocksy 佈景主題

下載 Blocksy 主題

第 1 步

點擊下方連結，前往 Blocksy 官方網站。

🎁 免費下載 Blocksy

第 2 步

點擊「Free Download」(免費下載)。

第 3 步

點擊「Download」(下載)，獲得外掛 zip 檔。

上傳 Blocksy 主題

第 1 步

回到 WordPress 後台，滑鼠移至左側欄位的「外觀」—— 圖片標註 ➀。

選擇「佈景主題」—— 圖片標註 ➁。

第 2 步

點擊「安裝佈景主題」按鈕。

第 3 步

點擊「上傳佈景主題」按鈕。

第 4 步

把剛剛下載的 zip 檔拖曳進來上傳。

第 5 步

按下「立即安裝」。

第 6 步

點擊「啟用」。

第 7 步

點擊「安裝 Blocksy Companion」。

這是 Blocksy 主題的附加外掛，安裝之後，可以讓 Blocksy 主題的功能變得更強大。

套用網站模板 (入門網站)

第 1 步

點擊「入門網站」。

第 2 步

我會套用主題提供的現成網站模板，來節省設計的時間。

標示 PRO 的是付費版 Blocksy PRO 才能使用的，不過我覺得光是免費版的模板選項就很夠用了。

點「預覽」可以進一步查看模板網站細節。

這次我挑選的是「BizConsult」模板，網站首圖有大標題搭配彈出式影片，還加入了一些動畫、按鈕跟游標互動的效果，頁首、頁尾的基本要素也很齊全，整體風格符合我的需求。

第 3 步

回到 WordPress 後台，點擊「匯入」模板。

第 4 步

安裝子佈景主題「打勾」—— 圖片標註 ➀。

點擊「下一個」—— 圖片標註 ➁。

第 5 步

頁面編輯器維持預設的「Gutenberg」—— 圖片標註 ➀。

點擊「下一個」—— 圖片標註 ➁。

第 6 步

「全選」安裝並啟用外掛 —— 圖片標註 ➀。

點擊「下一個」—— 圖片標註 ➁。

第 7 步

「全選」匯入內容 —— 圖片標註 ➀。

點擊「安裝」—— 圖片標註 ➁。

第 8 步

等模板成功匯入，點擊「查看網站」，就能看到網站已經套用好模板的樣式。

Blocksy 主題自訂器 & WordPress 區塊編輯器 (Gutenberg)

搭配使用 Blocksy 主題的「自訂器」和 WordPress 的「區塊編輯器」兩種工具來設計網站，可以讓整個網站看起來就會更豐富、更靈活。

但該怎麼區分哪些地方該用 Blocksy 自訂器，哪些該用區塊編輯器呢？

區分使用範圍

Blocksy 自訂器能調整網站的整體設計，比如頁首、頁尾、網站配色跟字型這些內容，我們會用自訂器來決定網站的視覺風格跟排版架構。

區塊編輯器 (Gutenberg，又被稱作古騰堡編輯器) 則是負責單一頁面或文章的內容，像是每一頁裡面的文字、圖片或是按鈕，我們會透過區塊編輯器，打造出每個頁面獨特的樣貌。

有時候，Blocksy 自訂器的整體設計功能不一定完全符合你的需求，這時就可以用區塊編輯器，在特定的頁面上單獨做細部調整。

用區塊編輯器調整過的頁面內容，就不再受到 Blocksy 自訂器的控制。

開啟 Blocksy 主題自訂器與區塊編輯器的方法

開啟 Blocksy 自訂器的 2 種方法：

① 網站前台

點上方選單的「自訂」。

② WordPress 後台

滑鼠移至左側欄位的「外觀」—— 圖片標註 ➀。

點擊「自訂」—— 圖片標註 ➁。

開啟區塊編輯器的 2 個方法。

① 網站前台

點擊上方選單的「編輯頁面」。

② WordPress 後台

點擊左側欄位的「頁面」。

點擊要編輯的頁面下方的「編輯」。

1. 網站整體外觀設計 ( Blocksy 自訂器一般選項)

我要先把網站整體的配色、字型跟按鈕都設定好，像這樣影響整個網站的通用設計，就要在 Blocksy 自訂器裡面編輯。

點擊網站前台上方選單的「自訂」進入 Blocksy 自訂器。

✏️ 自訂器介面該如何調整為中文？

第 1 步

滑鼠移至 WordPress 後台左側欄位的「設定」—— 圖片標註 ➀。

點擊「一般」—— 圖片標註 ➁。

第 2 步

網站介面語言 (也可能顯示為 Site Language) 選擇「繁體中文」。

第 3 步

點擊按「儲存設定」。

自訂器就會變成繁體中文介面了。

(1) 編輯色彩 (整體色彩調色盤)

如果我們想要更換網站配色，所有區塊都手動調整真的會累死。

所以最好的方式是先調整「網站整體」顏色，之後再細調「個別區塊」，這樣會更有效率，也能保持風格一致。

第 1 步

點擊左側欄位的「色彩」。

第 2 步

點擊「進階」—— 圖片標註 ➀。

按「色彩調色盤」—— 圖片標註 ➁。

Blocksy 提供了很棒的「整體顏色調色盤」的功能，有內建的 10 多款網站配色組合，如果你不確定要怎麼配色，直接套用這些調色盤，網站就很好看了！

第 3 步

如果想自訂顏色，可以點擊調色盤裡的圓形色塊。

第 4 步

拖動圓圈或直接輸入色碼來修改顏色 —— 圖片標註 ➀。

可以從右邊的即時預覽，看到套用新色彩後的網站長什麼樣子 —— 圖片標註 ➁。

以「顏色 1」舉例，當我修改了「顏色 1」後，所有套用「顏色 1」的區塊都會同步更新，例如套用顏色 1 的「頁首按鈕」顏色就跟著一起改變。

這樣就可以快速切換不同的色彩組合，保持整個網站的配色風格一致。

第 5 步

修改完調色盤後，點擊「進階」—— 圖片標註 ➀。

按「儲存調色盤」—— 圖片標註 ➁。

之後就能在「色彩調色盤」的「自訂」中直接套用這組配色，省去重新調整的麻煩。

如果你喜歡我這次示範網站的配色，可以參考我的參數來設定。

這次配色我是請 ChatGPT 幫我設計的，實際用起來效果還不錯！

要是你也想試試看，可以複製下方的 Prompt 去使用：

1.  主題：[請填寫你的網站主題或品牌類型]
2.  風格：[請填寫你期望的風格關鍵詞]
3.  靈感來源 (請填寫 3-5 個)：
    [靈感一]
    [靈感二]
    [靈感三]
    (可自行增減)
4.  色彩限制 (選填)：[請填寫色彩規則，如：避免某色、多用某色系等]
---
# 指令

你是一位專業的視覺設計師。根據我上方提供的「主題」、「風格」、「靈感來源」與「色彩限制」，完成以下兩項任務：

**任務 1：生成色票總圖**
生成一張圖片。圖片為簡潔的平面設計風格，包含 5 個橫向排列的色帶。每個色帶由 6 個並排的顏色方塊組成，分別對應你設計的 5 組配色方案。每一組方案都必須基於一個獨特的靈感來源，確保彼此風格各異。

**任務 2：提供文字說明**
在圖片後，以 Markdown 格式條列出 5 組配色的詳細資訊，每組都需包含：
1.  主題名稱：富有創意的名稱。
2.  完整色碼：6 個 HEX 色碼，順序與圖片對應。
3.  用途建議：主色、輔色、背景、文字、點綴色。

只要在 1. ~ 4. 填入你自己的需求，再貼給 ChatGPT 就可以囉！

(2) 編輯排版樣式 (文字)

第 1 步

在左側欄位選擇「排版樣式」。

在「排版樣式」可以針對不同類型的文字，例如：基本字型 (也就是「一般內文」)、各級標題 (H1-H6)、按鈕或連結文字等等，分別設定字體、字型大小、行高、字元間距。

✏️ 小筆記

如果你找不到「排版樣式」選項，請點擊左上角「<」返回最上層。

第 2 步

點擊標題 2 的「字體名稱」。

替換成另一款手寫字體「Dancing Script」。

第 3 步

點擊標題 4 的「字體名稱」，改用襯線字體「Georgia」。

(3) 編輯按鈕

第 1 步

點擊左側欄位的「一般」。

第 2 步

點擊「按鈕」。

第 3 步

切換到「設計」。

第 4 步

框線圓角半徑輸入「6 px」，把按鈕設計成圓角，整體風格看起來會更柔和。

✏️ 諾特斯小提醒

建議大家每設定完一個部分，就點擊一次「發佈」儲存設定，避免網路不穩定或是網路異常，導致辛苦設計的心血消失！

2. 設計頁首

頁首通常包含網站的 LOGO (標誌)、名稱和選單，如果是商業網站，還可以加上 CTA 按鈕引導訪客行動。

(1) 設計頁首樣式

第 1 步

滑鼠移到頁首區域，點擊「主要列」。

第 2 步

最小列高度改成「80 px」—— 圖片標註 ➀。

最大列高度設為「85%」—— 圖片標註 ➁。

當網頁向下滾動時，頁首會稍微內縮，讓畫面更有動態感。

(2) 更換標誌 (LOGO)

第 1 步

滑鼠移到頁首左邊的 LOGO 圖片上 —— 圖片標註 ➀。

點擊彈出的「⋯」圖示，叫出「標誌」選項—— 圖片標註 ➁。

第 2 步

點擊標誌圖片。

第 3 步

將新的 LOGO 圖片拖曳進來上傳。

標誌有分為一般狀態、透明狀態跟吸附狀態 3 種，這次示範我事先針對不同的背景顏色設計了深淺兩種配色的 LOGO。

第 4 步

選取圖片 —— 圖片標註 ➀。

按「Select」(選擇) —— 圖片標註 ➁。

第 5 步

以這次的示範網站來說，當網頁停留在最上方時，LOGO 的狀態是「透明狀態標誌」。

因為網頁背景是深色底，所以「透明狀態標誌」就選擇淺色 LOGO，讓它看起來更清楚。

網頁往下滑後，LOGO 的狀態會切換成「吸附狀態標誌」。

因為頁首是白色底，所以「吸附狀態標誌」就改用深色 LOGO，讓它的對比更明顯。

第 6 步

開啟「吸附狀態內縮」—— 圖片標註 ➀。

把標誌高度設為「85%」 —— 圖片標註 ➁。

LOGO 會在頁首內縮時同步縮小，保持動態效果一致。

(3) 設計選單樣式

第 1 步

滑鼠移到頁首的網站選單上 —— 圖片標註 ➀。

點擊彈出的「⋯」圖示，叫出「選單 1」選項 —— 圖片標註 ➁。

選單分成最上層選項 (主選單) 跟下拉選項 (子選單)。

第 2 步

最上層選項我選擇「型式 4」，上下兩條裝飾線的設計。

第 3 步

項目內部間距(選單文字的左右間距) 稍微拉近，調整為「40 px」—— 圖片標註 ➀。

項目高度 (裝飾線的上下間距) 設為「70%」—— 圖片標註 ➁。

第 4 步

切換到設計。

第 5 步

點擊指示器色彩預設狀態的「游標暫留」—— 圖片標註 ➀。

選擇「色彩 1」—— 圖片標註 ➁。

第 6 步

切換回「一般」，往下滑到「下拉選項」來設計子選單。

第 7 步

項目游標暫留效果選擇「純色」。

第 8 步

寬度設為「115 px」，讓子選單背景色塊跟最上層選單對齊。

第 9 步

切換到設計。

點擊字型色彩下預設狀態的「游標暫留」—— 圖片標註 ➀。

選擇「色彩 1」—— 圖片標註 ➁。

(4) 設計 CTA 按鈕

第 1 步

滑鼠移到右上角按鈕上 —— 圖片標註 ➀。

點擊彈出的「⋯」圖示，叫出頁首「按鈕」選項 —— 圖片標註 ➁。

第 2 步

選擇簍空邊框設計的樣式「Ghost」。

第 3 步

標籤文字輸入「即刻訂位」—— 圖片標註 ➀。

「連結/網址」貼上訂位頁面的網址 —— 圖片標註 ➁。

第 4 步

切換到「設計」。

第 5 步

點擊按鈕色彩下預設狀態的「游標暫留」。

選擇「色彩 2」。

(5) 調整響應式設計 (行動版頁首)

響應式網頁設計 Responsive Web Design (簡稱 RWD) 是讓網站根據不同裝置的螢幕尺寸自動調整排版的設計，不管是用桌電、平板、手機開啟網站，網站的文字大小、行距、圖片大小、都會因應螢幕尺寸變化，確保排版整齊。

如果你希望網站在所有裝置上都好看、讓人留下好印象，那就一定要做好響應式設計！

Blocksy 自訂器有支援 RWD。剛剛我們設定的是「桌面版頁首」，接著要來調整「平板/行動版頁首」。

第 1 步

點擊左下角的裝置圖示，切換到「平板」或「手機」，就能進入「平板/行動版頁首」的編輯介面。

第 2 步

因為手機、平板的螢幕比電腦窄很多，沒辦法直接顯示完整選單，所以選單會變成「滑出式區域」的形式。

點擊右上角的「觸發器」按鈕就會出現行動裝置特有的「滑出式區域」，也就是行動版選單。

第 3 步

點擊「滑出區域標誌」。

第 4 步

因為滑出式區域是深色背景，所以 LOGO 我會用淺色版本 —— 圖片標註 ➀。

標誌高度改成「35 px」，把 LOGO 調整成適合的大小 —— 圖片標註 ➁。

✏️ 調整了設定但預覽畫面沒有變化？

點擊「發佈」儲存設計進度。

「重整」網頁後，通常就會正常顯示了。

第 5 步

選擇「行動版選單」—— 圖片標註 ➀。

切換到「設計」—— 圖片標註 ➁。

第 6 步

點擊「字型」調整選單的字型大小，讓行動版選單更清楚好讀。

第 7 步

預設的字型大小在手機介面上看起來太大了，我們可以直接用「滑桿」來調整大小，大概「16 px」可以讓視覺效果更好。

第 8 步

點擊「平板」圖示切換裝置。

第 9 步

字型大小也改成「16 px」。

3. 設計頁尾

我會在頁尾放置簡短的品牌介紹、分店連結、聯絡方式及版權聲明。

(1) 修改欄位

第 1 步

滑鼠移到頁尾區域，點擊「編輯」。

第 2 步

「欄」改選「3」—— 圖片標註 ➀。

「欄排版」選「左大右 2 小」—— 圖片標註 ➁。

留給品牌介紹的區塊比較大，分店連結和聯絡方式則並排在右側。

(2) 編輯小工具

從下方編輯器可以看到，頁尾的內容是由一個個「小工具」組成的。

第 1 步

點擊「小工具區域 1」，區塊內容就會出現在左側的編輯區。

第 2 步

點擊 LOGO 圖片 —— 圖片標註 ➀。

選「更換」—— 圖片標註 ➁。

按下「開啟媒體庫」—— 圖片標註 ➂。

第 3 步

選擇「深色 LOGO」檔案 —— 圖片標註 ➀。

點擊「選取」替換 LOGO —— 圖片標註 ➁。

第 4 步

全選文字，貼上餐廳介紹內容。

⌨️ 快捷鍵

全選

Windows 系統：Ctrl + A

Mac 系統：Cmd + A

貼上

Windows 系統：Ctrl + V

Mac 系統：Cmd + V

第 5 步

點擊「小工具區域 2」。

第 6 步

標題改為「分店據點」。

內文列出 5 家分店名稱。

第 7 步

選取店名文字 —— 圖片標註 ➀。

點擊「連結」—— 圖片標註 ➁。

第 8 步

貼上對應的網址，按「Enter」新增連結。

⌨️ 快捷鍵：輸入

Windows / Mac 系統：Enter

重複這個動作，把其他 4 個分店連結也完成。

第 9 步

小工具區域 3 標題改為「聯絡我們」，內文填上電話、Email、地址等店家資訊 。

備註：編輯方式和前面 小工具區域 1、2 基本相同，這邊就省略操作示範。

(3) 修改版權聲明

第 1 步

點擊「版權」。

第 2 步

修改頁尾最底部的「版權文字」改成「版權所有 © + 年份 + 品牌名稱」的形式：

版權所有 © {current_year}  —— (品牌名稱)

諾特斯觀眾小默契

我再來提倡一個諾特斯觀眾之間的小默契，你可以在頁尾的地方，加上諾特斯觀眾的秘密記號：「✏️」。

有加這個秘密記號的人，都有著一段看諾特斯的影片或文章，架設網站的共同回憶。

以後看到頁尾有這個秘密記號的網站，就知道是自己人，大家可以互相照顧一下。

第 3 步

點擊「發佈」儲存設定。

第 4 步

點擊「✕」關閉 Blocksy 自訂器。

4. 設計頁面

獨立的頁面內容，包括網站首圖、品牌介紹、餐點介紹等等，這些都要用區塊編輯器來完成。

(1) 編輯首圖

第 1 步

點擊網站前台上方選單的「編輯頁面」，打開區塊編輯器。

刪除區塊

第 2 步

原先套用的網站模板裡有一些我不需要的區塊，像是下方的文字按鈕跟間隔，可以先刪掉它們。

選取要刪除的區塊 —— 圖片標註 ➀。

在彈出選項中點擊「設定」—— 圖片標註 ➁。

按下「刪除」—— 圖片標註 ➂。

修改標題 / 文字

第 3 步

在標題文字上點 1 下，全選文字，貼上你的品牌名稱。

⌨️ 快捷鍵

全選

Windows 系統：Ctrl + A

Mac 系統：Cmd + A

貼上

Windows 系統：Ctrl + V

Mac 系統：Cmd + V

第 4 步

點擊右側文字區塊，全選文字，寫上簡單幾句的歡迎詞，讓訪客一進入網站就能感受到品牌氛圍。

如果想單獨調整某段文字，則可以在右側欄位的「Style」(樣式)裡的「Content」(內容) 修改字型大小、顏色、陰影效果等等，不會影響到其他文字區塊。

替換圖片

網站模板中的影片其實並不是真的放一部影片，而是用一張圖片加上播放圖示，製造類似播放器的視覺效果。

第 5 步

在圖片上點擊 2 下，打開媒體庫。

第 6 步

一次性地把所有要用到的圖片都拖曳進來上傳，這樣等等就不用一張一張上傳，比較省時。

第 7 步

選取要用的圖片 —— 圖片標註 ➀。

點擊「選取」來替換 —— 圖片標註 ➁。

第 8 步

在右側欄位的「Aspect Ratio」(長寬比) 選擇「Wide 16:9」，讓圖片比例更接近影片尺寸，視覺效果更自然。

連結多媒體 (彈出式影片)

第 9 步

點擊「播放」圖示 —— 圖片標註 ➀。

按下「選取上層區塊」—— 圖片標註 ➁。

第 10 步

在右側欄位的 Popup Option #2：Video URL (彈出選項 2：影片網址) 貼上影片連結網址。

備註：目前 Video Popup (彈出式影片) 有支援 YouTube 跟 Vimeo 的影片播放。

⌨️ 快捷鍵

貼上

Windows 系統：Ctrl + V

Mac 系統：Cmd + V

第 11 步

點擊右上角「儲存」—— 圖片標註 ➀。

按「檢視頁面」—— 圖片標註 ➁。

第 12 步

在網站前台測試看看，彈出式影片在點擊後是否能自動播放。

第 13 步

點擊「編輯頁面」，回到區塊編輯器繼續編輯。

(2) 編輯品牌介紹

品牌介紹的部分，我會搭配圖片和 Count Up (遞增計數) 小動畫，讓數據呈現更有動態感。

圖片、文字的編輯方法 前面已經說明過了，這裡就直接略過詳細步驟。

第 1 步

網站模板的 3 個遞增計數小動畫我要保留下來，讓數據呈現更有動態感。

➀ 餐點種類的數量

點擊數字，輸入「50+」；下方文字輸入「多樣餐點」。

第 2 步

➁ Google 評價數量

點擊數字，輸入「800+」；下方文字輸入「Google 星級評價」。

第 3 步

➂ 有機食材使用比例

數字保留「100%」；點擊下方文字，輸入「有機食材」。

修改按鈕連結

第 4 步

點擊按鈕，全選按鈕文字，改成「分店據點」。

第 5 步

點擊右側欄位的「Link」(連結) —— 圖片標註 ➀。

貼上連結網址，按「Enter」輸入 —— 圖片標註 ➁。

⌨️ 快捷鍵：輸入

Windows / Mac 系統：Enter

調整間隔

在替換完品牌介紹內容後會發現，因為我把原本直式圖片換成了橫式圖片，導致圖文上下沒有對齊，所以我需要再調整一下排版。

第 6 步

選取標題上方的空白間隔 —— 圖片標註 ➀。

在右側欄位的 Height (高度) 輸入「25 px」—— 圖片標註 ➁。

這時候看起來左右區塊高度還是沒有完全上下對齊，但這是因為區塊編輯器不是完全的「所見即所得」，區塊編輯器裡的畫面可能跟實際網站前台看到的有出入。

第 7 步

要確認真正的版面效果，需要點擊「儲存」—— 圖片標註 ➀。

按下「檢視頁面」到網站前台檢查實際排版 —— 圖片標註 ➁。

第 8 步

如果版面有對齊好，就可以點擊「編輯頁面」，回到區塊編輯器繼續編輯。

(3) 編輯餐點介紹

網站模板裡原有的 6 個互動式區塊，我要把它們設計成餐點種類的簡介。

第 1 步

標題輸入「美味餐點」—— 圖片標註 ➀。

刪掉右邊的文字區塊 —— 圖片標註 ➁。

備註：編輯標題、文字的詳細方法可以看 這裡。

更換圖示 (icon)

第 2 步

點擊圖示 2 下 —— 圖片標註 ➀。

點擊「Upload SVG」—— 圖片標註 ➁。

第 3 步

選擇「義大利麵」的 SVG 檔案 —— 圖片標註 ➀。

點擊「打開」來替換圖示 —— 圖片標註 ➁。

第 4 步

小標題輸入餐點種類「義大利麵 PASTA」；一般文字改成關於義大利麵的介紹 —— 圖片標註 ➀。

把不需要的文字按鈕刪掉，讓版面更簡潔 —— 圖片標註 ➁。

剩下的 5 個餐點種類，也用相同的方式編輯完成。

(4) 編輯食材介紹

更改欄位背景

第 1 步

點擊背景圖片 —— 圖片標註 ➀。

在右側欄位選擇 Style (樣式) —— 圖片標註 ➁。

點擊「Background」(背景) —— 圖片標註 ➂。

第 2 步

點擊「Replace」(替換)。

第 3 步

從媒體庫勾選食材圖片 —— 圖片標註 ➀。

點擊「選取」—— 圖片標註 ➁。

第 4 步

剩下的標題、文字段落，替換成食材介紹的內容。

第 5 步

點擊按鈕 —— 圖片標註 ➀。

按「選取上層區塊」—— 圖片標註 ➁。

點擊「設定」—— 圖片標註 ➂。

點擊「刪除」—— 圖片標註 ④。

增加欄位陰影

第 6 步

點擊白色背景處 —— 圖片標註 ➀。

在右側欄位選擇 Style (樣式) 的「Borders & Shadows」(邊框與陰影) —— 圖片標註 ➁。

第 7 步

Shadow / Outline (陰影 / 輪廓) 設定「6」，增加背景的層次感，凸顯文字區塊。

(5) 編輯最新消息

原先的網站模板裡剩下的區塊我用不到，都可以一一刪除，但是我會保留文章列表區塊，用來展示最新的餐廳資訊或活動消息。

第 1 步

標題改成「最新消息」—— 圖片標註 ➀。

右邊的文字改成簡單的說明 —— 圖片標註 ➁。

第 2 步

點擊右上角「儲存」—— 圖片標註 ➀。

按下「檢視頁面」—— 圖片標註 ➁。

從前台檢查一遍整個頁面設計好的樣子，如果一切都沒問題，恭喜你，設計好網站首頁啦！

看本次教學示範成果 👉 NOTES Italian 網站

諾特斯的經驗分享

在這邊我想跟你分享一個觀念：

簡單的方法能做好的事，我們就不要用複雜的方法去做了。

特別是在網站設計上很容易掉進「追求完美」的陷阱。

我自己以前也常常這樣，光是在各種排版設計上就花掉超多時間。

舉例來說，如果 Blocksy 主題沒辦法做到理想的排版，我們可能就會用區塊編輯器來調整。區塊編輯器還是不夠用的話，甚至會再去下載其他頁面編輯器外掛來處理。

但是在網站外觀上吹毛求疵，真的有必要嗎？

跟你分享一句話：

我們不要追求把網站外觀設計到 100 分，大概有個 80 分就很不錯了。

這樣一來，我們就可以把省下的時間跟精力，拿去做更重要的事，比如寫出真正有價值的文章，或是在網站上販售高品質的商品。

結語：推薦 Blocksy 主題

今天，我們一起用 Blocksy 快速打造了一個專業感十足的餐廳網站。

就算你的網站不是跟餐飲相關，只要善加利用這篇筆記介紹的重點功能，再依照自己的網站需求修改，就能輕鬆設計出專業而且獨一無二的 WordPress 網站。

如果你在尋找一款輕量、免費、功能強大的 WordPress 佈景主題，那麼 Blocksy 絕對是很棒的選擇，我真心推薦！

🎁 免費下載 Blocksy

之後，我會再帶大家探索付費版的 Blocksy PRO 的功能，有興趣進一步了解的觀眾可以期待一下！

⭐️ 延伸閱讀：Blocksy PRO 教學 (未來開放)

如果你想知道更多有關網站架設的細節，歡迎觀看我用心製作的其他 WordPress 筆記。

WordPress 新手教學 (總整理)

前往免費筆記

參考資料

• Blocksy - Video Tutorials
• Unlock The Power Of Blocksy: The Ultimate Guide To The Best Free WordPress Theme
• How to Create a Free Website using WordPress & Blocksy? Complete Blocksy Theme Tutorial 2024
• Complete Blocksy WordPress Theme Tutorial (All Features, WooCommerce, Blogging)
• Blocksy Theme Tutorial - How to Redesign Your Website Under 45 minutes
• Blocksy 教學示範網站：NOTES Italian

製作團隊

總編輯、發佈：諾特斯
文字撰寫、文字編輯、圖片製作、圖片編輯：鹹魚
圖片製作：蚊子