如何建立 一頁式網頁?教你使用 Elementor 快速建立專業網站及一頁式電商銷售頁
如何建立 一頁式網頁? 教你使用 Elementor 快速建立

如何建立 一頁式網頁?教你使用 Elementor 快速建立專業網站及一頁式電商銷售頁

文章最後更新日期 2021 年 7 月 18 日

你知道什麼是 一頁式網頁 嗎? 還有 一頁式商店 銷售頁 怎麼設計嗎?

你知道怎麼使用 WordPress網站 來建立 一頁式網站嗎?

現在就讓 馬思特站長 來教你如何 輕鬆 且 快速的建立 專業的一頁式網站 吧!

什麼是 一頁式網頁?

在建置網站之前,我們先來瞭解一下什麼是一頁式網頁

一頁式網頁 也是近期經常被用來做網頁的一種方式,取代以往的 多頁式網頁,因為文案架構清楚,網站動線明確,所以 網站的轉換率也會高出許多 ,越來越多的公司也都會使用一頁式來建置 一頁式形象網站、一頁式購物網站!

一頁式網站 會將所有的內容都放在同一個頁面,讓訪客可以專注在你的網站內容, 不斷的讓訪客往下的依序滑動內容 ,照著你所引導的網站步驟來引導他們完成你想要他們完成的目標(例如購買商品),所以也可以降低因為網站有其他頁面連結而導致客戶分心離開頁面的風險

為了讓這些網站更有吸引力、更直觀和方便使用,一頁式網頁設計一般會包含 清楚的 網站選單,富有變化的頁面視覺設計,以及吸引人點擊的 CTA按鈕,許多的網站設計師和公司會更喜歡單頁式設計,因為他們比較架構清楚,而且對使用皷比較有吸引力,加上又可以輕鬆理解、調整和維護,而且網站的載入速度也比多頁式網站快!

延伸閱讀:使用 Elementor 快速建立 Landing Page(著陸頁),5個設計重點讓你達成高轉換率

一頁式網站 的優點

為什麼要為網站選擇 一頁式設計 而不是 多頁網頁設計?對於網站的初學者來說,一個成功的一頁式網站動線是順暢的,而一頁式也適合使用在公司資訊及商品資訊不多的網站上,可以針對網站資訊內容,將網頁分割成數個區塊來做呈現,讓網站的動線統一,讓使用者方便閱讀及消化

一頁式網站 還可以讓使用者動線更明確,訪客不需要連到其他的頁面,就可以在同一頁取得網站的相關資訊,更快的認識你的網站

當手機載具的盛行之後,隨之演變的推出 響應式網站,是一個用來針對電腦、平板、手機不同的裝置,自動切換成不同內容的 網站技術,因為手機的操作不便,站長認為一頁式網頁也是非常適合在操作不便的手機上執行,使用者通常只需要進入同一個頁面,而不需要切換選單才能取得頁面資訊,使用者可以更快速方便的做瀏覽,不會因為網站中的其他廣告、文章主題或是圖片分心,所以跟多頁式的網頁比起來,一頁式網站 可以帶來 更高的 轉換率!

一頁式網站 的缺點

因為一頁式網站的內容通常不多,所以在 SEO方面效果會比 多頁式網站 的效益還要小一點,一頁式比較適合用來做為重點資訊的呈現,或是 B2B的網站,甚至是 Landing Page著陸頁的方式執行,通常都是鎖定的都是短期的效益,因為擴散的能力有限,通常不適合用來做為建立 公司品牌 的最好選擇,也因為一頁式網站的設計比較簡單,不適合用在 太複雜 、多樣化的 內容網站,所以若是你的網站打算要長期經營品牌, 就不適合使用一頁式網站的方式來做建置

延伸閱讀:9個Email名單快速爆增小技巧,MailerLite 電郵行銷工具教學

一頁式網頁 可以用在哪些地方?

