Landing Page 製作教學：策略、WordPress、CTA 與量測

如果廣告承諾某項方案，點擊後卻只看到公司首頁，訪客可能得重新尋找相關內容。到達頁（Landing Page）的任務，是接住特定流量的問題與下一步；設計前先查廣告、受眾與頁面內容是否一致，不能只憑「沒有名單」認定首頁是唯一原因。

Landing Page 是訪客點擊連結後到達的頁面；行銷實務常把它設計成服務某項主要任務，例如預約、下載或購買。它不一定必須拿掉所有導覽或只留下唯一出口。清楚的內容、必要的信任資訊與可操作的下一步，比強行限制訪客選擇重要。

本文從受眾與流量來源開始，整理文案、頁面結構、WordPress 與 Elementor 的建置方式，以及速度、結帳與量測。若已有頁面，可接著看Landing Page 轉換率優化指南；第一次製作則先完成最小版本並測試目標任務，沒有一種版型能保證轉換。

先別急著開 Elementor：釐清 Landing Page 到底要解決什麼問題

開始排版前，先定義頁面服務的受眾、入口訊息與主要完成事件。這能讓標題、證據、導覽與 CTA 有共同依據；若讀者還需比較條件或查閱信任資訊，頁面可以保留必要的輔助連結。

Landing Page 是訪客點擊廣告、電子報、社群或搜尋結果後抵達的頁面。設計時先對齊入口承諾與訪客任務，再讓主要行動清楚可見；若比較條件、聯絡方式或條款能幫助判斷，也應保留適當入口。

所以第一步該做的，是把工具擺一邊，先回答一個問題：這張頁面要完成的單一動作是什麼？把答案寫成一個動詞片語，別寫成名詞。

• 不要寫「產品介紹頁」，這是名詞，沒有方向。
• 要寫「讓訪客按下立即購買並完成結帳」，這是動詞，有明確終點。
• 要寫「讓訪客留下 email 換取折扣碼」，一樣是動詞，而且可以拿來衡量。

把頁面主要任務寫成動詞片語，例如「預約諮詢」或「完成購買」。這能協助設定 CTA 與 GA4 事件；ROAS 的計算還需要正確的廣告成本和營收資料，不能只用一個事件當分母。

首頁、產品頁、Landing Page，到底差在哪

很多人把這三種頁面混為一談，結果做出來的「Landing Page」其實是縮小版的首頁。我用一張表把它們拆開給你看。

到達頁可以刪除與目標無關的干擾，但不必把導覽、關於我們或其他信任資訊一律移除。若訪客需要確認商家、比較方案或閱讀條款，保留清楚的入口反而有助於完成任務。先看讀者需求與測試結果再做減法。

你也可以把這個原則想成「降低摩擦」。訪客每多看到一個選項、每多被問一個問題、每多點一下，都可能增加放棄機率。Landing Page 的工作，是讓主要動作更清楚，同時移除與任務無關、容易造成分心的元素。

什麼時候你根本不需要 Landing Page

這個問題很少被問，但它能幫你省下不少冤枉錢。並不是每個行銷活動都需要重新做一張頁面。如果你的流量來自 SEO 自然搜尋、訪客已經在搜尋具體商品，那麼一個優化得當的產品頁，往往表現得比臨時拼湊的 Landing Page 更好，因為產品頁本身就帶有搜尋意圖的信任感。

到達頁特別適合承接有明確承諾的廣告、電子報或社群連結，但搜尋流量同樣可能有很清楚的任務。先檢查入口訊息、頁面主張與行動是否一致，再決定需不需要一張獨立頁面。它在行銷漏斗中的位置會隨受眾與商品而變，並不固定只在中段。

我幫線上課程品牌做銷售頁學到的事：一張頁面只該背一個任務

一個常見情境是：同一張頁面同時想蒐集名單、直接銷售，還要推另一項產品。三個任務各自需要不同訊息與按鈕，放在一起容易互相搶注意力。處理方式是先選出主要轉換，其餘任務移到後續頁面或不同活動。

後來我們做的第一個動作是拆頁面，連設計都還沒碰。把三個任務拆成三條各自獨立的動線，給三種不同狀態的訪客。那次最大的收穫跟任何視覺技巧無關，就是一個觀念：一張 Landing Page 只該背一個任務。當你想在一張頁面上同時完成「留名單」和「直接成交」，你等於在問訪客兩個完全不同的問題，而他多半兩個都不會回答。

這也呼應了顧客旅程地圖的核心想法：不同階段的客戶需要不同的頁面。把 Landing Page 依照它要完成的任務分類，你會發現設計方向自動變清楚。

