掌握四大排版模式
這篇文章結合了後台操作介面與前台實際呈現的效果,幫助使用者快速理解不同模式的適用場景。在我們的網站內容管理系統中,為了讓您能更靈活地呈現不同類型的資訊,我們在「文章」的編輯功能中,設計了四種專屬的排版模式。
1. 編輯器 (Editor)
後台設定 編輯器操作說明
操作路徑: 後台管理 ❯ 文章編輯 ❯ 編輯器模式
適用場景: 一般部落格文章、新聞發布、詳細產品介紹、隱私權條款...等需要大量文字與自由排版的內容。
- 工具列:您可以使用上方工具列進行文字加粗、斜體、條列式內容、插入圖片...等。
- 插入媒體:支援在文字段落中插入圖片、表格或超連結。
- 操作彈性:您可以自由決定圖片與文字的穿插順序,版面不受固定框架限制。

前台效果 經典文章樣式呈現
標題與內文層級分明,圖片會依照您在編輯器中插入的位置顯示(如圖例中的照片與文字),適合閱讀各種資訊。

2. 圖文輪播 (Carousel)
後台設定 結構化圖文組合
操作路徑: 後台管理 ❯ 文章編輯 ❯ 圖文輪播模式
適用場景: 產品特色亮點、服務項目介紹、作品集展示...等,適合「一張圖配一段說明」的結構化內容。
- 標題與內文:設有專屬欄位填寫標題與簡短說明。
- 圖片上傳:設有專屬圖片上傳區塊(系統建議寬度 600px)。
- 新增內容:點擊 新增 即可建立多張切換內容,並可勾選「圖片置右」製作對稱或交錯的排版效果。

前台效果 精緻並排與輪播動效
- 版面配置:圖片顯示於一側,文字說明顯示於另一側,視覺整齊清爽。
- 輪播功能:若新增多組內容,右下角會出現切換箭頭(< 1 / 2 >)可瀏覽不同圖片。

3. 單張圖片 (Single Image)
後台設定 極簡純視覺上傳
操作路徑: 後台管理 ❯ 文章編輯 ❯ 單張圖片模式
適用場景: 活動海報、形象廣告、不需要文字說明的純視覺展示。
極簡介面:僅有一個圖片上傳區塊。只需將製作好的圖片上傳即可,無需編輯任何文字。

前台效果視覺聚焦
圖片將以版面適中的比例直接呈現。如圖例中的照片,能最大程度吸引目光,適合作為強調聚焦作用的內容。

4. 時間軸 (Timeline)
後台設定 以日期為核心的編輯
操作路徑: 後台管理 ❯ 文章編輯 ❯ 時間軸模式
適用場景: 公司發展沿革、品牌事紀、人物生平履歷、專案開發進程...等。
- 日期欄位:介面上方設有日曆圖示欄位,作為內容排序的主要依據。(此為預設預設必填欄位無法填空)
- 圖文內容:可同步輸入標題、內文並上傳對應圖片。

前台效果 自動生成的垂直沿革
- 交錯排列:系統依日期排序,圖文內容會自動左右交錯呈現,讓軌跡動線一覽無遺。
- 歷史感:非常適合述說具有時間先後順序的故事或里程碑。
- 排列方式:並可依照個人喜好選擇勾選/不勾選「橫式排列」。

💡 小提醒:希望編輯的版面整齊排列,如何選擇?
- 寫長篇文章或故事?請選 編輯器。
- 介紹產品多個特點?請選 圖文輪播。
- 只需要放一張大圖?請選 單張圖片。
- 展示公司歷史或里程碑?請選 時間軸。
完成以上設定,您的網頁內容呈現將會更加專業且符合使用者閱讀習慣!