犬哥網站

希望這篇文章對你有幫助!

如果希望我協助「 網站建置、講座教學等 .. 」,歡迎 聯絡我
Landing Page 銷售頁設計:製作一頁式行銷漏斗,增加電商轉化率!

Landing Page 銷售頁設計:製作一頁式行銷漏斗,增加電商轉化率!

這是一篇完整「 Landing Page 設計 」教學,帶你打造一頁式銷售頁,如果你銷售的商品、服務並不多,或是只想單獨強推某一項商品,並讓此商品能賣得很好,那這篇文章會對你有幫助!

跟著文章步驟,即可從無到有,建置出完美的 Landing Page 商品銷售頁,讓商品購買、結帳都在同一頁面完成,並在購物結束後,跳轉至感謝頁面。

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

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

★☆ — 重要資訊 — ☆★

犬哥網站與 A2 Hosting 主機有長期合作關係,點擊網站上任一個 A2 Hosting 連結 前往官網(包含點擊此連結),最高可享有 70% 的讀者折扣,請一定要把握:)

跟著文章步驟,即可從無到有,建置出完美的 Landing Page 商品銷售頁,大大提升單一產品的轉化率!

準備好的話,就開始囉。本文章節如下:


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 它是全球知名的網頁設計軟體,全球有 30 % 以上的網站,都來自於 WordPress。

WordPress 網站使用人數
WordPress 網站使用人數

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。

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

WordPress 可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

最大好處是,它是免費開源的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。

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


2. 虛擬主機推薦

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

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

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

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

A2 Hosting 正常運行時間和安全性

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

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

A2 hosting :主機正常運行時間
A2 hosting :主機正常運行時間

A2 Hosting 網站速度表現好嗎?

A2 Hosting 在全球各地有多個數據基地台,滿足不同地點的主機連線速度,像是台灣用戶就可到連線最近的新加坡基地

這是我之前主機放置在 A2 Hosting 所做的記錄(評測紀錄是 A+),網站加載速度大約 83 毫秒,是優質的主機速度。

A2 hosting :虛擬主機響應速度
虛擬主機響應速度(來自 bitcatcha 評測)

Google 建議的響應時間是 200 毫秒(越短越好)。所以低於 180 毫秒的網站內容會被評為A +。

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

配上 A2 Hosting 任一個共享主機方案,全部皆使用 SSD 存儲,這確實有助於其快速加載速度(SSD的速度比普通硬碟快 30%)。

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


3. A2 Hosting 方案選擇

這章節會進行「 A2 Hosting 」的主機方案選擇,帶你選擇適合自己的方案。

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

前往 WordPress Hosting 主機

接著往下滑,會看到不同的主機方案,如果你正猶豫如何選擇,下面我會給你一些選擇建議。

A2 Hosting教學 :WordPress 主機方案選擇

小備註:方案價格會隨著主機廠商有所調整,以 A2 Hosting 官網呈現價格為主。

要選擇哪種 A2 Hosting 主機方案?

A2 Hosting 共享主機提供 4 種方案選擇,分別是 StartUp(入門)、Drive(行駛)、Turbo Boost(渦輪)、Turbo Max(增大渦輪)

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

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

  • 只需架設一個網站,且有預算考量:StartUp 方案
  • 需架設多個網站,且有預算考量:Drive 方案
  • 需架設多個網站,且預算還算足夠,對主機速度有進一步追求者:Turbo Boost 方案

如果是 WordPress 新手入門,會建議選擇 StartUp 或是 Drive 方案,能讓你用最少預算開始,也不會一開始負擔就太多。

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

不管選擇的是哪種主機方案,A2 Hosting 本身賣點就是注重主機速度,所以表現基本都會在水準之上(不會因為你是否選擇 Turbo Boost 方案)。

如果你有現成或是較多的穩定流量,會建議直接選擇 Turbo Boost 方案。此方案大幅優化了主機速度,它們表示 Turbo Boost 方案以上的主機速度,比一般常規站點快上 20 倍,比較不會遇到速度上的問題。

至於 Turbo Max 方案我不建議使用,因為這個費用太貴了(同樣費用有更好的選擇),且和 Turbo Boost 方案功能差不多。

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

A2 Hosting 費用了解

A2 Hosting 通常費用是,網址 $14.95 美元 / 年(一年約 450 台幣),和主機 $10.99 美元 / 月(一年約 3960 台幣)。

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

下表是用台幣計算,美元台幣匯率用經常的 1:30 換算(P.S 當前匯率更低, 換算下來更優惠)。