這張表真正要看的是第二欄「頁面要回答的問題」，分類只是外殼。鎖定問題後，標題、見證與定價區塊就能繞著同一任務安排；不支援任務的段落則刪除或移到其他頁面。

轉換發生在文案，不在特效：頁面要先回答的五個問題

視覺設計、文案、載入速度與互動流程都可能影響訪客是否理解方案並完成任務，不能預先說動效貢獻接近零或文案單獨決定轉換率。先讓標題、證據、價格與 CTA 清楚，再依實際裝置、完成事件和測試結果決定哪些效果值得保留。

寫到達頁文案時，可先列出讀者可能要確認的事：這是否適合我、能解決什麼、憑什麼相信、要付出什麼、下一步會發生什麼。這是編排內容的檢查表，並非每個訪客都會按固定順序閱讀或漏掉一項就離開。

1. 這是在講我嗎？標題與首屏必須讓訪客一眼認出「這是寫給我的」。錯誤的標題會強調你賣什麼，正確的標題會強調訪客的痛點。
2. 這能解決我的什麼問題？用一到兩句話講清楚你的方案對應到他的哪個具體困擾，不要講功能，要講結果。
3. 憑什麼相信你？見證、媒體報導、使用人數、過往案例，這裡需要的是可查證的社會證明，不是形容詞。
4. 要花多少錢、划不划算？定價與價值錨點。把「不買的代價」跟「購買的成本」放在一起比，才會有感。
5. 我現在需要決定嗎？若名額、期限或價格確有變動，清楚寫出真實條件與截止時間；若沒有，就說明購買、預約或下載後會發生什麼，不要製造會重設的倒數或虛構限額。

這五個問題背後其實是一套心理學，你要更系統性地練這塊，可以讀文案寫作全攻略。而在這之前，你得先知道你在跟誰說話。寫文案之前我一定會先做的一件事，是確認這張頁面的目標對象輪廓，這部分的練習在Persona 人物誌建立指南裡有完整步驟。沒有 persona，你的文案就是在對空氣講話。

一個常見的誤解是：把這五個問題的答案直接照順序寫成五個段落就好。不是的。真實的讀者不會乖乖從第一段讀到第五段，他們會跳著看、會往下滑、會先看價格、會先看見證。所以你的頁面不能只有一條閱讀動線，而是要在不同的捲動深度，重複出現「這是在講我嗎」的訊號，並且讓主按鈕在整張頁面裡出現不只一次。這就牽涉到頁面的骨架設計。

從首屏到行動按鈕：把讀者的視線當成一條動線來設計

好的 Landing Page 像一家動線設計良好的商店：你一進門就知道該往哪走，沿途有提示、有引導，走到盡頭就是結帳櫃檯。壞的 Landing Page 像雜貨倉庫：東西堆得到處都是，訪客走兩步就撞到一個跟任務無關的區塊。

這張表是我設計頁面時一定會照著排的骨架。不是每一張頁面都要全部出現，但每一個區塊都有它的工作；如果你決定不放某個區塊，要清楚知道你拿掉了什麼功能。還抓不到段落順序的話，先去幾個找設計靈感的網站翻同產業的真實案例，把重複出現的區塊順序記成清單，回頭再對這張表調整。不同類型頁面怎麼安排這些區塊，可以對照網頁排版結構範例裡的案例，一邊看一邊調整你手上的骨架。

「首屏」會影響訪客是否繼續閱讀。它應快速讓人理解這頁給誰、提供什麼，以及下一步在哪裡。沒有公開規則要求一定在三秒內完成，但首屏若塞入與任務無關的內容，容易造成分心。

CTA 應在讀者需要採取行動時容易找到，文案也要與點擊後的結果一致。可以按CTA 按鈕設計檢查可見度與操作，再用CTA 優化檢查表單和後續路徑；是否重複放置，應看頁面長度、內容節奏與使用資料，而不是在每個區塊都放一顆。

還有一個台灣市場特別要注意的點：手機。你的頁面在手機上的首屏，能顯示的內容只有桌機的三分之一。桌機上排得很漂亮的首屏，到手機上可能只剩一個標題加半張圖，主按鈕被擠到螢幕外。所以要依實際流量與任務同時檢查手機與桌機；手機版應特別檢查首屏資訊、表單與主要行動，這個觀念在響應式網頁設計 RWD裡有完整的實作說明。

用 WordPress 加 Elementor 把第一張頁面蓋出來（含免費與付費的選擇）

