Landing Page 銷售頁設計：製作一頁式行銷漏斗 - 犬哥網站

這是一篇完整「 Landing Page 設計」教學，帶你打造一頁式銷售頁，如果你銷售的商品、服務並不多，或是只想單獨強推某一項商品，並讓此商品能賣得很好 ... Skiptocontent 這是一篇完整「LandingPage設計」教學，帶你打造一頁式銷售頁，如果你銷售的商品、服務並不多，或是只想單獨強推某一項商品，並讓此商品能賣得很好，那這篇文章會對你有幫助！ 跟著文章步驟，即可從無到有，建置出完美的LandingPage商品銷售頁，讓商品購買、結帳都在同一頁面完成，並在購物結束後，跳轉至感謝頁面。

你能大幅省掉多餘的購買流程（能有效降低顧客跳出率），這也是在眾多同性質商品中，可脫穎而出衝高營業額的好方法之一。

文章內，從最基本的 架設網站（網域購買、主機選擇）>基本主題/重要外掛安裝>銷售頁設計（商品銷售頁、結帳頁面、感謝頁面）>完成網站上線。

★☆—重要資訊—☆★ 犬哥網站與A2Hosting主機有長期合作關係，點擊網站上任一個A2Hosting連結前往官網（包含點擊此連結），最高可享有70%的讀者折扣，請一定要把握：） 跟著文章步驟，即可從無到有，建置出完美的LandingPage商品銷售頁，大大提升單一產品的轉化率！ 準備好的話，就開始囉。

本文章節如下： 1.如何自架網站？2.虛擬主機推薦3.A2Hosting方案選擇4.HelloElementor主題介紹5.HelloElementor安裝＋啟用6.Elementor是什麼？7.ElementorPro如何購買？8.ElementorPro安裝＋憑證連線9.ElementorPro主題編輯器10.頁首/頁尾設計11.WooCommerce介紹＋安裝12.WooCommerce基礎設定＋金物流串接 13.新增WooCommerce商品14.CartFlows外掛介紹＋安裝15.新增一頁式銷售頁（套用模板）16.CartFlows指派商品17.新增＋設計商品描述版型18.設計結帳表單區塊19.設計感謝頁面20.會員帳戶管理常見問題WordPress學習資源 1.如何自架網站？ 架設網站3要素 1.網域申請（申請門牌） 2.主機租用（租一塊地） 3.網頁設計（搭建房子） 網站能正常運作，就需有「個人網域」＋「虛擬主機」，這是基本配備。

這也是每個網站主都需負擔的小投資，沒有例外。

差別是，跟著我的架站教學，你可用最少的預算，建置你的網站：） 網域如何取名呢？ 網域是什麼？「網域」是網站組成的第一步，就像家的門牌一樣，讓人可以順利找到你的網站。

簡單好記：越簡單的網域名稱越方便使用者查詢和記憶。

例：蘋果–https://www.apple.com/ 品牌名稱：網域名稱以品牌為名，打算發展品牌的公司，可用這個方式。

例：愛迪達–https://www.adidas.com/ 與服務or產品有關：與服務或產品有關聯。

例：博客來–https://www.books.com.tw/ 去除www：目前大部分新網址都不太會在前面加上www，這是比較舊式的用法。

.com優先：.com是大多數人的直覺印象，主要方便好記，增加搜尋率。

勿用中文：網址傳輸是以英文為主，所以網址上有中文，就會轉成一長串的特殊符號＋數字，除了難記外，對排名也不太理想。

網域取名完成後，接下來可以看一下網域後綴部分（或稱為頂級域名），要如何選擇呢？ 一般最常選擇的就是.com類型的頂級域名，它適用於任何場合或服務，通常也是最熱門的選擇（會建議優先選擇）。

但有時候喜歡的網域名字，剛好偏偏被註冊走了，就能用更換頂級域名的方法，還是有機會註冊到自己喜愛的名字。

有關於網域後綴名（頂級域名），有哪些常見的類型呢？下面僅列出一些分享。

tw/cn/jp：代表不同國家，如台灣、中國、日本等..（選擇這類型的網域，可挑選網站主要訪客的居住地）。

co：可解讀為公司或企業的英文縮寫，但基本上適用於任何情況，可當作com申請不到的替代方案（簡單好記）。

net：網路相關行業可使用，但無明確限制。

info：資訊性類型網站可使用，但無明確限制。

org：organization（組織）縮寫，適合非營利組織、基金會、人文組織、宗教組織等..，但無明確限制。

