跳至主要內容
內容目錄
一頁式網站製作教學 2026：WordPress Elementor 從零開始的完整步驟
想自己做一頁式網站？不用寫程式碼。用 WordPress 搭配 Elementor，拖拉操作就能完成。
這篇教學從零開始，一步一步帶你做出一個專業級的一頁式網站。就算你完全沒有架站經驗，跟著做也能成功。
如果你想做一個一頁式網站但時間有限，歡迎加 LINE 免費諮詢，最快 5 天幫你做好。
重點摘要： 用 WordPress + Elementor 做一頁式網站只需 5 步：租主機裝 WordPress → 選佈景主題 → 用 Elementor 建頁面架構 → 加動畫效果 → 效能優化。新手花 1-3 天可完成。推薦主題 Astra + Elementor 免費版就夠用。
製作前準備：你需要什麼工具
開始之前，確認你有以下三樣東西。
1. 網域與主機
網域就是你的網址（例如 yoursite.com），在網域商購買即可，年費約 NT$500-1,500。
主機是存放你網站檔案的伺服器。推薦選擇：
- Cloudways：月費約 US$14 起，速度快、穩定度高
- SiteGround：入門方案年費約 NT$3,000-5,000
- 品牌橙主機方案：我們 GOT YOU DESIGN 也提供代管主機方案
2. 安裝 WordPress
大部分主機都支援一鍵安裝 WordPress。在主機控制面板找到「WordPress」或「一鍵安裝」功能，點幾下就完成了。安裝過程不到 5 分鐘。根據 W3Techs 2026 年數據，WordPress 驅動全球約 42.5% 的網站（W3Techs, 2026），幾乎所有主機商都支援 WordPress 一鍵安裝。
3. 安裝 Elementor 外掛
登入 WordPress 後台 → 外掛 → 安裝外掛 → 搜尋「Elementor」→ 安裝 → 啟用。
Elementor 免費版就能做出很不錯的一頁式網站。如果需要更多進階功能（動態內容、WooCommerce 整合、更多模板），可以考慮 Elementor Pro。根據 Involve.me 統計，Landing Page 平均轉換率約 5.89-9.8%（Involve.me, 2026），用 Elementor 製作的一頁式網站搭配正確的轉換率優化技巧，可以達到這個水準。根據 DebugBear 報告，網站載入每延遲 1 秒轉換率下降 12%（DebugBear, 2025），製作時要注意圖片壓縮和程式碼精簡。根據 tenten 報告，台灣行動購物佔電商交易量已達 60%（tenten, 2025），一定要在手機上測試你的一頁式網站。根據 Hostinger 統計，個人化 CTA 轉換率高出 42%（Hostinger, 2026），Elementor 可以靈活設計各種 CTA 樣式。根據 Involve.me 數據，嵌入影片可提升 86% 轉換率（Involve.me, 2026）。根據 GlobeNewsWire 報告，台灣 B2C 電商市場持續成長中（GlobeNewsWire, 2026）。
第一步：選擇適合的 WordPress 一頁式佈景主題
佈景主題決定了你網站的基本外觀和功能。選對主題，後面的工作會順很多。
免費主題推薦
- Astra：最受歡迎的免費主題之一。速度快、客製化彈性高、跟 Elementor 完全相容。免費版就有大量的 Starter Templates 可一鍵匯入。
- OceanWP：功能豐富、免費版就有很多選項。適合電商和作品集。
- GeneratePress：極輕量、速度最快。適合追求極致效能的使用者。
付費主題推薦
如果你想要更獨特的設計或更多模板選擇：
- Starter Templates Pro（搭配 Astra）：超過 200 個一鍵匯入模板
- Flavor Theme：專為 Elementor 設計的高品質佈景主題
我們幫客戶做一頁式網站最常用的組合是 Astra + Elementor。這個組合穩定、快速、客製化彈性夠。免費版就能做出專業水準的一頁式網站。
很多教學會告訴你「先選主題再開始做」。但我們的經驗是：先把內容（文字、圖片）準備好，再開始動手做頁面，效率至少快 2 倍。沒有內容就開始排版，你會花 80% 的時間在「調整版面」上，而不是在做真正有價值的事。
第二步：用 Elementor 建立頁面架構
裝好主題後，開始用 Elementor 建立你的一頁式網站。
設定全寬版面
新增一個頁面 → 用 Elementor 編輯 → 在頁面設定中選擇「全寬」版面（Elementor Full Width）。這樣頁面就不會被主題的側邊欄和頁眉限制。
建立 Hero 主視覺區塊
Hero 區塊是訪客進入網站看到的第一個畫面。好的 Hero 區塊要有：
- 吸睛標語：一句話說清楚你是誰、能幫什麼忙
- 次標題：2-3 句話補充說明
- CTA 按鈕：明確的行動呼籲
- 背景圖或影片：視覺吸引力
在 Elementor 中：新增一個 Section → 設定背景圖片 → 加入 Heading Widget（標語）→ 加入 Text Widget（次標題）→ 加入 Button Widget（CTA）。
建立服務/產品介紹區塊
用 Elementor 的 Icon Box 或 Image Box Widget，以 2-3 欄排列呈現你的服務或產品。每個項目包含：圖示、標題、簡短說明。
建立客戶見證區塊
用 Testimonial Widget 或 Testimonial Carousel Widget。放入 3-5 則客戶好評，搭配頭像、姓名、公司名稱。社會證明是提高信任度最有效的元素之一。
學完覺得太複雜？沒關係，加 LINE 讓我們幫你搞定
第三步：加入互動元素與動畫效果
靜態頁面看起來太無聊？加一些動畫效果讓頁面更生動。但別過頭——太多動畫會讓頁面變慢。
滾動觸發動畫
Elementor 內建了滾動觸發動畫。在任何 Widget 的「進階」分頁中，找到「Motion Effects」或「Entrance Animation」，選擇動畫類型（淡入、滑入、縮放等）。
建議：每個區塊的第一個元素加上淡入動畫就好。不需要每個元素都加動畫。
錨點導覽設定教學
一頁式網站的導覽選單要用「錨點連結」。操作步驟：
- 在每個區塊的 Section 設定中，找到「進階」→「CSS ID」欄位
- 為每個區塊設定一個 ID（例如
hero、services、contact） - 在導覽選單中，建立自訂連結，URL 填
#services、#contact等
手機版排版調整
Elementor 可以針對桌面、平板、手機分別設定不同的排版。點擊底部的設備圖示切換預覽模式。
手機版要特別注意：
- 文字大小要足夠（至少 16px）
- 按鈕要夠大好點擊（至少 48px 高度）
- 圖片不要太大影響載入速度
第四步：嵌入聯絡表單與 CTA
聯絡表單
推薦使用 WPForms（免費版夠用）或 Gravity Forms（功能更完整）。
安裝好表單外掛後，在 Elementor 中直接用 Shortcode Widget 嵌入表單。或者 Elementor Pro 有內建的 Form Widget。
CTA 按鈕最佳實踐
一頁式網站至少要有 3 個 CTA 按鈕：Hero 區塊一個、中段一個、底部一個。
按鈕設計三要素：
- 顏色要跟背景形成強烈對比
- 文案要具體（「免費諮詢」比「了解更多」好）
- 大小要足夠（手機上至少 48px 高度）
第五步：效能優化與上線前檢查
做完頁面不代表能上線。還需要做效能優化。
圖片壓縮與延遲載入
安裝 ShortPixel 或 Imagify 外掛，自動壓縮上傳的圖片。在 Elementor 設定中開啟「Lazy Load」（延遲載入），讓圖片在用戶滾動到該位置時才載入。
PageSpeed 測試
上線前用 Google PageSpeed Insights 測試你的網站速度。目標是行動版分數 70 分以上。
常見的拖速原因：圖片太大、未使用瀏覽器快取、JavaScript 檔案太多。
行動裝置測試清單
- 文字在手機上是否清楚可讀
- 按鈕是否夠大好點擊
- 圖片是否正確顯示
- 表單是否正常運作
- 錨點導覽是否正常跳轉
WordPress 一頁式網站常見錯誤與解法
選單錨點跳轉失靈
最常見的問題。原因通常是 CSS ID 設定錯誤。確認：ID 不要用空格、不要用特殊字元、大小寫要一致。
手機版排版跑掉
用 Elementor 的響應式模式逐一檢查手機版排版。常見問題是文字太大撐破容器、圖片沒有自適應寬度。
頁面載入速度慢
三大元凶：未壓縮的圖片、太多動畫效果、太多外掛。精簡你的外掛數量，壓縮所有圖片，移除不必要的動畫。
不想從零開始？試試這些模板 →
想省錢自己做？看費用比較 →
想提高轉換率？看 7 個銷售頁設計技巧 →
看看別人怎麼做的？15 個一頁式網站範例 →
回到一頁式網站完整攻略
常見問題 FAQ
Q: 完全沒經驗的新手能用 Elementor 做一頁式網站嗎？
A: 可以。Elementor 的拖拉操作非常直覺，不需要寫程式碼。搭配 Astra 的 Starter Templates，可以一鍵匯入現成模板再修改內容。新手花 1-3 天就能做出不錯的成果。
Q: Elementor 免費版跟 Pro 版差在哪？
A: 免費版包含基本的 Widget 和編輯功能，做一個基本的一頁式網站完全夠用。Pro 版多了 Theme Builder、WooCommerce Widget、更多模板、動態內容等進階功能。如果你需要電商功能或更多模板，再考慮升級。
Q: 自己做 vs 找人做，哪個比較好？
A: 看你的時間和設計需求。自己做省錢但花時間（1-3 天），設計品質取決於個人美感。找專業團隊花錢但省時間（3-5 天），設計品質有保證。如果是商業用途，建議找專業團隊。
不想自己做？讓專業的來
GOT YOU DESIGN 用 WordPress + Elementor 幫你做出專業級一頁式網站，最快 5 天交付。
常見問題
完全沒經驗的新手能用 Elementor 做一頁式網站嗎？
可以。Elementor 的拖拉操作非常直覺，不需要寫程式碼。搭配 Astra 的 Starter Templates，可以一鍵匯入現成模板再修改內容。新手花 1-3 天就能做出不錯的成果。
Elementor 免費版跟 Pro 版差在哪？
免費版包含基本的 Widget 和編輯功能，做一個基本的一頁式網站完全夠用。Pro 版多了 Theme Builder、WooCommerce Widget、更多模板、動態內容等進階功能。如果你需要電商功能或更多模板，再考慮升級。
自己做 vs 找人做，哪個比較好？
看你的時間和設計需求。自己做省錢但花時間（1-3 天），設計品質取決於個人美感。找專業團隊花錢但省時間（3-5 天），設計品質有保證。如果是商業用途，建議找專業團隊。