策略、文案、骨架都想清楚之後，才輪到工具。Landing Page 的製作工具大致分三條路：用你現有網站的 CMS 自己蓋、用獨立的託管式 Landing Page 工具、或直接寫程式刻。對大多數已經在經營網站的人，我會推薦第一條路，也就是在你熟悉的 WordPress 裡完成，理由很簡單：能跟你既有的流量、商品、名單、追蹤全部接在一起，不用再維護第二套系統。

WordPress 提供多種主題與頁面建置方式，以下只以一條常見流程示範。W3Techs 的 CMS 統計顯示其採用規模，但市占不能證明任何需求都有現成、適合或安全的解法；外掛選擇仍要看相容性、維護與效能。

在 WordPress 裡，用輕量主題搭配視覺化頁面編輯器是常見做法之一。Hello Elementor 是為搭配 Elementor 設計的主題，可見 WordPress.org 上的 Hello Elementor 頁面；Elementor 則提供拖曳式編輯，詳情見 WordPress.org 的 Elementor 外掛頁。是否適合仍要看效能、維護與既有網站架構，入門流程可看Elementor 完整教學。

免費版能做什麼、什麼時候該升級 Pro

免費版通常足以組合標題、圖片、按鈕與基本版面；表單、彈出視窗、頁首頁尾範本等功能是否包含在特定付費方案，會隨產品與方案調整，可查 Elementor 官方定價頁（2026 年）。升級前先核對當期功能表，也可用其他相容表單工具補足。購買考量見Elementor Pro 功能指南。

如果你是從零開始、連 WordPress 都還沒裝，建議依序把基礎搭起來：先搞定主機與網域（虛擬主機完整指南與網域申請購買全攻略），再安裝 WordPress（WordPress 安裝教學），然後安裝外掛（WordPress 外掛安裝教學）。整個建站流程串起來，就是如何架設網站的完整自學指南的路線；如果你的目標是形象站加 Landing Page 一起搭，WordPress 架站新手教學會更貼近你的需求。

除了 WordPress，還有哪兩條路可以選

獨立託管式工具適合想快速上線、願意負擔訂閱與平台限制的團隊；自行開發則可控制實作細節，但要安排工程與維護。兩條路線的速度、成本與 SEO 控制都取決於具體產品與建置方式，不能預設哪一條一定最快或最貴。

WordPress 適合需要長期累積內容、串接電商與名單工具，而且有人能持續維護的情境。若只是短期報名頁，託管工具也合理。選擇時應問「頁面要活多久、要串接什麼、誰來維護」，平台比較可參考架站平台比較。

為什麼速度會吃掉你的轉換率：Landing Page 的效能底線

頁面做得再漂亮，如果手機載入與互動緩慢，訪客可能在看見首屏或完成動作前離開。不能用「六秒就流失一半」套用所有頁面，但速度確實會影響使用體驗與轉換，應以實際裝置與分析資料驗證。

載入速度會影響使用體驗，但改善 Core Web Vitals 不能直接換算固定轉換增幅或搜尋排名。先量測 LCP、INP、CLS 並找到實際瓶頸，再比較圖片、腳本、主機或版面配置的影響；Google 在web.dev 的速度文章與Core Web Vitals 文件說明概念，實作可接著看Core Web Vitals 指南。

付費流量進入的頁面若載入慢，可能增加訪客離開的機會，也可能浪費已支付的點擊費用；但流量來源並不決定每位訪客的耐心。先看真實裝置的載入、廣告承諾與完成事件，才知道該優先處理什麼。

站內讀者用什麼裝置、連線速度如何，應優先查看自己的分析資料與測試回饋。全球行動流量比例只能作外部背景，不能推定所有訪客使用 4G 或中階手機；至少要在實際目標裝置與較差條件下檢查。

效能目標應以實際訪客的裝置與網路資料來訂。Google 建議以第 75 百分位的 LCP 2.5 秒以下作為「良好」門檻，並分別查看手機與桌機；這衡量的是最大內容繪製，不等同「兩秒內看到第一個有意義畫面」，也沒有通用的「超過三秒就流失多少人」定律。先用 PageSpeed Insights 或 Search Console 找出真實瓶頸，再在目標裝置上走完整個表單或結帳流程。

四個立刻能做的速度優化

你不需要會寫程式也能做接下來這幾件事，但它們對 Landing Page 的速度改善通常最明顯。

• 先量測圖片。找出首圖、背景或字型是否成為 LCP 瓶頸，再依品質和版面需求調整尺寸與格式；沒有每張都適用的 200 KB 上限。做法可看圖片壓縮工具與WordPress 圖片優化。
• 檢查腳本與動效。停用不必要的外掛，保留對任務有幫助的互動，實測停用前後的效能和轉換。
• 管理頁面資源。依需要載入字型與元件，並檢查快取、主機與第三方服務。
• 正確部署 HTTPS。保護資料傳輸與瀏覽器信任；它不等於速度保證。設定可參考SSL 憑證指南。