虛擬主機是什麼？ 「虛擬主機」是主機公司在自管的實體主機上，切分成多個虛擬空間，並把這些空間，租給一般使用者使用。

這樣可大幅降低使用者的費用，因為養實體主機是很貴的，所以絕大部分的網站主，通常都是租用現成的。

另一個比喻，如果把網址比喻成「門牌」，那虛擬主機就是「家」的角色。

如果網頁製作完成了，就需放置在優質的虛擬主機，才能確保網站不會受到攻擊，和速度穩定。

如何挑選虛擬主機？ 公司規模：國外知名虛擬主機公司，都是全球性服務，不論公司規模、營運歷史、主機性能、規格服務，通常優於國內主機。

主機性能＆功能性：主機穩定度＆安全性是重要的，網站才會安全有保障。

還有主機的方案規格是否理想。

方案價位：通常國外的價格，會比國內便宜，但建議不要都價格取向，如果主機因此性能不好，之後你也會選擇離開的。

WordPress是什麼？ WordPress它是全球知名的網頁設計軟體，全球有40%以上的網站，都來自於WordPress。

WordPress網站使用人數 擁有上萬個佈景主題（樣板）和功能外掛，只需一鍵安裝即可成為多功能網站。

或許你不知道怎麼選，請參考優質佈景主題和優質外掛推薦，會給你應該的幫助。

WordPress可完成多種網頁設計，如：部落格架設、個人品牌或公司企業官網、購物網站架設等.. 最大好處是，它是免費開源的軟體，可完全掌握自己網站資料，不需被任何網路平台、網頁設計公司牽制。

因為你就是網站的擁有者。

2.虛擬主機推薦 A2Hosting是一家全球知名的虛擬主機和網域託管服務商，它從2001年就開始提供相關服務，由於創辦人本身有程式相關背景，所以主機速度優化上，一直是它們的服務重點。

它在虛擬主機上提供多種服務項目，像是共享主機、WordPress專業主機、VPS主機、獨立主機，隨著你的網站規模越大（流量越多）可同步升級服務，滿足不同時期的需求。

搭配24/7/365全年無休的線上客服，遇到任何問題能在第一時間幫助解決。

不需擔心語言不通問題，因為A2Hosting客群來自世界各地，用簡單的英文程度（Google翻譯），他們都聽得懂唷。

A2Hosting正常運行時間和安全性 根據過去24個月的數據，A2全年有99.9%以上的正常運行時間（沒任何一家能保證100%），這代表你網站幾乎不會異常斷線，都是穩定的在線上運作。

這使它成為主機穩定度、安全性的有力競爭者。

A2hosting：主機正常運行時間 A2Hosting網站速度表現好嗎？ A2Hosting在全球各地有多個數據基地台，滿足不同地點的主機連線速度，像是台灣用戶就可到連線最近的新加坡基地。

這是我之前主機放置在A2Hosting所做的記錄（評測紀錄是A+），網站加載速度大約83毫秒，是優質的主機速度。

虛擬主機響應速度（來自bitcatcha評測） Google建議的響應時間是200毫秒（越短越好）。

所以低於180毫秒的網站內容會被評為A+。

A2Hosting的TurboBoost以上方案，有針對主機速度做特別優化，官方表示會比一般常規站點最多快上20倍，這是它的特別優勢。

配上A2Hosting任一個共享主機方案，全部皆使用SSD存儲，這確實有助於其快速加載速度（SSD的速度比普通硬碟快30％）。

每降低一秒的網站速度，這代表能保留更多訪客留存，進而轉化成網站訂單。

3.A2Hosting方案選擇 這章節會進行「A2Hosting」的主機方案選擇，帶你選擇適合自己的方案。

首先，點擊前往A2Hosting官網，會直接來到WebHosting主機頁面，或是點選Hosting>WebHosting前往也可以。

前往WordPressHosting主機 點擊此處，獲得A2Hosting的專屬優惠 接著往下滑，會看到不同的主機方案，如果你正猶豫如何選擇，下面我會給你一些選擇建議。

A2Hosting教學：WordPress主機方案選擇 小備註：方案價格會隨著主機廠商有所調整，以A2Hosting官網呈現價格為主。

要選擇哪種A2Hosting主機方案？ A2Hosting共享主機提供4種方案選擇，分別是StartUp（入門）、Drive（行駛）、TurboBoost（渦輪）、TurboMax（增大渦輪）。

它的任一種方案，全都享有WordPress一鍵安裝、大量網路SSD儲存空間、不計網站流量、SSL免費憑證、A2速度優化軟體、免費網站搬家、CloudFlareCDN服務、CPanel多功能介面、數據中心選擇等..，這是超值的功能服務。