StartUp 方案Drive 方案Turbo 方案
買一年:特價約 2520 元買一年:特價約 3600 元買一年:特價約 3960 元
買二年:特價約 3160 元買二年:特價約 5760 元買二年:特價約 7190 元
買三年:特價約 3230 元買三年:特價約 6450 元買三年:特價約 7550 元

小提醒:新手可購買 1 年的 StartUp 或是 Drive 方案,用最少預算入門:)

這等於說,在 A2 Hosting 申請個人網域和主機,最少可用大約 3000 台幣(網域+主機費用),就能開始啟動你的網路事業,並享有完整的主機規格服務。

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

剩下的 A2 Hostung 購買流程+建置 WordPress 網站教學,可前往:A2 Hosting 完整教學 繼續學習唷!


4. Hello Elementor 主題介紹+安裝

WordPress佈景主題 :Hello Elementor 推薦

Hello Elementor 是由知名頁面編輯器 Elementor 所開發的輕量化主題。更多 Elementor 基礎教學

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

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

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

Hello Elementor 主打提升速度、輕量化主題

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

Hello Elementor 強調其提升網站 SEO 功能

設計頁面方面,我們可以從完全空白的頁面開始建構,也可以套用多樣化模板。更多 Elementor Pro 進階教學

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

Hello Elementor 可套用多樣化模板

同時 Hello Elementor 具備多種基本主題設計功能:頁首及頁尾編輯器、響應式網頁、串接多款第三方外掛、保持開源等 .. 。

以 Elementor 開發的佈景主題來說,一定會是最兼容 Elementor 編輯器,我們也可以期待 Hello Elementor 日後的表現:)


5. Hello Elementor 安裝+啟用

這個章節,我們就來安裝 Hello Elementor 佈景主題吧!更多 如何安裝主題( 3 種方法)

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

前往安裝 WordPress 佈景主題
前往安裝 WordPress 佈景主題

搜尋「 Hello Elementor 」,選擇安裝+啟用。

安裝+啟用 Hello Elementor 佈景主題

這樣就完成 Hello Elementor 佈景主題安裝+啟用囉:)


6. Elementor 是什麼?

Elementor 頁面編輯器
Elementor 頁面編輯器

Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,基本上與所有主題兼容。可參考 Elementor 外掛教學

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

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

Elementor 形象教學示範

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

Elementor 多功能的區塊元素
Elementor 多功能的區塊元素

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

Elementor 具備豐富的模版庫

購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 電商外掛,有良好的支援。

並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般的頁面設計,你也能設計客製化的購物網站頁面。

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

WordPress頁面編輯器 :Elementor 的 WooCommerce Builder 購物網站區塊功能(部分功能)
WooCommerce Builder 購物網站功能區塊(部分功能)

方案評論

Elementor 有免費版方案可使用,如果感覺不錯用且有更多設計上的需求,再升級為進階版即可。完整 Elementor Pro 進階教學

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

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

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

產品定價

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


7. Elementor Pro 如何購買?

如果你對 Elementor Pro 有興趣,那要如何購買呢?這邊帶大家簡單跑一次流程。

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

下圖,我是用個人的基本方案示範(適用一個網站),如果有多個網站需使用,就選擇適合的方案即可,裡面都有標示可供幾個網站使用。

購買安裝+費用下載

小提醒:Advanced(3 個網站 99 美元)方案被放在下面的小字,3 個網站方案對於站長來說十分實用,可以參考看看:)

接著進入結帳頁面,需先創建 Elementor 帳號,輸入電子信箱、密碼,選擇創建帳號。

Elementor pro 教學 :創建 Elementor 帳號

跳轉第三步驟,填入相關購買資訊,這裡都需填寫英文,地址中翻英可用 中華郵政工具,姓名中翻英可用 外交部工具

elementor pro 教學 :填入購買資訊
Elementor Pro 教學 :填入結帳資訊

最後確認金額,和選擇付款方式,完成後,點選「 Pay now 」送出訂單。

填入購買資訊

接著,後面流程就照 Elementor 指示進行操作即可。

完成後前往 Elementor 會員後台,等等會教大家如何下載+安裝 Elementor Pro 外掛。

Elementor Pro 教學 :Elementor 會員後台
Elementor 會員後台

8. Elementor Pro 安裝+憑證連線

登入並前往 Elementor 會員後台,在右上角會有下載 Icon,點擊下載 Elementor Pro 外掛。

Elementor Pro 教學 :Elementor 會員後台
Elementor 會員後台

