網站架設素材準備指南 — 菠蘿品牌
01
頁首(Header)設定
項目說明提供格式
頁首公告列一行文字,例如「滿3000元免運」、「加入官方賴折$100元」文字檔
LOGO 檔案含主Logo、網站小圖示ICON、橫式/直視版本.AI / .PNG(透明底)
主選單項目常見:首頁、關於我們、商店、購物須知、常見問題等文字檔
功能按鈕□ 搜尋 □ 購物車 □ 會員登入/註冊文字檔
02
網站頁面架構規劃

請列出網站所需頁面及內容方向,每頁建議提供主視覺 Banner 圖片 + 對應文字介紹。

🏠 首頁
主視覺Banner(單圖或輪播)、品牌介紹、最新商品/活動區塊、商品分類區塊、熱銷商品推薦
Banner 1920×800px (PC) / 808×1080px (手機)
👋 關於我們
品牌故事、理念、品牌形象、團隊介紹等,可為全圖、純文字或半圖半文
Banner 1920×800px / 808×1080px
🛍 商店
商品名稱、價格、規格、介紹文案,可搭配資料夾附上圖片加文字檔命名清楚
分類名稱 + 商品照 + 文案 + 價格
📋 購物須知
常見QA、購買方式、售後說明等
圖片 + 文字檔 / Word / Excel
🎉 本月活動 / 最新消息
活動海報、優惠內容、期限說明
圖片 + 文字檔 + 示意排版圖
✨ 客製化商品 / 服務
介紹不同方案與流程、示意圖
圖片 + 文字檔 + 示意排版圖
📬 聯絡我們
聯絡表單、社群連結、客服資訊
圖片 + 文字檔 + 連結
📁 其他頁面
如作品集、部落格等
圖片 + 文字檔 + 示意排版圖
03
首頁設計內容

首頁為網站最重要的門面與轉換入口,以下為常見區塊,可依個人需求增減調整。

區塊名稱說明提供格式
主視覺 Banner可單張主視覺或輪播多張圖片 + 文字檔
1920×800px / 808×1080px
最新商品 / 主打商品展示新品或熱銷品商品圖 + 文字檔,圖片 1000×175px(長條形)
商品分類導覽區分不同商品或服務類別分類封面圖 + 名稱
本月活動 / 限時優惠顯示活動橫幅或海報圖片 + 活動期間文字
互動導流區優惠卷、社群連結,增強品牌信任感圖片或按鈕文字 + 連結網址(如LINE社群、領優惠券)
Instagram 貼文串接自動抓取最新IG貼文顯示在首頁提供 IG 帳號及連結
影片展示區品牌介紹影片、產品影片或活動影片Youtube 連結 + 標題 + 簡短說明
客戶回饋 / 合作品牌顯示顧客評價、合作品牌LOGO、媒體報導建議附圖片
💡 建議以 3–6 個重點內容呈現最清楚,若有導流活動(如加入社群、領券、新會員優惠),請務必附上圖片及對應連結。
04
頁尾(Footer)內容
項目說明提供格式
關於我們□ 品牌名稱 □ 統編文字檔
聯絡資訊□ 客服信箱 □ 服務時間文字檔
門市資訊□ 交通 □ 地址 □ 營業時間 □ 電話文字檔
社群平台□ IG □ FB □ 官方賴 □ Youtube □ Threads請提供連結和社群名稱
購物相關□ 隱私權政策 □ 售後說明 □ 退換貨說明 □ 付款與運送方式可整理成 Word / Excel 檔
其他文字檔
05
整體視覺風格設定
待填入色碼
頁首公告列背景色
待填入色碼
頁首底色(選單區)
待填入色碼
網站主背景色
待填入色碼
主要字體顏色
待填入色碼
懸浮字體顏色(Hover)
待填入色碼
頁尾背景色
項目說明
字體風格有指定字體需取得網頁用字體授權;若無授權皆使用 Google 字體
排版示意圖若有想要的版型或喜歡的網站參考,可提供網址作為參考
06
功能設定資訊
項目需要資料提供格式
網域 & 主機資訊若已有購買請提供登入帳密文字檔
金物流資訊□ 統一金流 □ 綠界 □ Line Pay → 註冊帳號及 API 金鑰可協助對接設定
第三方工具如 GA4 / Meta Pixel可協助安裝追蹤碼
社群登入□ IG □ FB □ 官方賴 □ Google須擁有開發者權限或遠端使用,可協助串接
菠蘿品牌網站製作指南  ·  網站架設素材準備指南  ·  2026