隨著方案提升又提供更多進階功能，這邊我簡單的統整，方便你找到適合自己的方案。

只需架設一個網站，且有預算考量：StartUp方案 需架設多個網站，且有預算考量：Drive方案 需架設多個網站，且預算還算足夠，對主機速度有進一步追求者：TurboBoost方案 如果是WordPress新手入門，會建議選擇StartUp或是Drive方案，能讓你用最少預算開始，也不會一開始負擔就太多。

Drive方案以上，都能架設無限網站、無限網路儲存空間，所以整體會比StartUp划算一點（但還是要看你的預算）。

不管選擇的是哪種主機方案，A2Hosting本身賣點就是注重主機速度，所以表現基本都會在水準之上（不會因為你是否選擇TurboBoost方案）。

但如果你有現成或是較多的穩定流量，會建議直接選擇TurboBoost方案。

此方案大幅優化了主機速度，它們表示TurboBoost方案以上的主機速度，比一般常規站點快上20倍，比較不會遇到速度上的問題。

至於TurboMax方案我不建議使用，因為這個費用太貴了（同樣費用有更好的選擇），且和TurboBoost方案功能差不多。

如果A2Hosting整個共享主機方案都還是無法滿足你，有關於更高規格的主機，會比較推薦Cloudways雲端主機。

A2Hosting費用了解 A2Hosting通常費用是，網址$14.95美元/年（一年約450台幣），和主機$10.99美元/月（一年約3960台幣）。

值得開心的是，A2Hosting 官方同意為我們網站讀者，提供最高可享有70%的主機折扣，一次購買越多年折扣越多（這裡需特別留意，A2Hosting只有年租方案才享有優惠價格）。

下表是用台幣計算，美元台幣匯率用經常的1：30換算（P.S當前匯率更低，換算下來更優惠）。

StartUp方案Drive方案Turbo方案買一年：特價約2520元買一年：特價約3600元買一年：特價約3960元買三年：特價約3230元買三年：特價約6450元買三年：特價約7550元 小提醒：新手可購買1年的StartUp或是Drive方案，用最少預算入門：） 點擊此處，獲得A2Hosting的專屬優惠 這等於說，在A2Hosting申請個人網域和主機，最少可用大約3000台幣（網域＋主機費用），就能開始啟動你的網路事業，並享有完整的主機規格服務。

不論你購買的是哪種主機方案，只要點擊本站A2Hosting連結，讀者們都享有優惠價格。

剩下的A2Hostung購買流程＋建置WordPress網站教學，可前往：A2Hosting完整教學繼續學習唷！ 4.HelloElementor主題介紹＋安裝 WordPress佈景主題：HelloElementor推薦 HelloElementor是由知名頁面編輯器Elementor所開發的輕量化主題。

更多Elementor基礎教學。

若是使用Elementor的站長，可以考慮使用HelloElementor佈景主題，體驗Elementor整套系列的完整服務。

HelloElementor佈景主題相較其他主題，更強調其輕量化的特色，可達到：網站速度升級、非侵入性的代碼，刪除不必要的樣版等..成效。

而主題本身整體容量只有6KB，其輕量化的特色在眾多主題中確實表現的較為優質。

HelloElementor主打提升速度、輕量化主題 另一個優點是，HelloElementor為輕量化主題，優化頁面速度和性能，可強化SEO，提升網站在搜尋引擎中的排名，降低使用者跳出率。

HelloElementor強調其提升網站SEO功能 設計頁面方面，我們可以從完全空白的頁面開始建構，也可以套用多樣化模板。

更多ElementorPro進階教學。

HelloElementor有許多不同類型的網站模板，可供站長依據自身需求選擇套用。

HelloElementor可套用多樣化模板 同時HelloElementor具備多種基本主題設計功能：頁首及頁尾編輯器、響應式網頁、串接多款第三方外掛、保持開源等..。

以Elementor開發的佈景主題來說，一定會是最兼容Elementor編輯器，我們也可以期待HelloElementor日後的表現：） 立即取得HelloElementor 5.HelloElementor安裝＋啟用 這個章節，我們就來安裝HelloElementor佈景主題吧！更多如何安裝主題（3種方法）。

前往WordPress>外觀>佈景主題>安裝佈景主題。

前往安裝WordPress佈景主題 搜尋「HelloElementor」，選擇安裝＋啟用。

安裝＋啟用HelloElementor佈景主題 這樣就完成HelloElementor佈景主題安裝＋啟用囉：） 6.Elementor是什麼？ Elementor頁面編輯器 Elementor是全球知名的WordPress頁面編輯器，全球已經有500w+次外掛下載量，基本上與所有主題兼容。