因為網頁的設計簡單及明確,一般會用來做為 資訊不多的 公司形象網站廣告行銷頁面一頁式購物網站等等,因為資訊集中,內容架構清楚,動線順暢,只需要單純的一直往下滑觀看內容,除了適合做為資訊的呈現之外,也適合用來做為著陸頁的方式使用,建立好 號召性用語(CTA) ,也可以提高 轉換率的效益!

一般比較常見的Landing page 著陸頁類型有 Email 訂閱名單商品訂購課程銷售頁面應用程式(APP)安裝頁 等等,藉由各種不同的行銷渠道方式,將目標客戶集中導流到設計好的網站頁面,藉由 銷售頁 所設計的起承轉合,引導訪客來執行目標動作

你知道嗎? 一頁式網頁也很常被用來製作 一頁式商店

一頁式網站的應用: 一頁式商店

一頁式網頁 因為瀏覽動線簡單(只要持續往下滑動)、文案內容清楚,所以可以很直覺的引導客戶進行商品購買,比起多頁式網站來說,購物流程更加簡化且順暢,所以訂單的成交機率也會高於一般 多頁式購物網站

那要怎麼確認自己的網站是否適合用 一頁式購物網站 呢?您可以針對幾個特點來思考

用一頁式購物網頁,專門用來銷售主打商品

用一頁式網站的方式來介紹商品,可以清楚介紹商品內容,動線明確又清楚

商品是知名商品,不需要另外打知名度

適用於商品已經是大眾所知的商品,通常客戶只是想要下單購買,不需要另外再打知名度的商品

使用 一頁式購物網頁 投放網路廣告,當作 Landing Page 著陸頁

使用一頁式網頁的方式來投放廣告非常有效,當客戶點擊廣告就可以直接購買,不會因為網站其他內容而分心

商品數量不多,用 一頁式商店 讓客戶專注下單衝動購買

如果你的商品類型不多,也非常適用 一頁式網站 的方式來建立 一頁式購物網站,網站看起來會更專業!

預算有限,沒有人專職維護 購物車網站,用 一頁式購物網站 輕鬆管理

如果你的人力不多,或是預算有限的話,使用 一頁式購物網站來做管理也會精簡很多預算,並且好管理

延伸閱讀:WooCommerce是什麼?10分鐘教你使用 WooCommerce架設電子商務網站

一頁式網頁參考 範例網站

站長精選2個一頁式網站的範例,相信你會更清楚 一頁式的網站應用

如何建立 一頁式網頁?教你使用 Elementor 快速建立專業網站及一頁式電商銷售頁

由於一頁式的網站沒有足夠的空間來展示商品或服務,所以很多設計重點會放在清晰容易使用的選單(how to buy),改善使用者體驗

如何建立 一頁式網頁?教你使用 Elementor 快速建立專業網站及一頁式電商銷售頁

大多數網站都是垂直建立,這個旅行網站使用水平滾動條來顯示網站內容。加上背景音樂讓網站也很有特色

想要觀看更多一頁式網站範例,可以點選 連結 看一下一頁式的作品,透過實作的作品,也許會啟發你的靈感

馬思特電商購物網站特價中…

使用 Elementor 架設 一頁式網頁 教學

Elementor頁面編輯器是一款超過百萬下載的 WordPress頁面編輯器,因為免費,而且有著即時預覽修改的特性,對於不懂程式的架站新手都非常的方便使用,也是站長常常推薦給客戶使用的工具之一

在這個步驟中, 站長推薦你使用 Astra 佈景主題, 外掛使用 Elementor頁面編輯器 來完成建立 一頁式網頁

延伸閱讀:Elementor 教學 – 突破百萬下載的 WordPress頁面編輯器,即時預覽編輯讓架站新手都能5分鐘上手

step 1

第一步,先進入到 WordPress 後台 →外掛 安裝 Elementor外掛

Elementor lite 外掛
Elementor lite 外掛

step 2

安裝完外掛之後,我們進入到 WordPress後台「頁面」來開始建立我們 一頁式網站

