發布 2024-10-15|更新 2026-10-17
這支影片示範如何修改網站首頁的內容:登入網站後台,選擇「頁面編輯」功能,進入要修改的首頁,再用前端編輯工具直接點擊文字或圖片區塊進行編輯。標題、內容文字、按鈕連結都能在同一個畫面修改,完成後點擊「儲存」,並切換桌面、平板和手機視角確認顯示效果。
| 要改的內容 | 點哪裡 | 改完要做的事 |
|---|---|---|
| 橫幅(Banner)文字、內文文字 | 直接點擊文字區塊 | 輸入新文字,按「儲存」(Save) |
| 圖片 | 點擊圖片區塊 | 上傳新圖像,按「儲存」 |
| 按鈕文字與連結 | 點擊按鈕進入編輯 | 修改文字及連結頁面,按「儲存」 |
| 手機、平板顯示 | 上方的裝置切換 | 逐一預覽確認,再按「儲存」 |
1進入網站後台
先登入網站後台。
登入後找到頁面管理的功能,通常在左側工具列有一個名為「SP PAGE Builder」的選項。
選擇「頁面編輯」(Pages),進入後會看到網站的頁面列表,例如網站首頁,點選要修改的頁面。
2使用網頁前端編輯
滑鼠移到首頁那一列,會看到「前端編輯」選項,點擊進入後便會模擬前端編輯頁面。
要修改橫幅 (Banner) 的文字或圖像,只要點擊對應的區塊。
前端編輯是什麼
依 SP Page Builder 官方文件 說明,SP Page Builder 的前端編輯器採所見即所得的拖曳編輯,所有修改會直接顯示在頁面上;從 SP Page Builder 的頁面列表點擊編輯圖示,就會進入編輯介面。
3修改文字與圖片
要修改文字,直接點擊文字區塊,會彈出編輯介面,輸入新的文字後按下「儲存」(Save)。
修改圖片的方式相同,點擊圖片後即可上傳新的圖像,記得儲存變更。
4修改按鈕與連結
要修改按鈕的文字或連結,點擊按鈕進入編輯,就能變更按鈕上的文字及對應的頁面連結。
完成後同樣按下「儲存」。
5預覽與儲存
最後在頁面中預覽桌面、平板和手機的樣式。SP Page Builder 編輯器上方提供桌機、筆電、平板橫向、平板直向、手機橫向、手機共 6 種檢視尺寸(來源:SP Page Builder 官方文件)。
確認修改完成後,記得按下儲存。
儲存前檢查
- 手機版文字是否斷行過長或被圖片蓋住
- 按鈕連結點下去是否開到正確頁面
- 新上傳的圖片是否清楚、尺寸是否合適
相關文章
- 網站教學(1) - 全站設定、SEO、文章編輯
- 網站教學(2) - OGTYPE、SEO關鍵字研究、SEO文章架構
- 網站教學(3) - 網頁設計編輯器 PAGE BUILDER
- 網站教學(4) - 產品目錄 EASYSTORE
- 網站教學(5) - 選單管理與全站備份
- 網站後台系統:全功能、簡單易用的理想選擇
- 網頁設計 頁面編輯器 Page Builder :無需寫程式碼:輕鬆上手教學
- 網頁設計 教學:打造完美的 JOOMLA 和 WORDPRESS 網站
網頁設計 問與答
推薦閱讀:omo跨境品牌電子商務購物網站 全後台模組化形象官網
簡易電子書下載:一頁式網頁設計電子書