可參考Elementor外掛教學。

你不需會任何程式基礎，只要用區塊拖曳方式，就能客製化形象網站設計。

有關任何的頁面佈局、新增區塊功能、編輯區塊內容等..，都將變得更加簡單。

Elementor形象教學示範 Elementor有多種功能區塊，是建置網站的好幫手，當你心中簡單構圖完成，接下來只要拖放區塊，並放置在網頁上即可完成設計。

Elementor多功能的區塊元素 Elementor有多種區塊模板和網站樣板，點擊按鈕就可套用，再從中進行修改自己喜歡的設計，可節省大量的建置網站時間。

Elementor具備豐富的模版庫 購物網站盛行的時期，或許你想架設購物網站，Elementor對於WooCommerce電商外掛，有良好的支援。

並為此開發了WooCommerceBuilder（購物網站編輯器），除了一般的頁面設計，你也能設計客製化的購物網站頁面。

像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等..，如下圖。

WooCommerceBuilder購物網站功能區塊（部分功能） 方案評論 Elementor有免費版方案可使用，如果感覺不錯用且有更多設計上的需求，再升級為進階版即可。

完整ElementorPro進階教學。

Elementor進階版，有額外50多個專業元素功能、300多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerceBuilder（購物網站編輯器）等..，有更多功能可以使用。

Elementor進階版方案，分為個人用、公司用的兩大類型，裡面又有不同的方案，但能使用的功能幾乎都一樣，最大的差別是「使用的網站數量」。

如果你只有一個網站會使用，只需購買最低的方案即可，依此類推。

產品定價 Elementor個人用，起手價格是$49美元/年（約$1,500台幣/年），算是滿平價的費用，可應用在一個網站上，並享用它的全部功能。

立即取得Elementor外掛 7.ElementorPro如何購買？ 如果你對ElementorPro有興趣，那要如何購買呢？這邊帶大家簡單跑一次流程。

首先，前往Elementor方案頁面，如果個人（少數量網站）使用選Individuals，如果是公司（多數量網站）使用選Teams。

前往Elementor方案頁面 下圖，我是用個人的基本方案示範（適用一個網站），如果有多個網站需使用，就選擇適合的方案即可，裡面都有標示可供幾個網站使用。

購買安裝＋費用下載 小提醒：Advanced（3個網站99美元）方案被放在下面的小字，3個網站方案對於站長來說十分實用，可以參考看看：） 接著進入結帳頁面，需先創建Elementor帳號，輸入電子信箱、密碼，選擇創建帳號。

Elementorpro教學：創建Elementor帳號 跳轉第三步驟，填入相關購買資訊，這裡都需填寫英文，地址中翻英可用中華郵政工具，姓名中翻英可用外交部工具。

ElementorPro教學：填入結帳資訊 最後確認金額，和選擇付款方式，完成後，點選「Paynow」送出訂單。

填入購買資訊 接著，後面流程就照Elementor指示進行操作即可。

完成後前往Elementor會員後台，等等會教大家如何下載＋安裝ElementorPro外掛。

Elementor會員後台 8.ElementorPro安裝＋憑證連線 登入並前往Elementor會員後台，在右上角會有下載Icon，點擊下載ElementorPro外掛。

Elementor會員後台 前往WordPress後台，找到外掛>安裝外掛>上傳外掛，把剛下載的ElementorPro外掛上傳安裝＋啟用。

安裝ElementorPro外掛 前往Elementor>License，點擊Connect＆Activate，與Elementor系統進行串接。

ElementorPro系統連線 輸入帳密登入Elementor後台，就會看到你的網域和帳號使用者，進行串接的圖示，點擊Activate連線。

ElementorPro教學：進行網站串連 如果有看到狀態顯示Active，就代表網站的ElementorPro功能，已經被順利激活了唷：） ElementorPro憑證連線成功 接下來，我們就能享用ElementorPro強大的能力了。

9.ElementorPro主題編輯器 ThemeBuilder主題編輯器是ElementorPro很酷的功能之一，我們可以使用它，打造精緻的LandingPage銷售頁設計。

ElementorPro：多樣化的Pro進階模板 一頁式銷售頁需擁有多樣化的模板設計，才能吸引顧客的目光。

而ElementorPro的「主題編輯器」功能，能客製化不同的WordPress頁面，像是文章列表、單一文章、商品頁面等..，並且自訂顯示條件，就能達到100%客製化設計。