速度優化先看讀者實際遇到的瓶頸，而不是追求 PageSpeed 滿分。首屏圖片、字型、腳本和伺服器回應都可能影響 LCP；表單或按鈕互動也需要檢查 INP。依量測與主要任務排優先順序。

結帳頁是 Landing Page 的延伸：電商頁面最常被漏掉的收尾

如果你做的是直接成交型的 Landing Page，尤其是電商，那麼頁面本身只是前半段。真正決定訂單會不會成立的，是結帳那幾個欄位。我把結帳頁看成 Landing Page 的延伸，它跟銷售頁是同一條動線，只是任務從「說服」換成了「收錢」。動線一斷，前面再漂亮的文案都白搭。

Baymard Institute 的結帳可用性研究整理了強制註冊、欄位不清楚與費用不透明等可避免摩擦（2026 年的資料）。但結帳流失也可能來自價格、運費、付款方式、比較購物或暫時沒有購買意願，不能全歸因於設計。

而如果你的網站跑在 WooCommerce 上，這件事特別值得花心力。WooCommerce 是 WordPress 生態裡常見的電商外掛（WordPress.org 上的 WooCommerce），根據 W3Techs 的資料（2026 年 6 月），它在使用內容管理系統的網站裡也占有一定份額。預設結帳流程是否符合你的客群，需要用實際付款、物流與表單測試判斷。

台灣電商結帳的三個收尾動作

做 WooCommerce Landing Page 時，結帳這關要完成下面三件事，它們直接影響交易收尾。

• 精簡並測試結帳表單。移除不必要欄位，但保留付款、配送、發票與客戶服務所需資料；修改後用實際付款及物流情境測試。做法可看WooCommerce 結帳表單客製化教學。
• 把金流物流接好。台灣消費者期待信用卡、超商取貨這些在地選項，沒接好等於把到手的訂單推走。串接綠界等在地金物流的完整流程，參考WooCommerce 金流物流設定全攻略。整個電商從零搭起來的路線，則是WooCommerce 電商架站實戰。
• 商品頁當成 Landing Page 來優化。很多時候訪客從廣告點進來的是商品頁，並非獨立銷售頁，這時商品頁就是你的 Landing Page，它的標題、圖片、評價、結構化資料，全部都要照 Landing Page 的邏輯來排，做法在WooCommerce 商品頁 SEO 優化。

把結帳當成 Landing Page 的一部分來想，你會突然看懂很多流失。例如：訪客在結帳頁才發現運費比想像中貴、才發現沒有他慣用的付款方式、才發現要註冊帳號才能買。這些都不是文案問題，是流程問題，而且全都在你「頁面以外」的地方發生。

上線那一刻才開始：用 GA4 與 UTM 看懂頁面有沒有在工作

頁面上線，是工作的開始，不是結束。太多人把 Landing Page 上線當成終點，從此不再看數據，下一次要做的時候又憑感覺重來。一張 Landing Page 沒有數據，就等於沒有方向，你永遠不知道它是好是壞，也不知道該改哪裡。

GA4 可追蹤進站與事件，UTM 可標記部分外部活動來源，但兩者也有歸因與資料缺口。先定義頁面主要完成事件，再依GA4 教學和WordPress GTM 串接核對是否正確送出；UTM 教學則能協助區分已標記的活動，不代表每筆轉換都能確定由單一廣告促成。

GA4 事件與 UTM 可協助回答流量來源、到達頁操作與完成情況，但還需結合廣告成本、線索品質與後續銷售。先確認追蹤正確，再按來源和任務比較；這些數字不會自行解釋成效原因。

這張表可當診斷漏斗：先看參與與捲動，再看按鈕與轉換。跳出率低但轉換率低時，應優先檢查表單、結帳、價格與 CTA，但不能因此排除文案問題；跳出率高也要拆分流量品質、載入速度、量測設定與首屏訊息。

還有一個很多人輕忽的測量細節：你要看的是「同一批流量在頁面上的行為」，別把所有來源的流量混在一起看平均值。平均值會騙人。把廣告流量、email 流量、社群流量全部倒進同一個轉換率數字裡，你會看不出哪一條流量其實表現很差、哪一條表現很好。這也是 UTM 標記真正的價值所在，它讓你能把不同來源的流量分開檢視，分開優化。