前往 WordPress 後台,找到外掛 > 安裝外掛 > 上傳外掛,把剛下載的 Elementor Pro 外掛上傳安裝+啟用。

Elementor Pro 教學 :安裝 Elementor Pro 外掛
安裝 Elementor Pro 外掛

前往 Elementor > License,點擊 Connect & Activate,與 Elementor 系統進行串接。

Elementor Pro 教學 :Elementor Pro 系統連線
Elementor Pro 系統連線

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

Elementor Pro 教學 :進行網站串連
Elementor Pro 教學 :進行網站串連

如果有看到狀態顯示 Active,就代表網站的 Elementor Pro 功能,已經被順利激活了唷:)

Elementor Pro 教學 :Elementor Pro 憑證連線成功
Elementor Pro 憑證連線成功

接下來,我們就能享用 Elementor Pro 強大的能力了。


9. Elementor Pro 主題編輯器

Theme Builder 主題編輯器是 Elementor Pro 很酷的功能之一,我們可以使用它,打造精緻的 Landing Page 銷售頁設計。

Elementor Pro 教學 :Pro 進階區塊樣板
Elementor Pro :多樣化的 Pro 進階模板

一頁式銷售頁需擁有多樣化的模板設計,才能吸引顧客的目光。

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

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

Elementor Pro 教學 :WooCommerce 相關功能
Elementor Pro :WooCommerce 相關進階區塊

不過 CartFlows 結帳表單,使用 Elementor 免費版本即可建置,這點不用擔心。所以,你也可以看完整篇文章,再決定是否購買 Elementoe Pro :)

這對於日後想擴展一頁式網頁的站長來說,是一個十分有力的模版設計工具。

Elementor Pro :主題編輯器功能可自由呈現不同頁首 / 頁尾

下面章節,將使用 Elementor Pro 的主題編輯器功能,來完成頁首及頁尾,當作範例參考:)


10. 頁首 / 頁尾設計

使用 Elementor Pro 後,我們便可使用「 主題編輯器 」功能,自由設計頁首 / 頁尾。這一章節,我以新增頁首作為示範。

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

這邊我們可以點擊新增創建新版型,也可以點 Try it now 就能前往 Theme Builder 。

Elementor教學 :前往 Theme Builder 編輯器
Elementor:前往 Theme Builder 編輯器

進入後,左手邊可選取想新增的類型,這邊我示範新增頂部 Header。

左邊選擇頂部類型,之後點右上角的 Add New。

Elementor :進入「 頂部 」類型,選擇新增版型

然後 Elementor 會自動帶入該類型的模板庫,現在在 Header 頁首類型,就會出現很多相關的版型。

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

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

Elementor :選擇套用 Header 頁首模板

選擇插入,跳轉至設計頁面,頁首設計完畢,選擇發布即可套用至所有頁面。

Elementor :編輯 Header 頁首區塊,完成發布

發佈後會出現彈跳視窗。

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

Elementor教學 :設定區塊顯示條件
Elementor :設定版型顯示條件

接著我們前往隨機頁面,觀看頁首設計:)

成功顯示精美頁首模版~

頁尾我們也可以使用同樣方式新增,以上就是使用 Elementor Pro 主題編輯器功能,來新增 / 設計頁首教學!


11. WooCommerce 介紹+安裝

WooCommerce 是使用 WordPress 軟體,設計購物網站 不可或缺的電商外掛。

這個章節,我們會介紹 WooCommerce 是什麼,然後安裝+啟用 WooCommerce。更多 WooCommerce 是什麼

WooCommerce 是什麼?

woocommerce 網路開店外掛
woocommerce 網路開店外掛

WooCommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬,而且它是免費的。可參考 WooCommerce 完整教學,學習更多。

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

架設購物網站 :wordpress woocommerce 外掛
WordPress WooCommerce 外掛的豐富生態圈

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

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

如果想節省網路開店平台的預算,使用 WooCommerce 開店平台外掛,絕對會是你的好選擇:)

WooCommerce 安裝+啟用

接著我們進行 WooCommerce 外掛安裝,有了它才能運作一頁式購物網頁。

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

架設購物網站 :woocommerce外掛安裝
銷售頁設計 :WooCommerce外掛安裝+啟用

12. WooCommerce 基礎設定+金物流串接

WooCommerce 安裝+啟用完成,會進入初始頁面設定。

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

先前往 WooCommerce > 設定,分別操作前述設定項目。可參考: WooCommerce 基礎中文教學 繼續學習。

Woocommerce 購物相關設定
Woocommerce 購物相關設定