另外，ElementorPro擁有更多專業版工具，站長能自由發揮創意使用。

ElementorPro：WooCommerce相關進階區塊 不過CartFlows結帳表單，使用Elementor免費版本即可建置，這點不用擔心。

所以，你也可以看完整篇文章，再決定是否購買ElementoePro：） 這對於日後想擴展一頁式網頁的站長來說，是一個十分有力的模版設計工具。

ElementorPro：主題編輯器功能可自由呈現不同頁首/頁尾 下面章節，將使用ElementorPro的主題編輯器功能，來完成頁首及頁尾，當作範例參考：） 10.頁首/頁尾設計 使用ElementorPro後，我們便可使用「主題編輯器」功能，自由設計頁首/頁尾。

這一章節，我以新增頁首作為示範。

前往版型>主題建構器，我們可以看到一列功能列表（ThemeBuilder、頂部、底部等..），方便站長管理不同功能版型。

這邊我們可以點擊新增創建新版型，也可以點Tryitnow就能前往ThemeBuilder。

Elementor：前往ThemeBuilder編輯器 進入後，左手邊可選取想新增的類型，這邊我示範新增頂部Header。

左邊選擇頂部類型，之後點右上角的AddNew。

Elementor：進入「頂部」類型，選擇新增版型 然後 Elementor 會自動帶入該類型的模板庫，現在在Header頁首類型，就會出現很多相關的版型。

可選擇自己喜愛的使用，點擊插入即可（如果打算自己設計，可直接關閉）。

這邊我選擇其中一個來進行設計。

Elementor：選擇套用Header頁首模板 選擇插入，跳轉至設計頁面，頁首設計完畢，選擇發布即可套用至所有頁面。

Elementor：編輯Header頁首區塊，完成發布 發佈後會出現彈跳視窗。

這邊可以設定剛設計完成的頁首，想要在哪個頁面顯示，也就是設定顯示條件，完成後儲存。

Elementor：設定版型顯示條件 接著我們前往隨機頁面，觀看頁首設計：） 成功顯示精美頁首模版～ 頁尾我們也可以使用同樣方式新增，以上就是使用ElementorPro主題編輯器功能，來新增/設計頁首教學！ 11.WooCommerce介紹＋安裝 WooCommerce是使用WordPress軟體，設計購物網站不可或缺的電商外掛。

這個章節，我們會介紹WooCommerce是什麼，然後安裝＋啟用WooCommerce。

更多WooCommerce是什麼。

WooCommerce是什麼？ woocommerce網路開店外掛 WooCommerce是WordPress旗下最知名的網路商店架設外掛，全球下載量已超過4500萬，而且它是免費的。

可參考WooCommerce完整教學，學習更多。

可用它來完成購物網站架設，開始你的網路開店平台，像是商品管理、訂單管理、會員管理、優惠管理、頁面管理、金物流串接..都具備。

WordPressWooCommerce外掛的豐富生態圈 WooCommerce的生態圈很豐富，有多種周邊擴充功能，這也是讓它更完整強大的原因。

有關WooCommerce優質主題推薦，還有如何設定電商金物流，這裡面都有詳細解答。

如果想節省網路開店平台的預算，使用WooCommerce開店平台外掛，絕對會是你的好選擇：） 立即取得WooCommerce外掛 WooCommerce安裝＋啟用 接著我們進行WooCommerce外掛安裝，有了它才能運作一頁式購物網頁。

前往外掛>安裝外掛，搜尋WooCommerce外掛，然後點選安裝＋啟用外掛。

銷售頁設計：WooCommerce外掛安裝＋啟用 12.WooCommerce基礎設定＋金物流串接 WooCommerce安裝＋啟用完成，會進入初始頁面設定。

我們需在WooCommerce設定商店地址、銷售地區、是否使用稅金、貨幣選項、商品庫存設定、金流物流等..，才能讓LandingPage銷售頁正常營運。

先前往WooCommerce>設定，分別操作前述設定項目。

可參考：WooCommerce基礎中文教學繼續學習。

Woocommerce購物相關設定 還有一個重點，就是LandingPage設計銷售頁的金物流串接，由於WooCommerce預設的金物流功能不夠多，建議可以安裝外掛擴充。

有關於金物流設定＋串接，可以參考設定WooCommerce金流＋物流、RYWooCommerceTools教學、PayPal串接教學這幾篇文章，相信你會收穫良多：） RYWooCommerceTools綠界物流超商設定 13.新增WooCommerce商品 完成WooCommerce安裝＋設定後，我們可以前往WooCommerce新增販售商品。

前往「商品>所有商品」，找到新增按鈕。

