掌握四大排版模式
本文結合後台操作介面與前台實際呈現效果,協助您快速理解系統內「文章」編輯功能的四種專屬排版模式,並依據不同內容需求選擇最合適的呈現方案。
📖 本頁目錄
1. 編輯器 (Editor)
後台設定 編輯器操作說明
🚀 設定路徑: 後台管理 ❯ 文章編輯 ❯ 編輯器模式
適用場景: 部落格文章、新聞發布、詳細產品介紹或隱私權條款等需大量文字與彈性排版的內容。
- 全能工具列:支援文字加粗、條列式編號、插入圖片與表格等功能。
- 媒體嵌入:可自由在文字段落間穿插圖片或超連結,版面不受框架限制。

前台效果 經典文章樣式呈現
標題與內文層級分明,圖片將精準顯示於您在編輯器中插入的位置,提供流暢的閱讀體驗。

2. 圖文輪播 (Carousel)
後台設定 結構化圖文組合
🚀 設定路徑: 後台管理 ❯ 文章編輯 ❯ 圖文輪播模式
適用場景: 產品特點、服務項目介紹或作品集展示,適合「一圖配一文」的規整排版。
- 標題與內文:設有專屬欄位填寫標題與簡短說明。
- 新增內容:點擊 新增 建立多組內容,並可勾選「圖片置右」製作視覺交錯效果。

前台效果 精緻並排與輪播動效
圖片與文字並列顯示,視覺整齊。若內容超過一組,右下角將出現切換箭頭 < 1 / 2 > 供瀏覽切換。

3. 單張圖片 (Single Image)
後台設定 極簡純視覺上傳
🚀 設定路徑: 後台管理 ❯ 文章編輯 ❯ 單張圖片模式
適用場景: 活動海報、形象廣告、或任何不需額外文字說明的純視覺展示。
極簡介面:僅需上傳製作好的圖片即可完成,系統提供最純粹的視覺呈現效果。

前台效果 視覺焦點吸引目光
圖片將以最佳比例呈現,最大化吸引讀者視線,適合作為強調品牌形象或特定活動的聚焦內容。

4. 時間軸 (Timeline)
後台設定 以日期為核心的編輯
🚀 設定路徑: 後台管理 ❯ 文章編輯 ❯ 時間軸模式
適用場景: 公司發展沿革、品牌大事紀、人物生平或專案進程。
- 日期導向:設有專屬日曆欄位(必填),作為內容排序與顯示的主要依據。
- 圖文同步:可同步輸入標題與內文,並為每個時間點配置對應圖片。

前台效果 自動生成的垂直沿革
系統將自動生成左右交錯的動線呈現歷史感,適合展示具有先後順序的故事。您亦可勾選「橫式排列」變更版型。

💡 實務技巧與編輯規範
排版技巧 如何優化列表顯示
快速模式選擇:
- 長篇文章或故事 ❯ 編輯器
- 產品特色介紹 ❯ 圖文輪播
- 大張視覺海報 ❯ 單張圖片
- 品牌里程碑 ❯ 時間軸
隱藏「文章列表」日期
若不希望列表頁顯示日期,進入編輯頁面後,將「建立(發佈)日期」欄位清除並「儲存」,列表頁即會自動隱藏日期資訊。

重要規範「編輯器」安全編輯
⚠️ 避免直接貼上第三方內容:
請勿直接從 Word、Excel、PowerPoint 或其他網頁複製內容後直接貼入後台「編輯器」中。此類操作皆易夾帶大量隱藏樣式(CSS)與格式語法,可能導致前台畫面或功能異常。請務必使用**「純文字模式」**貼上內容。您可先將文案內容貼至「記事本」工具,清除格式後,再貼入後台「編輯器」,後續進行圖片上傳與版面排版設定。
請勿直接從 Word、Excel、PowerPoint 或其他網頁複製內容後直接貼入後台「編輯器」中。此類操作皆易夾帶大量隱藏樣式(CSS)與格式語法,可能導致前台畫面或功能異常。請務必使用**「純文字模式」**貼上內容。您可先將文案內容貼至「記事本」工具,清除格式後,再貼入後台「編輯器」,後續進行圖片上傳與版面排版設定。
⚠️ 關於 AI 工具產出之語法:
本技術團隊將不負責協助檢視、調整或修復由 AI 工具所產生的 HTML/CSS 貼入「編輯器」中的語法錯誤。若需達成個別排版效果,建議可使用後台「加入範本」工具或可由本公司設計師加費協助。
本技術團隊將不負責協助檢視、調整或修復由 AI 工具所產生的 HTML/CSS 貼入「編輯器」中的語法錯誤。若需達成個別排版效果,建議可使用後台「加入範本」工具或可由本公司設計師加費協助。
完成以上設定與優化,您的網頁內容呈現將會更加專業且符合使用者閱讀習慣!