還有一個重點,就是 Landing Page 設計銷售頁的金物流串接,由於 WooCommerce 預設的金物流功能不夠多,建議可以安裝外掛擴充。

有關於金物流設定+串接,可以參考 設定 WooCommerce 金流+物流RY WooCommerce Tools 教學PayPal 串接教學 這幾篇文章,相信你會收穫良多:)

綠界物流設定
RY WooCommerce Tools 綠界物流超商設定

13. 新增 WooCommerce 商品

完成 WooCommerce 安裝+設定後,我們可以前往 WooCommerce 新增販售商品。

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

新增 WooCommerce 商品

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

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

新增商品內容+編輯永久連結

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

購物網站建置 :WooCommerce 購物網站,編輯商品內容
購物網站建置 :WooCommerce 購物網站,編輯商品內容

然後可編輯商品分類、標籤、商品圖片 .. ,讓商品內容更加豐富,完成後點發佈或更新即可。

Woocommerce 編輯商品分類、標籤、圖片等 ..

以上是 WooCommerce 設定,接著,我們往下開始進行 CartFlows 行銷漏斗外掛教學,離完成 Landing Page 設計又更近一步囉!


14. CartFlows 外掛介紹+安裝

啟用 WooCommerce 電商外掛後,接著需安裝 CartFlows ,協助我們完成 Landing Page 銷售頁設計。

CartFlows 是什麼?

CartFlows :最佳 WooCommerce 銷售漏斗外掛

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

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

CartFlows 可結合多款流行的頁面編輯器進行設計,如:Elementor、Gutenberg、Beaver Builder 等 .. 。

同時, CartFlows 也與多款主題 / 外掛串接,例如:WooCommerce、LearnDash 、Divi、Alidropship ,能夠完成 多類型網站架設。更多 WooCommerce 教學LearnDash 線上課程架設Divi 主題教學

CartFlows 可串接多款頁面編輯器 / 外掛

此外,行銷漏斗的最後一步,也是不可少的感謝購買(確認訂單)頁面,使用 CartFlows 也可輕鬆建置。

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

CartFlows 可一鍵套用多款銷售頁模版進行設計

以上是 CartFlows 免費版的功能。

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

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

CartFlows 安裝+啟用

這篇文章,我們只需使用 CartFlows 免費版,即可開始 Landing page 設計。

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

安裝+啟用 CartFlows

15. 新增一頁式銷售頁(套用模板)

安裝+啟用完成,接著我們便可套用 CartFlows 模版,著手進行 Landing Page 設計。

小提醒:Hello Elementor 主題的一大特色就是可以自行進行多樣化設計,所以如果你想跳過套用模板,自己新增頁面設計也是可以的:)

創建 Flows(套用模版)

前往 CartFlows > Flows > Add New ,新增第一個行銷漏斗(Flows)。

一頁式銷售頁設計:前往 CartFlows 新增 Flows

接著我們會跳轉到 Templates 頁面,選擇你喜愛的銷售頁模板,進行導入。

我以 Music Album 模版,作爲 Landing page 銷售頁範例,選擇 Import Flow 導入。

一鍵導入 CartFlows 一頁式購物網站模板

輸入易辨識的名字,即可創建 Flows 。

輸入名稱,創建 Flows

創建好一個新的行銷漏斗(Flows)後,會自動跳轉至該 Flows 頁面。

Steps 分步頁面

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

目前分別有:Landing 商品著陸頁、Checkout 結帳頁面、Thank You 感謝頁面。

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

選擇「 Add New Step 」新增分步頁面

若是之後有增加分步頁面的需求,站長可自行選擇是否購買進階版本:)

Settings 設定

接著我們來查看該 Flows 的設定。

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

銷售頁製作:CartFlows 單一銷售漏斗(Flows)設定

我們可以在一般設定變更:行銷漏斗標題、連結代稱、是否開啟漏斗索引,若無特別需求,維持預設即可。更多 永久連結設定

其他功能為進階版啟用,因此這邊就不多做說明,我們繼續往下教學吧:)


16. CartFlows 指派商品

在前面的章節中,我們已經導入 CartFlows 的初始模版,也成功新增一個行銷漏斗。

現在我們需要指派商品,至單一 Landing Page 銷售頁。

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

一頁式 Landing page 設計:找到 Checkout 頁面選擇變更

找到 Products 頁籤 > Add New product 指派產品。

前往 Products 頁面指派販售商品

跳出彈跳視窗,找到剛剛新增的 WooCommerce 產品,選擇「 Add Product 」完成指派。

鍵入指定商品,完成指派