新增WooCommerce商品 點擊後便會進入商品頁面。

第一步，可以先編輯商品網址，填寫商品描述。

新增商品內容＋編輯永久連結 往下編輯商品類型、商品金額、庫存、運送方式..，這部分可搭配WooCommerce電商教學，如果需新增不同類型商品，可參考常見商品建立。

購物網站建置：WooCommerce購物網站，編輯商品內容 然後可編輯商品分類、標籤、商品圖片..，讓商品內容更加豐富，完成後點發佈或更新即可。

Woocommerce編輯商品分類、標籤、圖片等.. 以上是WooCommerce設定，接著，我們往下開始進行CartFlows行銷漏斗外掛教學，離完成LandingPage設計又更近一步囉！ 14.CartFlows外掛介紹＋安裝 啟用WooCommerce電商外掛後，接著需安裝CartFlows，協助我們完成LandingPage銷售頁設計。

CartFlows是什麼？ CartFlows：最佳WooCommerce銷售漏斗外掛 CartFlows是一款優質的WooCommerce行銷漏斗外掛，用優化的結帳方式，取代WooCommerce以往較複雜的結賬流程，增加商品轉換率。

CartFlows可做出一個獨立的Landingpage商品銷售頁，讓行銷活動、廣告導流的轉換率達到最好的成效。

CartFlows可結合多款流行的頁面編輯器進行設計，如：Elementor、Gutenberg、BeaverBuilder等..。

同時，CartFlows也與多款主題/外掛串接，例如：WooCommerce、LearnDash、Divi、Alidropship，能夠完成多類型網站架設。

更多WooCommerce教學、LearnDash線上課程架設、Divi主題教學。

CartFlows可串接多款頁面編輯器/外掛 此外，行銷漏斗的最後一步，也是不可少的感謝購買（確認訂單）頁面，使用CartFlows也可輕鬆建置。

設計方面，CartFlows具備多款網頁模板，可一鍵套用，快速建立美觀的商品銷售頁面。

CartFlows可一鍵套用多款銷售頁模版進行設計 以上是CartFlows免費版的功能。

進階版本的功能更加突出，可完成：A/B測試、一鍵加購/下單按鈕、更改結帳表單欄位、訂單數據分析等..功能，是十分優良的行銷外掛。

詳細可參考CartFlows進階功能。

若是想先試用功能，可點選下方按鈕，即可取得CartFlows免費版。

立即取得CartFlows免費版外掛 CartFlows安裝＋啟用 這篇文章，我們只需使用CartFlows免費版，即可開始Landingpage設計。

那麼，開始安裝CartFlows，前往WordPress後台>安裝外掛，輸入CartFlows>選擇安裝＋啟用即可。

安裝＋啟用CartFlows 15.新增一頁式銷售頁（套用模板） 安裝＋啟用完成，接著我們便可套用CartFlows模版，著手進行LandingPage設計。

小提醒：HelloElementor主題的一大特色就是可以自行進行多樣化設計，所以如果你想跳過套用模板，自己新增頁面設計也是可以的：） 創建Flows（套用模版） 前往CartFlows>Flows>AddNew，新增第一個行銷漏斗（Flows）。

一頁式銷售頁設計：前往CartFlows新增Flows 接著我們會跳轉到Templates頁面，選擇你喜愛的銷售頁模板，進行導入。

我以MusicAlbum模版，作爲Landingpage銷售頁範例，選擇ImportFlow導入。

一鍵導入CartFlows一頁式購物網站模板 輸入易辨識的名字，即可創建Flows。

輸入名稱，創建Flows 創建好一個新的行銷漏斗（Flows）後，會自動跳轉至該Flows頁面。

Steps分步頁面 這裡我們可以看見一個完整的行銷漏斗，需要的分步頁面。

目前分別有：Landing商品著陸頁、Checkout結帳頁面、ThankYou感謝頁面。

升級至進階版本後，即可選擇「AddNewStep」新增分步頁面（因本文教學只需製作一頁式商品著陸頁，我們先保持原本的步驟頁面即可）。

選擇「AddNewStep」新增分步頁面 若是之後有增加分步頁面的需求，站長可自行選擇是否購買進階版本：） Settings設定 接著我們來查看該Flows的設定。

切換到Settings區塊，可以看到左手邊有四個區塊，而目前停在General設定，如下圖。

銷售頁製作：CartFlows單一銷售漏斗（Flows）設定 我們可以在一般設定變更：行銷漏斗標題、連結代稱、是否開啟漏斗索引，若無特別需求，維持預設即可。

更多永久連結設定。