在這個步驟中,你可以選擇從無到有建立你的一頁式網站,或是直接使用 Elementor 的版型庫,站長選擇使用 Elementor版型庫來建立比較快速,不需要重頭開始建立網頁,會節省很多製作時間

進入到頁面之後,點選 「使用 Elementor 編輯」,進入到頁面編輯的設定

Elementor編輯畫面
Elementor編輯畫面

step 3

進入到網站頁面的設定之後,可以發現像下方圖片的操作介面,這是 Elementor 即時預覽編輯的頁面設定,使用方法也很簡單,直接從左邊的工具,將你所想要編排的內容,按鈕拖到右邊的 「Drag widget here」 就可以了

站長最常使用的工具有 標題、圖片、文本編輯器、按鈕,以一頁式網站的架構來說,這些工具就足以編排出很好看的網頁

接著我們點選「模版庫」,來使用 Elementor模版庫 來快速建立著陸頁(Landing Page)

Elementor操作介面說明
Elementor操作介面說明

step 4

進到 Elementor 版型庫之後,在右上方的地方輸入 「Landing page 」搜尋關鍵字, 選擇一個你喜歡的頁面樣式之後,會進入到 網頁版型預覽

elementor landing page模版
elementor landing page模版

接著會出現選擇版型的預覽樣式,確認一下是不是你想要的,然後按下右上方的「插入」按鈕就可以了

elementor landing page頁面
elementor landing page頁面預覽

step 5

接著點選小齒輪的地方,設定 「頁面佈局」為「 Elementor 全寬」,這個設定會保留網站的 Header、Footer區塊

elementor 頁面佈局 全寬
elementor 頁面佈局 全寬

step 6

要修改網頁內容的話,只需要在要修改的地方上點一下,例如「圖片」、「文字」等等,在左邊就會出現對應的設定工具,即時編輯即時修改,超級方便

elementor 編輯 landing page頁面
elementor 編輯 landing page頁面

其他 Elementor 編輯工具

如果你覺得內建的 WordPress版型、Elementor 版型庫,或是 Elementor工具都不夠你使用的話,也可以加裝其他的 週邊外掛 來做功能擴充,對於日後要大量的製作 銷售頁 超級好用且快速

Elementor Pro – 官方的付費外掛

Ultimate Addons For Elementor – Astra公司開發的Elementor擴充外掛

Power Pack Elementor – 小工具所設計的質感都很不錯,用來做為形象網站超加分

結論

一頁式網頁或是一頁式商店做的好,可以有效 提高網站轉換率,多參考一下國外網站找些靈感,相信你對於這個 單頁式網站 會有更多想法



若是有網頁設計的需求,也可以透過「聯絡表單」或是「線上客服」的方式與我們聯繫, 我們也有提供1對1線上教學及顧問服務,可以針對你的網站及問題做操作教學及說明,有需求的話也都可以跟我們聯絡唷

如果對 WordPress架站 有興趣的朋友,可以訂閱馬思特電子報或是按讚追蹤馬思特粉絲頁,我們將不定時發佈 WordPress網站 及 網頁設計相關文章。

歡迎加入社團:「WordPres網站架設 / 網頁設計接案 / 部落格經營 / 網路行銷 /個人品牌」,主題是討論網站架設、部落格經營、網路行銷,有興趣的朋友也歡迎加入社團一同交流

本網站部份推薦的連結與商家有合作關係,如果您透過推薦連結購買商品,我們會得到少量分潤,支持我們產出更多優質文章,不會影響購買價格,詳情說明請查看 免責聲明

更多實用文章推薦

馬思特

12年以上網站架設與網路行銷的經驗,自由工作者5年+,架過的網站已達百個,製作過形象網站、購物網站、會員網站、課程平台網站,擅用網站工具來解決不同的問題,希望將多年來的網站經營經驗技巧分享給你,若是想成為自由接案者也歡迎私訊交流唷

發佈留言