RWD 響應式網頁設計實戰：Blocksy 主題打造美髮作品集，手機電腦完美呈現
做一個 RWD 響應式網站不必自己刻 CSS 斷點。用 WordPress 免費的 Blocksy 主題搭配 Elementor 視覺化編輯器，一個工作流程就能同時搞定全站響應式版…
做一個 RWD 響應式網站不必自己刻 CSS 斷點。用 WordPress 免費的 Blocksy 主題搭配 Elementor 視覺化編輯器，一個工作流程就能同時搞定全站響應式版型、品牌頁面與服務作品集，特別適合美髮、攝影、設計等需要視覺展示加接單的服務型業者。根據 Statista 長期追蹤的全球網路使用調查，超過四成的網站流量來自行動裝置，Google 自 2018 年起全面採用行動優先索引（Mobile-First Indexing），響應式已是基本要求，不再是加分題。WordPress 目前是全世界最普及的內容管理系統，佔所有網站的 41.5%，在已知 CMS 的網站中更佔 59.2% [來源：W3Techs〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉]，這也是用 WordPress 加 Blocksy 做 RWD 能享有龐大生態與文件支援的主因。
重點先看：超過半數流量來自手機，選對 Blocksy 這類原生響應式主題，等於把約八成斷點工作交給主題，你只要專注手機版的閱讀節奏與聯絡動線，免費版就足以做出專業品牌站。
RWD 響應式網頁設計是什麼，做品牌網站為什麼一定要做
RWD（Responsive Web Design，響應式網頁設計）指的是同一份網頁內容會根據使用者裝置的螢幕寬度，自動調整版面、字體與圖片大小，讓手機、平板、桌機都能正常瀏覽。對服務型網站來說，行動裝置流量早已過半且持續上升，沒做 RWD 等於直接把潛在客戶推給對手。
把 RWD 拆開來看，底層有三個技術支柱，缺一個都不算完整的響應式。第一是相對版面單位，寬度用百分比而非固定像素，字體用 rem 或 clamp 讓它跟著螢幕縮放，圖片用 max-width 一百百分比避免溢出容器。第二是媒體查詢斷點，在特定螢幕寬度切換欄數、字級與間距，常見的斷點約落在手機 480 像素以下、平板 768 像素、桌機 1024 像素以上。第三是彈性媒體，圖片與影片要在小螢幕自動縮小、在大螢幕不變形。用 Blocksy 這類原生響應式主題的好處，就是這三根支柱主題已經先撐好，你不用自己寫媒體查詢，只要在客製化器裡調整三個斷點的顯示選項。
這裡有個觀念要先講清楚。很多人把 RWD 想成「多做一個手機版網站」，那是早年 m. 子網域的做法。RWD 的核心差異在於一份內容、一個網址，搜尋引擎只需要收錄一次，維護成本最低，也不會出現桌機手機內容不一致的 SEO 地雷。想建立扎實的基礎觀念，可以先看響應式網頁設計 RWD 基礎觀念。
Google 從 2020 年宣布全面走向行動優先索引，並在 2023 年 10 月正式宣告這項遷移完成，所有能在手機上運作的網站，現在都主要由行動版爬蟲抓取與評估 [來源：Google Search Central〈https://developers.google.com/search/blog/2023/10/mobile-first-is-here〉〈2023-10-31〉]。這對自架站主的實際意義是：Google 看到的、拿來排名的，就是你的手機版。桌機版做得再華麗，只要手機版渲染出問題、字級過小、或關鍵內容被藏起來，排名訊號就會跟著弱化。把這層邏輯想通，你就會明白為什麼後面所有設計步驟都要從手機視角出發。
講白了，為什麼服務型業者更不能省 RWD？因為美髮、攝影、造型師這類生意的核心就兩件事：作品照加聯絡方式。這兩者在手機上的可讀性直接決定詢問單轉換率。客人在捷運上滑手機看到一張好看的染髮作品，結果字小到要放大才能讀、聯絡按鈕被擠到頁面最下方，這單就飛了。
RWD 與 AWD 自適應的差別
| 項目 | RWD 響應式 | AWD 自適應 |
|---|---|---|
| 運作方式 | 一套版型依螢幕寬度伸縮 | 依裝置送不同版本 |
| 網址結構 | 單一網址 | 可能多網址或偵測後轉址 |
| 維護成本 | 低，改一次全裝置同步 | 高，多版本要分別維護 |
| 適合場景 | 自架 WordPress 品牌站 | 大型電商、需極致效能優化 |
| SEO 友善度 | 高，無內容重複問題 | 中，需處理轉址與 canonical |
對預算有限、不會寫程式的接案者，RWD 是唯一務實的選擇。AWD 適合有工程資源的大型站，自架品牌形象網站用 RWD 就綽綽有餘。想知道兩者更深層的取捨，可以參考AWD 自適應與 RWD 響應式的差異。
- 一份內容一個網址，維護成本最低，沒有內容重複的 SEO 罰分
- 根據 Google Search Central 的說明，Google 採行動優先索引（Mobile-First Indexing），手機版體驗直接影響排名
- 服務型業者的作品照加聯絡方式，手機可讀性決定詢問單轉換
- RWD 一套版型伸縮，AWD 依裝置送不同版本，自架站選 RWD 最單純
說到底，RWD 本質上是「主題選擇加頁面編輯器加作品集結構」三件事的組合決策，並非一個獨立的技術任務。這也是多數停在媒體查詢語法的 RWD 文章沒講清楚的地方。對版面設計原則有興趣的話，可延伸看RWD 響應式排版的版面設計原則。
Blocksy 主題的 RWD 能力與免費版邊界
Blocksy 是一款以效能與原生響應式為核心的免費 WordPress 主題，所有預設版型與區塊都內建桌機、平板、手機三種斷點的微調選項。免費版就足以做出專業級品牌形象網站，付費 Pro 版主要補強的是進階版型庫與 WooCommerce 擴充，不是 RWD 的必需品。
常被問的問題是：Blocksy 免費版到底夠不夠用？我的判斷是，對多數服務型品牌站來說夠用。選一個原生響應式主題，等於把約八成的斷點調校工作交給主題處理，你只要專注手機版的閱讀節奏與聯絡動線。這對預算有限的自架者是關鍵差異，Pro 版不是必要支出。更具體地說，免費版已經涵蓋全站模板匯入、色彩與字體全域控制、頁首頁尾建構器、以及桌機平板手機三斷點的微調選項，這四項加起來就是品牌形象網站最常被調整的部分。Pro 版真正補強的是 Header Builder 的進階條件、Display Conditions 可以依頁面顯示不同頁首、以及更多 Starter Sites 與 WooCommerce 擴充。換句話說，若你做的是純展示加接單的服務型網站，免費版的功能邊界剛好夠用；只有當你需要依分類顯示不同頁首、或要開線上商店時，Pro 版的價值才會浮現。
Blocksy 與同級輕量主題比較
| 主題 | 免費版完整度 | 響應式設定 | 模板視覺風格 | 適合作品集 |
|---|---|---|---|---|
| Blocksy | 高，覆蓋約八成品牌站需求 | 三斷點原生微調 | 新潮、設計感強 | 適合，免費版即可 |
| Astra | 高，Starter 模板多 | 三斷點 | 中性、商務感 | 適合 |
| Kadence | 高，內建 Kadence Blocks | 三斷點 | 現代、乾淨 | 適合 |
Blocksy 跟 Astra、Kadence 這些同級輕量主題相比，優勢在模板視覺新潮、客製化面板直覺，特別適合需要強烈視覺調性的美髮、攝影、設計業者。Astra 的強項是模板數量多、生態成熟，想做完整對比可看Astra Pro 主題完整教學與用 Astra 打造形象網站。Kadence 走現代乾淨路線，相關實戰可參考Kadence 主題架站實戰。
需要先講一個誠實的限制：Blocksy 的模板視覺雖然新潮，但部分 Starter Site 要搭配 Elementor 才能完整呈現，純區塊編輯器的模板選擇相對少。如果主力是 Gutenberg，Gutenberg 區塊編輯器外掛會是更穩的方向。
- 基於區塊式架構，與 WordPress 原生客製化器深度整合，響應式設定不用寫 CSS
- 免費版內建全站模板匯入、色彩字體全域控制、頁首頁尾建構器，覆蓋品牌站約八成需求
- 輕量主題特性：載入速度快，直接有利 Core Web Vitals 與 SEO
- Pro 版差異化在 Header Builder 進階、Display Conditions 與更多 Starter Sites
講了這麼多，主題選擇其實就是一個問題：你要不要把斷點工作交給主題？如果答案是肯定，Blocksy 是目前免費主題裡 CP 值數一數二的選擇。想看更完整的清單比較，可以參考WordPress 佈景主題推薦清單。對品牌形象打造的整體脈絡，用主題打造專業品牌形象網站也值得一併讀。
什麼情況不該選 Blocksy：四種情境的誠實判斷
任何主題都有它的甜蜜點與盲區，把 Blocksy 講成萬用解方並不誠實。底下四種情境，Blocksy 不見得是最優解，選擇前值得先自我檢視一遍。
| 情境 | 為何 Blocksy 較吃力 | 更合適的方向 |
|---|---|---|
| 主力是 Gutenberg 原生區塊編輯 | Starter Site 多綁 Elementor，純區塊模板選擇偏少 | 改用 Gutenberg 友善主題，或搭配區塊外掛補強 |
| 大型多語言電商、需複雜條件式頁首 | 進階 Display Conditions 屬 Pro 功能，免費版彈性受限 | 評估 WooCommerce 生態更成熟的主題 |
| 設計需高度客製、與設計師深度協作 | 視覺風格已被模板定調，大幅改色改結構成本不低 | 選用幾乎空白的骨架主題，從零刻版型 |
| 團隊已有專屬前端工程資源 | 主題封裝的便利反而成為客製的綁手綁腳 | 用 Headless 架構搭配自訂前端 |
判斷的標準其實只有一條：你的需求落在主題的甜蜜點內，還是落在邊界外。美髮、攝影、設計、顧問這類需要視覺強、頁面數適中、預算有限的服務型品牌站，正好落在 Blocksy 的甜蜜點。一旦你的需求往大型電商、深度工程客製、或純 Gutenberg 工作流偏移，甜蜜點就會失效。如果你的主力是 Gutenberg，Gutenberg 區塊編輯器外掛能補上結構化元件缺口；若要的是更成熟的多語言與商店生態，Astra Pro 主題完整教學會是更穩的選項。
開工前：網域、Hosting 主機與 WordPress 安裝一次到位
RWD 網站的基礎建設是「網域加主機加 WordPress」三件套，缺一不可。選擇支援一鍵安裝 WordPress、附免費 SSL 憑證的 Hosting 虛擬主機，能讓新手在 30 分鐘內完成底層環境，把時間留給設計。
先從網域講起。網域申請的完整流程是：查詢可用網域、註冊付款、把 DNS 指向你的主機。這一步很多人卡在 DNS 設定，其實就是到主機後台拿 nameserver，再回去網域商後台填入。詳細步驟可看網域申請購買全攻略，DNS 指向設定則參考DNS 網域名稱指向設定。
主機類型怎麼選
| 主機類型 | 價格帶 | 技術門檻 | 適合對象 |
|---|---|---|---|
| 共享主機 | 低，月費數美元起 | 低 | 新手品牌站、作品集 |
| VPS | 中 | 中高，需管理 | 流量穩定成長的站 |
| 雲端主機 | 中高，按用量計費 | 中高 | 高流量、需彈性擴充 |
新手品牌站從高 CP 值的共享主機起步即可，等流量真的起來再升級。主機類型的完整比較可看虛擬主機類型比較與選擇。
這裡要特別提醒一個品牌變動：原本大家熟悉的 A2 Hosting 已正式升級為 Hosting 新品牌，根據 Hosting 官方的品牌說明，原本在 A2 的資料官方都已協助移轉至 Hosting，效能更強、費用維持平價。Hosting 提供免費 SSL 憑證與一鍵 WordPress 安裝，平價方案對新手夠用，相關實測可看hosting.com 主機實測評價與A2 Hosting 架站完全指南。
SSL 憑證一定要開。除了資安，根據 Google Search Central 的說明，Google 也把 HTTPS 列為排名訊號。SSL 安裝細節看SSL 憑證安裝與 SEO 影響，HTTP 換 HTTPS 的完整流程看HTTP 換 HTTPS 完整攻略。
安裝完成後，先別急著進主題。先把 WordPress 後台的基礎設定跑一遍：固定連結改成文章名稱、時區設成所在時區、閱讀設定確認首頁指向。這些細節決定後續 SEO 的地基，相關教學可看WordPress 架站新手教學、WordPress 安裝完整教學。費用預算的估算則參考WordPress 自架網站費用解析。
- 網域申請到 DNS 指向主機，是新手最容易卡關的一步，照流程做不難
- 新手品牌站從共享主機起步即可，流量成長再升級 VPS 或雲端
- Hosting（原 A2 Hosting 品牌升級）附免費 SSL 與一鍵 WordPress 安裝
- SSL 必開，根據 Google Search Central 說明，HTTPS 為排名訊號
老實說，這段是整個流程最不性感、卻最不能省的一環。主機沒選好、SSL 沒開，後面 RWD 做得再漂亮，搜尋排名一樣拉不上來。
Blocksy 安裝與全站模板匯入流程
Blocksy 安裝後的第一步不是從空白開始設計，而是從官方 Starter Sites 挑一套貼近品牌調性的全站模板一鍵匯入，再透過客製化器逐步改色、換字、調頁首頁尾。這是 RWD 網站最快從零到有雛形的方法。
佈景主題安裝有三種方法：後台搜尋安裝、上傳 zip 檔、FTP 上傳。新手用後台搜尋最快，搜尋 Blocksy 點安裝啟用就好。完整的三種方法步驟可看WordPress 佈景主題安裝教學。
Starter Sites 全站模板匯入流程
- 安裝並啟用 Blocksy Companion 外掛，這個外掛會解鎖免費版的進階區塊與模板，沒裝等於少看一半功能
- 進入 Blocksy 後台的 Starter Sites，依行業篩選，挑一套美髮或服務業適用的版型
- 確認該模板的編輯器類型，部分模板需搭配 Elementor 才能完整呈現，Gutenberg 模板選擇較少
- 點一鍵匯入，等系統把頁面、選單、外掛一次套好
- 匯入後立刻清理示範佔位內容，換上自家 Logo 與品牌色，避免上線後還看到 Lorem ipsum
這裡有個常見陷阱要提醒：Blocksy 的部分 Starter Site 需搭配 Elementor 才能完整呈現，匯入前要先確認編輯器類型，不然匯入後版型會跑掉或功能缺一塊。如果要用 Elementor，先確認版本，相關指南看Elementor 完整教學與Elementor Pro 購買與功能指南。
Blocksy Companion 外掛的作用是解鎖免費版的進階區塊與模板，這是很多人忽略的關鍵。裝了 Companion，免費版的功能完整度會明顯提升，等於把免費版的潛力榨乾。想擴充更多 Elementor 元件，可參考Elementor 外掛推薦清單。
匯入完成後，別急著改內容，先把全站相關設定走一遍。固定連結、選單架構、頁首頁尾的版型都要先定下來，後續改頁面才不會一直回頭調。頁首頁尾的設計是品牌門面，相關教學看Elementor 頁首頁尾設計教學與WordPress 選單設定教學。
說實在的，模板匯入這一步是整個流程裡成就感最高的時刻。十幾分鐘前一個空站，匯入後瞬間有個有模有樣的網站雛形，這對自己架站的新手是很大的心理鼓舞。但也正因為太快，很多人就停在這裡，忘了清理佔位內容。後續真正要動腦的是配色字體這一關。
響應式頁面設計：用 Elementor 打造首頁、關於我們、聯絡頁
用 Elementor 視覺化編輯器以「區段」的結構組頁面，每個區段都可獨立設定桌機與手機的欄數與排序。設計時遵循行動優先原則，先確認手機版的閱讀動線與 CTA 位置，再回頭優化桌機版。
Elementor 的核心設計觀念是三層結構：Section（段）往下一層是 Column（欄），再往下一層是 Widget（元素）。你要做的不是畫圖，而是把頁面拆成一段段，每段拆成幾欄，每欄放什麼元素。這個觀念一旦通了，任何版型都能拆出來。
行動優先的設計順序
多數人設計頁面是先做桌機版再看手機版，這是錯的順序。正確做法是先用手機視角把閱讀動線走一遍：Hero 大圖是否被裁切、標題是否太大、CTA 按鈕是否在第一屏可見。確認手機版沒問題，再回頭看桌機。因為桌機版的問題多半是「太空」，手機版的問題才是「太擠」，擠的問題不處理，轉換就沒了。
手機版的欄位排序是個關鍵技巧。同一個區段在桌機可能是兩欄並排，到了手機會自動堆疊成單欄，而堆疊順序是可以控制的。你會想把聯絡按鈕或預約入口推到最顯眼處，而不是被服務介紹壓在最下面。這就是 Elementor Responsive 控制的價值。頁面編輯器的整體操作則參考WordPress 頁面建立與編輯教學。
手機版可讀性的三個硬指標
手機版做得好不好，可以用三個能直接量測的硬指標來檢驗，憑感覺很容易誤判。第一是字級與行高。手機正文字級建議落在 16 到 18 像素之間，再小就會逼迫使用者放大滑動；行高則建議抓在 1.5 到 1.7 倍字級，讓眼睛有呼吸空間。第二是點擊目標尺寸。手指不像滑鼠指標那麼精準，按鈕與連結的可點擊範圍建議至少 44 乘 44 像素，間距也要夠，避免誤觸隔壁按鈕。第三是邊界留白。手機螢幕窄，內容貼著邊緣會造成壓迫感，左右各保留至少 16 像素的內距，閱讀節奏才會順。這三項不需要寫程式，Blocksy 與 Elementor 的間距與字級面板都能直接調，但多數新手會忘記量測，只靠肉眼「看起來還行」就放行，結果上線後行動轉換始終拉不上來。
首頁必備區塊
- Hero 大圖或輪播：第一屏就要傳達你是誰、做什麼服務，滿版輪播設計可看Elementor 滿版輪播 Hero Section
- 服務項目區塊：用圖示加簡短文字列出主力服務
- 作品集預覽：放 4 到 6 張精選作品照，引導點進作品集頁
- CTA 行動呼籲：預約或詢問按鈕，CTA 設計原則看CTA 行動呼籲按鈕設計
- 聯絡資訊：地址、電話、LINE、Google Maps 位置
常用區塊建議儲存為範本重複套用，這樣跨頁面才能保持視覺一致。例如首頁的服務項目區塊，可以在關於我們頁重複使用，只換內容不換版型。這個習慣會大幅縮短後續維護時間。
關於我們與聯絡頁的設計重點在建立信任感與降低詢問摩擦。關於我們要放真人照片、經歷、服務理念，讓客人覺得這是個有溫度的人，不是冷冰冰的商家頁。聯絡頁則要把表單做到越簡單越好，欄位越少轉換越高，相關外掛推薦看WordPress 表單外掛推薦與Elementor Pro 表單設計。提升詢問單的整體技巧可參考提升網站詢問單的技巧。
色彩與字體的調整要在 Blocksy 全域設定統一處理，避免逐頁重複設定。先在全域把品牌主色、輔助色、標題字體、正文字體定下來，所有頁面自動套用，要改也只需改一個地方。配色工具可看網站配色計畫實戰，品牌色挑選原則參考品牌色彩挑選指南。字體則參考中文字體推薦與設計與WordPress 本機託管 Google Fonts。
退一步看，響應式頁面設計的本質不是技術，是判斷。判斷手機版的客人在哪一屏會想聯絡你，判斷哪一個區塊該被推到最前面。這些判斷跟工具無關，跟你對自己服務的理解有關。
作品集的分類、展示與手機版呈現
作品集功能用 Blocksy 內建的 Custom Layout，或搭配文章（Posts）加分類的方式就能做出可篩選、可分類的展示頁。關鍵是每件作品給獨立分類標籤，例如剪髮、染髮、造型，讓訪客能在手機上快速篩選想看的服務類型。
作品集三種做法比較
| 做法 | 成本 | SEO 友善 | 維護難度 | 適合 |
|---|---|---|---|---|
| 文章加分類 | 免費 | 高，可自動產生 RSS | 低 | 新手、預算有限 |
| 自訂文章類型 | 免費但需設定 | 高 | 中 | 想區隔作品與部落格 |
| 第三方作品集外掛 | 可能付費 | 視外掛而定 | 低到中 | 需要特殊展示效果 |
對多數服務型業者，用「文章加分類」做作品集是CP 值最高的選擇。每件作品就是一篇文章，發佈時歸到對應的分類，前台用分類篩選器呈現。這做法免費、SEO 友善、還能自動產生 RSS 讓客人訂閱新作品。文章發佈與分類操作可看WordPress 文章發佈與分類教學。作品集網站的整體製作流程可參考作品集網站製作實戰教學。
用 Elementor 做作品集展示也很常見，相關教學看Elementor 作品集展示教學。作品集範本與展示樣式則參考作品集範本與展示樣式。
圖片處理與手機版呈現
- 上傳前先壓縮圖片，避免單張破數 MB 拖垮手機載入速度，壓縮外掛看WordPress 圖片壓縮外掛教學
- 統一作品照比例，例如全部用正方形或 4 比 3，網格才會整齊
- 每張圖加上 Alt 文字，兼顧無障礙與圖片 SEO，完整做法看圖片 SEO 優化指南
- 手機版用兩欄網格或輪播，避免單欄過長導致滑動疲勞
商用免費圖庫可以在作品量還不夠時先墊檔，但長期還是要用自家作品，因為真實作品才是建立信任的關鍵。
講個我實際看到的情況。服務型業者的網站轉換，往往卡在「看到作品卻不知道怎麼聯絡」。解法很直接：把聯絡表單緊接在作品區後面擺放，讓 CTA 按鈕在手機第一屏就可見，能顯著縮短從心動到詢問的距離。聯絡表單的選擇上，Contact Form 7 與 WPForms 都是常見方案，功能描述以兩者在 WordPress 外掛目錄的官方頁面為準。
服務型業者的轉換關鍵其實是三件套：作品照加價位區間加明確預約入口。很多人只放作品照，客人喜歡卻不知道大概多少錢、要怎麼約，最後就放棄了。把價位區間標出來（不必精確到個位數），反而能過濾掉不適合的客群、留住真的會下單的人。這個判斷來自一個常見的誤區：很多設計師怕寫了價格會嚇跑客人，於是什麼都不標。但實務上，不標價格的結果是所有人都來問、問完嫌貴，你反而花了大量時間回訊息卻沒成交。把價位區間寫清楚，等於在詢問之前就先做一次篩選，留下的多半是預算對得上的人。再加上一個手機第一屏就看到的預約按鈕，從看到作品到送出詢問單的動線就能壓到最短。
標價位時用「區間」而不要用單一數字，是有道理的。單一數字會把價值釘死，客人容易拿來跟最低價的同行比；區間則保留了依需求浮動的空間，也暗示你的服務有層次。常見的做法是分三級：入門款給預算有限的客人快速判斷要不要往下看，主力款標出你最常被預約的價位帶，進階款則展示你能承接的高階服務。三級之間的落差要拉開到有感，入門與主力之間建議有明顯價差，主力與進階之間再疊一層，這樣客人在腦中會自然形成「我大概落在哪一級」的自我分類，減少無謂的詢問與退單。把這套區間搭配前面的聯絡表單與手機第一屏預約按鈕，整條接單動線才算真正閉合。
網站上線後：SEO、速度優化與後續維護
網站上線只是起點。後續要用 Google Search Console 與 GA4 追蹤收錄與流量、用快取與圖片壓縮維持行動版速度、並定期備份。RWD 的價值會在數據上顯現為更低的跳出率與更高的行動轉換率。
最快串接 Google 工具的方法是用 Site Kit by Google 這個官方外掛，一次串接 GSC、GA4、GTM，省去逐一手動埋碼。串接教學看Site Kit by Google 串接教學，GSC 完整操作看Google Search Console 完整教學，GA 安裝則參考WordPress 安裝 Google Analytics。
串接完接著提交 Sitemap 到 Search Console，這會加速 Google 收錄你的每一個頁面與每一件作品。Sitemap 的產生與提交看Sitemap 產生與提交教學。SEO 外掛的選擇上，Rank Math 是熱門選項，相關教學看Rank Math SEO 外掛教學與WordPress SEO 外掛評測。WordPress 架站與 SEO 的整體脈絡則參考WordPress 架站與 SEO 全攻略。
行動版速度優化三件套
- 快取外掛：把動態頁面快取成靜態檔，大幅縮短回應時間，推薦清單看WordPress 快取外掛推薦
- 圖片壓縮：上傳時自動壓縮並轉 WebP
- 延遲載入（Lazy Loading）：圖片進入視窗才載入，省下初始載入量，看Lazy Loading 延遲載入指南
速度優化的完整做法可看網站速度優化全攻略，測試工具則參考網站速度測試工具推薦。
這裡要講清楚為什麼速度這麼重要。根據 Google Search Central 的官方說明，Core Web Vitals 三項指標（LCP 最大內容繪製、INP 互動到下次繪製、CLS 累計版面位移）的行動裝置表現直接影響排名。LCP 講的是首屏主要內容多快載入完，INP 講的是使用者點擊後頁面多快有回應，CLS 講的是頁面載入過程會不會跳動。這三項在手機上的表現，比桌機更關鍵，因為手機的網路與運算資源都受限。實務上，一個常見的陷阱是首頁放了太多未壓縮的高解析作品照，導致 LCP 直接破表，手機用戶打開網站白屏超過兩秒就會離開。解法其實不複雜：圖片上傳前壓縮、轉成 WebP、套上延遲載入，再加上一個快取外掛，這四個動作就能把多數服務型網站的行動版速度拉到及格線以上。完整優化實戰看Core Web Vitals 優化實戰。
速度對轉換的影響，有公開案例可以佐證，不必靠直覺。零售品牌 Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%、轉換率提升 33.13%；電信業者 Vodafone 把 LCP 改善 31%，帶動銷售成長 8%；訂票平台 redBus 改善 INP 後，銷售成長 7% [來源：web.dev（Google）〈https://web.dev/articles/why-speed-matters〉〈2026〉]。這三個案例的共同訊息是：速度優化的回報直接反映在營收與轉換上，而不只是排名分數。對服務型網站來說，每多一秒延遲就多一批在手機上直接離開的潛在客人，這些人往往不會再回來。把圖片壓縮、WebP、延遲載入、快取外掛這四件事列為上線前的硬性檢查項，是成本最低、回報最直接的優化動作。
定期備份不能省。用 UpdraftPlus 這類外掛設定自動備份到雲端，一週至少一次，主題與外掛也要定期更新，避免白屏與資安風險。備份外掛推薦看WordPress 備份外掛推薦，UpdraftPlus 操作看UpdraftPlus 備份教學。
持續新增作品文章就是在持續餵養 SEO。每新增一件作品就是一個可被搜尋到的新頁面，累積下來網站會變成長期接單資產。這也是為什麼前面建議用「文章加分類」做作品集，因為每篇作品本身就是一篇 SEO 內容。網站做完後常見的錯誤可參考自架網站常見錯誤，關鍵設計建議看品牌網站關鍵設計建議。從零到一的完整脈絡則可延伸看網頁設計從零到一的完整指南。
回顧一下整個工作流程，其實就是五個環節串起來：網域主機 WordPress 打底，Blocksy 主題加全站模板決定版型骨架，Elementor 處理具體頁面，作品集承擔接單的展示功能，SEO、速度與備份則負責讓網站長期穩定收錄。每一環都做到位，一個能接單的響應式品牌網站才會真的成立。對品牌官網架設的完整流程有興趣，可延伸看品牌官網架設的完整實戰流程、企業為什麼需要形象網站。
常見問題 FAQ
Blocksy 主題是免費的嗎？免費版能做 RWD 網站嗎？
Blocksy 有免費版，且免費版就內建桌機、平板、手機三斷點的響應式微調，足以做出專業級品牌形象網站。付費 Pro 版補強的是進階版型庫、Header Builder 進階與 WooCommerce 擴充，做作品集或品牌站用免費版即可。
不會寫程式能用 Blocksy 做響應式網站嗎？
可以。Blocksy 與 WordPress 原生客製化器深度整合，響應式設定全程圖形化操作，搭配 Elementor 視覺化編輯器組頁面，全程不需要寫一行 CSS。斷點調校約八成由主題處理，你只要在手機視角確認閱讀動線。
Blocksy 跟 Astra 比哪個更適合做作品集網站？
兩者都能做作品集。Blocksy 勝在模板視覺新潮、設計感強，適合美髮、攝影、設計等需要強烈視覺調性的業者；Astra 勝在模板數量多、生態成熟，適合走穩健商務路線。作品集功能兩者免費版都能用文章加分類達成。
美髮作品集網站要怎麼分類與展示？
用 WordPress 文章加分類的做法，每件作品發一篇文並歸類到剪髮、染髮、造型等分類，前台用分類篩選器呈現。手機版用兩欄網格或輪播，避免單欄過長造成滑動疲勞。每件作品緊接聯絡表單，把心動轉成詢問。
Elementor 怎麼設定手機版的欄位排序？
在 Elementor 編輯器切到行動視角，選取要調整的欄位，在進階設定的 Responsive 選項裡調整手機版的欄位順序。同一個區段桌機可兩欄並排，手機自動堆疊時可控制先後，把預約按鈕推到顯眼處。
Blocksy 作品集功能要再裝外掛嗎？
不用。Blocksy 內建 Custom Layout，搭配 WordPress 原生的文章與分類就能做出可篩選的作品集頁，不需要再裝作品集外掛。若要更複雜的展示效果才考慮第三方外掛。
做完 RWD 網站後續要做哪些 SEO？
用 Site Kit by Google 串接 GSC 與 GA4，提交 Sitemap 加速收錄，裝快取與圖片壓縮外掛顧好 Core Web Vitals，定期備份並更新主題外掛。最關鍵的是持續新增作品文章，每一篇都是新的 SEO 內容資產。
Blocksy 免費版的響應式斷點在哪裡設定，能自訂嗎？
在 WordPress 後台進入 Appearance（外觀）的 Customize（客製化），每個面板的設定項旁都有一組桌機、平板、手機的小圖示，點手機圖示就能單獨調整該斷點的字級、間距、欄數與顯示狀態。免費版提供的是預設三斷點的微調，無法自行新增第四個自訂斷點。對服務型品牌站來說，這三個斷點已經涵蓋主流裝置，需要極致客製斷點屬進階需求，通常要寫自訂 CSS 處理。
用 Blocksy 做 RWD，圖片要怎麼準備才不會拖垮手機速度？
三個動作組合起來最有效。第一，上傳前先壓縮圖片並統一比例，避免單張破數 MB。第二，讓主題或外掛把圖片轉成 WebP 格式，在同等畫質下檔案更小。第三，套上延遲載入，讓進入視窗的圖片才載入，省下初始載入量。首頁的 Hero 大圖尤其要控制，因為它直接決定 LCP 表現，是手機版速度最常破表的位置。