其他功能為進階版啟用，因此這邊就不多做說明，我們繼續往下教學吧：） 16.CartFlows指派商品 在前面的章節中，我們已經導入CartFlows的初始模版，也成功新增一個行銷漏斗。

現在我們需要指派商品，至單一LandingPage銷售頁。

選擇「Checkout結帳」標籤頁面。

一頁式Landingpage設計：找到Checkout頁面選擇變更 找到Products頁籤>AddNewproduct指派產品。

前往Products頁面指派販售商品 跳出彈跳視窗，找到剛剛新增的WooCommerce產品，選擇「AddProduct」完成指派。

鍵入指定商品，完成指派 指派成功，可以更改強制購買數量、折扣。

設定完成，選擇儲存設定。

更改商品設定，完成後儲存設定 這樣我們就完成商品指派囉，下一章節，我們就來學習如何進行一頁式Landingpage設計吧：） 17.新增＋設計商品描述版型 因為是一頁式銷售頁，我們繼續在結帳表單頁，新增商品描述即可。

使用Elementor設計銷售頁面 前往Design區塊，選擇「EditwithElementor」按鈕，進入設計頁面。

選擇EditwithElementor進入一頁式銷售頁模版進行設計 我們會看見頁面中有結帳表單，接著就可以開始使用Elementor來新增＋設計商品描述區塊囉：） 可以參考：Elementor基礎教學、Elementor進階版學習指南學習如何進行LandingPage設計。

使用Elementor進行一頁式Landingpage設計 這邊我新增一個倒數計時區塊當作示範，大家可以依照自己需求，新增區塊進行銷售頁設計。

在左手邊區塊小工具中，找到「專業版」選項，找到「倒數」區塊，拖曳到頁面任意位置。

找到倒數區塊，拖曳至頁面 接著點擊倒數區塊，選擇內容或樣式，可以修改外觀設計。

修改倒數區塊設計樣式 其他商品描述設計，例如：商品介紹、特色、各項促銷Banner等..可依照站長需求，拉入相對應區塊進行設計。

更多WooCommerce行銷設定教學。

套用ElementorPro版型 對於設計較沒有概念的站長，也可開啟版型庫尋找靈感。

有許多Pro版本專屬的精美版型可供站長選擇唷：） Elementor：善用分類，尋找一頁式網頁版型 18.設計結帳表單區塊 設計好所有商品描述後，我們也可以針對結帳表單進行樣式修改/設計。

點擊結帳區塊，左手邊的面板切換至「樣式」，即可針對不同地方設計，詳細如下圖。

Landingpage銷售頁設計：結帳表單細節調整 完成設計之後，記得要選擇「更新」儲存唷！ 19.設計感謝頁面 完成商品描述＋結帳的一頁式LandingPage後，接著是行銷漏斗的最後一站，也就是「感謝頁面」。

套用模版即有預設感謝頁模板，但我們也可在Elementor新增設計區塊。

回到Flows頁面，找到ThankYou分步頁面，選擇Edit進行修改設計。

Landingpage銷售頁設計：選擇「ThankYou」分步頁面進行設計 選擇EditwithElementor按鈕，進入設計頁面。

進入「ThankYou」分步設計頁面 進入後，會看見預設的感謝頁模板，這裡在前台會顯示顧客的訂單資訊，但現在看不見訂帳資訊，不過不用擔心，前台顯示的會是正常樣式。

我們可以選擇該區塊，進行背景、標題文字等..細節調整。

Landingpage銷售頁設計：設計顯示訂單資訊區塊 接著，我們還可以對感謝頁面新增區塊設計，來豐富感謝頁面。

要是沒有想法，我們可以借助Elementor版型庫，找到精美的模板範例，幫助我們設計Landingpage。

點擊下圖的引用模板Icon，叫出Elementor版型庫。

使用Elementor引入模板 選擇區塊，依據分類，找到想新增的區塊版型。

這邊我新增「Team」版型，來介紹樂隊成員。

選擇第一個區塊，插入至頁面。

Landingpage銷售頁設計：新增版型 插入後，我們就可以設計該區塊，將內容進行修改。

Landingpage銷售頁設計：針對新增版型區塊進行修改 修改完成後，我們進行儲存即可：） 實際前往前台結帳，查看設計效果，發現設計成功，也有顯示訂單資訊～ 感謝頁面設計成果 20.會員帳戶管理 LandingPage銷售頁設計完成，還需在主選單新增「我的帳號」頁面，以便顧客能夠確認訂單資訊。