指派成功,可以更改強制購買數量、折扣。設定完成,選擇儲存設定。

更改商品設定,完成後儲存設定

這樣我們就完成商品指派囉,下一章節,我們就來學習如何進行一頁式 Landing page 設計吧:)


17. 新增+設計商品描述版型

因為是一頁式銷售頁,我們繼續在結帳表單頁,新增商品描述即可。

使用 Elementor 設計銷售頁面

前往 Design 區塊,選擇「 Edit with Elementor 」按鈕,進入設計頁面。

選擇 Edit with Elementor 進入一頁式銷售頁模版進行設計

我們會看見頁面中有結帳表單,接著就可以開始使用 Elementor 來新增+設計商品描述區塊囉:)

可以參考:Elementor 基礎教學Elementor 進階版學習指南 學習如何進行 Landing Page 設計。

使用 Elementor 進行一頁式 Landing page 設計

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

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

找到倒數區塊,拖曳至頁面

接著點擊倒數區塊,選擇內容或樣式,可以修改外觀設計。

修改倒數區塊設計樣式

其他商品描述設計,例如:商品介紹、特色、各項促銷 Banner 等 .. 可依照站長需求,拉入相對應區塊進行設計。更多 WooCommerce 行銷設定教學

套用 Elementor Pro 版型

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

有許多 Pro 版本專屬的精美版型可供站長選擇唷:)

Elementor教學 :切換區塊類型,可善用分類
Elementor :善用分類,尋找一頁式網頁版型

18. 設計結帳表單區塊

設計好所有商品描述後,我們也可以針對結帳表單進行樣式修改 / 設計。

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

Landing page 銷售頁設計:結帳表單細節調整

完成設計之後,記得要選擇「 更新 」儲存唷!


19. 設計感謝頁面

完成商品描述+結帳的一頁式 Landing Page 後,接著是行銷漏斗的最後一站,也就是「 感謝頁面 」。

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

回到 Flows 頁面,找到 Thank You 分步頁面,選擇 Edit 進行修改設計。

Landing page 銷售頁設計:選擇「 Thank You 」分步頁面進行設計

選擇 Edit with Elementor 按鈕,進入設計頁面。

進入「 Thank You 」分步設計頁面

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

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

Landing page 銷售頁設計:設計顯示訂單資訊區塊

接著,我們還可以對感謝頁面新增區塊設計,來豐富感謝頁面。

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

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

Elementor教學 :引入模板
使用 Elementor 引入模板

選擇區塊,依據分類,找到想新增的區塊版型。

這邊我新增「 Team 」版型,來介紹樂隊成員。選擇第一個區塊,插入至頁面。

Landing page 銷售頁設計:新增版型

插入後,我們就可以設計該區塊,將內容進行修改。

Landing page 銷售頁設計:針對新增版型區塊進行修改

修改完成後,我們進行儲存即可:)

實際前往前台結帳,查看設計效果,發現設計成功,也有顯示訂單資訊~

感謝頁面設計成果

20. 會員帳戶管理

Landing Page 銷售頁設計完成,還需在主選單新增「 我的帳號 」頁面,以便顧客能夠確認訂單資訊。

小備註:關於新增主選單詳細新增+設定,可前往 WordPress 基礎後台教學 進行學習~

前往主選單,找到「 我的帳號 」頁面選項,選擇「 新增至選單 」,完成後儲存。

將「 我的帳號 」新增至主選單

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

Landing Page 銷售頁製作:成功新增我的帳號頁面

以上就是 Landing Page 銷售頁製作教學,大家都學會了嗎?


常見問題

CartFlows 是什麼?

CartFlows 是一款優質的 WooCommerce 行銷漏斗外掛,用優化的結帳方式,取代 WooCommerce 以往較複雜的結賬流程,增加商品轉換率。更多 WooCommerce 中文基礎教學

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

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

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

如何使用 CartFlows 完成單一產品 Landing Page 設計?

在安裝 CartFlows 後,我們新增一個行銷漏斗(Flows),便可在該 Flows 之下,進行新增&設定分步頁面的操作。

我們為該行銷漏斗指派 WooCommerce 商品,便可以開始著手進行頁面設計。更多 WooCommerce 商品類型上架

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

還有別的電商行銷策略嗎?

WooCommerce 電商平台可利用多種功能外掛,來優化購物流程體驗。更多 WooCommerce 外掛推薦清單

除此之外,擁有一個適合購物網站的佈景主題也很重要。更多 WooCommerce 佈景主題推薦

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


WordPress 學習資源

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

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

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

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

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

犬哥網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端