流量從哪裡來，決定頁面該長怎樣

Landing Page 要對應流量來源與廣告訊息，UTM 能協助分組觀察。搜尋廣告不一定都是高意圖，社群流量也不一定需要先講故事；應以受眾、素材承諾與查詢內容決定頁面。入門投放可看Google Ads 教學與Meta Ads 教學，再用數據判斷是否需要多個版本。

我全踩過的 Landing Page 地雷，你可以直接繞開

前面談的都是該做的事，這一節來談不該做的事。這些坑我全都踩過，有些還踩了不止一次。把它們列出來，是希望你不用再花學費。

第一個雷：導覽分散了主要任務。使用 WordPress 預設頁面範本時，先檢查導覽、頁尾與側邊欄是否讓讀者找不到主要行動；若造成干擾，可測試精簡版或空白範本，同時保留必要的聯絡、條款與信任入口。若需整站頁首頁尾客製，可參考Elementor Pro 頁首頁尾設計。

第二個雷：一張頁面放好幾個目標。前述多目標情境會讓按鈕與訊息互相競爭。較清楚的做法是一張 Landing Page 設一個主要任務；若確實需要次要動作，要降低其視覺權重，或拆成不同頁面測試。

第三個雷：用形容詞寫文案，不用證據。「業界最強」「品質保證」「值得信賴」，這些字每一個人都會寫，所以沒有一個訪客會相信。要讓人相信，就拿出可查證的東西：服務過多少人、多少家媒體報導過、哪個第三方認證、真實客戶的名字與頭像。沒有證據的時候，誠實地少說一點，反而比灌水更有說服力。

第四個雷：忘了測手機。我在桌機上把頁面調到完美，興沖沖上線，第二天用手機打開才發現主按鈕被圖片蓋住、表單欄位超出螢幕。從此之後我的規矩是：任何 Landing Page 上線前，一定要用實際的手機（不是開發者工具的模擬器）打開來走一次完整的流程，從點廣告、看首屏、捲到底、按下按鈕、填表單，一個都不能少。一頁式網站在手機上還有其他該注意的點，一頁式網站設計全指南有完整的整理，包括詐騙頁面的辨識，這對品牌信任也很重要。

第五個雷：把彈出視窗當萬靈丹。Popup 可能增加名單，也可能打斷閱讀、妨礙無障礙與行動版操作。觸發時機沒有固定最佳答案，應限制頻率、提供清楚關閉方式，並用實驗比較轉換與退出。設定方式見彈出視窗教學。

到達頁要能回答訪客從入口帶來的問題，提供足夠的條件與信任資訊，並讓下一步清楚可操作。導覽、FAQ、證據和 CTA 的安排，應依任務、風險與測試決定，不是越少越好。

結語：一張好的 Landing Page，是一場被設計過的對話

走到這裡，你應該看出一件事：Landing Page 的本質不是網頁設計，是對話設計。你在跟一個特定的人，用一條特定的動線，回答他心裡依序浮現的問題，引導他走到一個明確的下一步。技術與工具（WordPress、Elementor、GA4、WooCommerce）都只是讓這場對話能夠發生的舞台。真正決定成敗的，是你對那個人的理解有多深，以及你設計的這條對話動線有多順。

做 Landing Page 要從策略開始，工具放在後面。工具會更替，受眾仍需要理解價值、降低風險並看見明確下一步；至於哪種表達能轉換，要靠研究與測試確認。

如果你要我把整篇濃縮成一個能立刻執行的行動方案，會是這五步。

1. 寫下這張頁面的單一任務。用一個動詞片語寫，不要寫名詞。例如「讓訪客留下 email 換取折扣碼」。
2. 列出目標對象的三個痛點。對應到文案那五個問題裡的「這是在講我嗎」。沒有痛點，就先去做 persona，不要急著寫文案。
3. 排出頁面骨架。照前面那張骨架表，一個區塊一個區塊排，每一個區塊都寫下它要回答的問題。還沒有視覺，只有結構。
4. 用最簡單的方式把它做出來。WordPress 加 Elementor 免費版就夠，重點是頁面能跑、手機能看、按鈕能點。先有再美，不要倒過來。
5. 上線、裝追蹤、看數據。先驗證 GA4 事件與 UTM，再累積足以判斷的樣本；一週不一定足夠。依跳出、捲動、點擊與轉換找出最需要檢查的環節。

第一版到達頁上線後，先確認事件是否正常記錄，再看讀者是否看懂承諾、能否完成任務。若成效不如預期，分別檢查流量意圖、頁面內容、技術問題與後續處理；留下修改與結果，下一輪才有依據。