小備註：關於新增主選單詳細新增＋設定，可前往WordPress基礎後台教學進行學習～ 前往主選單，找到「我的帳號」頁面選項，選擇「新增至選單」，完成後儲存。

將「我的帳號」新增至主選單 新增後，我們藉由選單前往「我的帳號」頁面查看，發現成功新增，並且能夠查看訂單資訊囉。

LandingPage銷售頁製作：成功新增我的帳號頁面 以上就是LandingPage銷售頁製作教學，大家都學會了嗎？ 常見問題 CartFlows是什麼？ CartFlows是一款優質的WooCommerce行銷漏斗外掛，用優化的結帳方式，取代WooCommerce以往較複雜的結賬流程，增加商品轉換率。

更多WooCommerce中文基礎教學。

CartFlows可做出一個獨立的LandingPage商品銷售頁，讓行銷活動、廣告導流的轉換率達到最好的成效。

分為免費版本和進階版本，免費版即可完成簡單的三步驟行銷漏斗LandingPage。

進階版本功能豐富，可完成：A/B測試、一鍵加購/下單按鈕、更改結帳表單欄位、訂單數據分析等..功能，詳細可參考CartFlows進階功能介紹。

如何使用CartFlows完成單一產品LandingPage設計？ 在安裝CartFlows後，我們新增一個行銷漏斗（Flows），便可在該Flows之下，進行新增＆設定分步頁面的操作。

我們為該行銷漏斗指派WooCommerce商品，便可以開始著手進行頁面設計。

更多WooCommerce商品類型上架。

設計方面，CartFlows可套用多種模板，客製化設計LandingPage，還可依照站長習慣，將兩步驟結帳變更為一頁式銷售頁，簡化結帳步驟，優化使用者體驗。

還有別的電商行銷策略嗎？ WooCommerce電商平台可利用多種功能外掛，來優化購物流程體驗。

更多WooCommerce外掛推薦清單。

除此之外，擁有一個適合購物網站的佈景主題也很重要。

更多WooCommerce佈景主題推薦。

行銷策略方面，可配合折價券、全站式折扣、限時免運費等..活動來促進買氣。

WordPress學習資源 學習WordPress網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答。

如果你沒有時間自己架站，或是想委託專人服務，那可以參考我們的網站建置服務。

我最近也開啟了YouTube頻道，裡面有些影片教學，你也能搭配Blog一起學習，應該會來的更加順手（歡迎訂閱我＋開啟小鈴鐺，可收到第一手影片教學通知）。

當然，如果怕問題描述不清楚，也可以加入WordPress教學時光屋–犬哥網站，我同步也會在社團中幫忙解惑。

希望這些對你有所幫助，祝架站順利啦。

關於作者犬哥團隊-Luna我們分享WordPress架站x網路行銷知識，不需會任何程式技術，就能自己建立各種網站。

搭配豐富的網路行銷教學，幫助你被更多人看到。

趕快跟著我們的腳步，開始學習吧：） 2thoughtson“LandingPage銷售頁設計：製作一頁式行銷漏斗，增加電商轉化率！” 您好，首先感谢您的网站分享了很多有益的知识。

新手没有经验，不想投入非常多的资源做电商，想要尝试架构amazon联盟网站，写文章引流，积累经验以后再做下一步。

需要商品展示同时又要有博客文章，请问这种模式是否合适，有推荐的模板吗？可否写一些新手参加联盟行销这方面的教程呢？ Reply 嗨，Amous， 犬哥網站目前只有WordPress架站以及網路行銷（SEO）教學，目前沒有聯盟行銷課程， 建議你可前往Hahow、PressPlayAcademy等..知名線上課程平台，尋找看看有無相關學習資源唷！ Reply LeaveaCommentCancelReply發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*Typehere..Name* Email* Website Δ 我想要找.. 搜尋 訂閱犬哥社群 Youtube Facebook Instagram 文章分類 分類 所有文章 如何架設網站 優質主機 WordPress基礎教學 WooCommerce電商系列 SEO技巧＋網路行銷 優質主題系列 優質外掛系列 廣告投放 WordPress速度性能 WordPress安全性 網站備份＋搬家 最新WordPress教學通知 姓名（暱稱） 電子信箱（Email） Leavethisfieldemptyifyou'rehuman: FB問題解答社團 如何架站MenuToggle 架設Blog形象網站架設購物網站架設線上課程架設預約網站架設網頁硬核觀念 優質主機MenuToggle Bluehost入門主機A2Hosting中階主機Cloudways雲端主機 服務項目MenuToggle 網頁設計廣告投放 所有文章聯絡我 影片教學影片教學 回到頂端