Canva 單頁式網頁
設計與視覺佈局

從主視覺到自訂網域，一次掌握單頁網站的核心流程。

11 個步驟 · 13 頁精華

首爾自由行立即預訂

01

STEP 01 · HERO SECTION

主視覺：3 秒傳達核心價值

五大元件

大圖背景（主題照片）
活動主題標題
優惠與價格資訊
行動呼籲按鈕 CTA
品牌 Logo 與輔助圖示

背景圖右鍵 → 移至最後面；CTA 放在標題正下方。

LOGO

📍

首爾自由行

限定優惠 · 早鳥價

立即預訂

02

STEP 02 · CTA & PREVIEW

按鈕綁定與多端預覽

複製表單網址→右鍵貼上連結→按「完成」→預覽測試

桌面版預覽

完整呈現寬螢幕多欄佈局，可直接測試按鈕點擊與跳轉。

手機版預覽

自動重排為單欄，僅供檢視，無法單獨微調元件。

桌面版的文字與圖案務必先群組化，避免手機版元件錯位。

03

STEP 03 · MULTI-COLUMN

三欄式版型與視覺一致

歷史古蹟

景點與文化故事

購物天堂

商圈與伴手禮

美食巡禮

在地小吃與餐廳

吸色工具

擷取主視覺代表色，建立全站色彩系統。

Shift 多選 + 加大字距

批量改白字，加大 Tracking 提升質感。

複製格式

相框邊框一鍵套用到其餘圖片。

04

STEP 04 · TEXTURE & MOTION

背景紋理與動態效果

輕量紋理

圖案設為米色，透明度 10%–20%
圖層移到最後面
按住 Alt 拖曳，複製鋪滿

三種微動態

平移：水平滑入，適合卡片組
揚升：由下往上浮現
淡化：適合文字與底圖

切換到「頁面」標籤，一次套用全頁動畫，節奏一致。

05

STEP 05 · FREE LAYOUT

自由版型：關於我們

四步建構

R 米色圓角矩形底板
T 「關於我們」標題
L 垂直細線，粗細 1
T 簡介、服務、理念

「品牌座右銘 / 經典引言」

關於我們公司簡介、服務項目與經營理念

移到主視覺正下方，第一時間建立信任。

06

STEP 06 · AI EXPAND

AI 畫面擴展與影像調校

AI 展開

地標照置中 →「裁切」→「AI 展開」→ 選完整頁面，延伸天空，左右自然成為文字區。

T 建左側文字，Alt 拖曳複製到右側。

聚焦漏斗

亮度

陰影

飽和度

清晰度

暈影

暈影加深四周暗角，把視線拉回中央主角。

07

STEP 07 · INTERACTIVE

簡報嵌入：橫向滑動評價

1366×560 簡報→圓角卡片 + 頭像→Ctrl D 複製頁→轉場「滑動」

嵌入網站

分享 →「嵌入」複製 https 網址，回網站用 Embed 應用程式貼上。

網址參數

?mode=watch 自動播放

?mode=view 手動滑動（評價適用）

08

STEP 08 · FORM & FOOTER

表單嵌入與深色頁尾

Google 表單

發布 → 嵌入 HTML，只取 https 網址
用 Embed 貼進畫布
同色矩形蓋住白色頁首，再加歡迎標題

深色頁尾

左：地址、電話、Email、版權
右：社群圖示改白或淺灰
圖示右鍵貼上社群網址

深色頁尾暗示「已到終點」，為整頁帶來視覺沉澱。

09

STEP 09 · NAVIGATION

單頁式導覽列原理

頁面命名

Vision Travel關於　旅遊行程　聯絡我們

預覽／發布時勾選「包含導覽選單」，自動生成玻璃質感導覽列。

系統限制

僅支援同頁錨點滾動，無法連到外部多頁，也不能建立下拉選單。

適合 Landing Page、活動頁、作品集。

10

STEP 10 · PUBLISH & SEO

發布設定與 SEO 基礎

發布面板

務必勾選手機版面最佳化
網域：Canva 免費子網域或自訂網域
第三方註冊商（如 GoDaddy）更有價格彈性

SEO 設定

標籤頁名稱：品牌 + 關鍵字
網站說明：120–160 字
Noindex：測試期開啟

11

STEP 11 · CUSTOM DOMAIN

GoDaddy 網域 DNS 串接

類型	名稱	內容值
A	@	Canva 提供的 IP
A	www	同一個 IP
TXT	@	Canva 驗證碼（前後勿有空格）

新增 A 記錄前，先刪除預設的 @ 與 www 舊記錄；網域租 1 年並關閉自動續約。生效約 20 分鐘至 72 小時。

✓

QUICK REFERENCE

快捷鍵速查與重點回顧

R矩形

T文字框

L直線

Shift多選

Alt拖曳複製

Ctrl D複製頁面

1　主視覺與 CTA 先做好

2　色彩、字距、動畫一致

3　嵌入互動，設好導覽與 DNS

Canva 單頁式網頁設計與視覺佈局