--- title: 如何使用「頁面設定」 description: 「頁面管理」>「頁面設定」     ① 設定頁面名稱 ② 設定網址路徑   網址路徑的填寫方式： 例如我想要連到首頁： https://xxxxxxx.lodestar-dev.cc 路徑就填 / (即可設定完首頁) 例如想連到 https://xxxxxxxx.lodestar-dev.cc/xxx 就填 /xxx 即可         將原件拉至空白畫面中，出現綠色線條，即可成功放置。     --- [跳到內容](https://help.kolable.com/migration/zh-tw/learn/page_setup#main-content) 中文 - 繁體 顯示翻譯的子功能表 [客戶入口網站](https://help.kolable.com/support?hsLang=zh-tw) ![kolable\_logo.png\]](https://help.kolable.com/hs-fs/hubfs/kolable_logo.png?height=40&name=kolable_logo.png) 開啟主要導覽 關閉主要導覽 - 中文 - 繁體 顯示翻譯的子功能表 - [客戶入口網站](https://help.kolable.com/support) 你需要哪方面的協助？ - 搜尋欄位為空，無法提供建議。 1. [Learn KOLABLE](https://help.kolable.com/migration/zh-tw/learn?hsLang=zh-tw) 2. [使用手冊](https://help.kolable.com/migration/zh-tw/learn/%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8A?hsLang=zh-tw) # 如何使用「頁面設定」 ![cover](https://static.kolable.com/post_covers/support/b76f22a9-f97d-4383-a904-5674dbaff179/400?t=1643012029946) 如何使用「頁面設定」   「頁面管理」\>「頁面設定」     ### 建立頁面 ① 設定頁面名稱 ② 設定網址路徑   **網址路徑的填寫方式：** 例如我想要連到首頁： https://xxxxxxx.lodestar-dev.cc 路徑就填 **/** **(即可設定完首頁)** 例如想連到 https://xxxxxxxx.lodestar-dev.cc/**xxx** 就填 **/xxx** 即可   ![](https://static.kolable.com/images/support/editor/d0569e62-d9d9-40b1-a771-d16de6b244a2/1200)       ### 元件套用 將原件拉至空白畫面中，出現綠色線條，即可成功放置。   ![](https://static.kolable.com/images/support/editor/fd894de0-4d3c-43d0-9f7c-c80d308cb1e1/1200)     ![](https://static.kolable.com/images/support/editor/ccb52e16-47f3-401a-87ef-e2884e20d166/1200)       ### Banner輪播圖設定 選擇「輪播區塊-純圖」，拖移至空白畫面中。   ![](https://static.kolable.com/images/support/editor/6408b737-b38d-446b-a0d5-c84fdeb28825/1200)   點選「筆」的圖示，可進行元件的編輯。   ![](https://static.kolable.com/images/support/editor/366b5661-ab60-4335-b169-dd0cc91e2ef6/1200)   可自行更換Banner圖片   ![](https://static.kolable.com/images/support/editor/d4362c6d-a2f2-4853-86d6-8bd4e6bab37e/1200)   點選「複製」圖示 則可製作多張Banner圖   ![](https://static.kolable.com/images/support/editor/84f50812-923e-463c-8359-79f94edf1bfc/1200)       ### Banner建議尺寸 統一整理： •電腦：1920x612px •平板：1300x612px •手機：750x530px 注意事項： •為避免發生在不同螢幕裝置，重要資訊被裁切的狀況，設計製圖上建議勿把重要資訊or圖放得太靠近邊界。 •平板尺寸可依情況決定是否要製作，基本上一般情況下，只需做電腦版跟手機版的圖即可。 ### 課程組合區塊、活動組合區塊 以下舉課程區塊為範例～ ![](https://static.kolable.com/images/support/editor/3ab341c2-97ad-45a6-8330-f08d737b44a0/1200)   點選「編輯」 ![](https://static.kolable.com/images/support/editor/520a90c4-f6d7-4389-9b66-4187220aa751/1200)   「排序規則」可選擇 ①依上架日期：排序方式可選擇“正序”、“倒序” ②自訂項目： 可自定課程於前台的顯示順序 ![](https://static.kolable.com/images/support/editor/e9b2d4d8-8386-46d0-8e16-91a887846287/1200)     「資料顯示數量」 可設定於前台顯示的課程數量 ![](https://static.kolable.com/images/support/editor/3e438977-2502-40c6-a013-ac26e7fc1579/1200)   「欄數」 設定於一欄內顯示的課程數量 ![](https://static.kolable.com/images/support/editor/d97ffb3a-51f3-42ba-aebc-6024b8478ae1/1200)   ![](https://static.kolable.com/images/support/editor/c719c93c-45ee-40c6-96bc-41308226a3dd/1200)     🌟另需注意 「欄數」設定在手機版裝置及平板裝置 建議設定為 “1” 即可 ![](https://static.kolable.com/images/support/editor/525360a4-1f62-4879-a431-dffe6370bde1/1200)   ![](https://static.kolable.com/images/support/editor/8e4327f6-76f3-42be-a179-2874ffb0a59f/1200)     ### 元件加上CSS樣式 於各元件編輯的最下方有一欄位為「進階設定」，裡面可以設定「類別名稱(class)」，接著至Style 頁面中自行調整每一個元件的css class 樣式   ![](https://static.kolable.com/images/support/editor/05f95783-f923-4cf8-b22a-2455401776a8/1200)       ### 如何預覽頁面 需點選「發佈」，才可進行「預覽」。   否則直接點選預覽只會看得到白畫面呦！     ![](https://static.kolable.com/images/support/editor/af8d07b7-c94d-4fdf-9ed4-9e0c544625e6/1200)     ![](https://static.kolable.com/images/support/editor/cae8b302-a7be-4948-943c-c5c0166e668e/1200) - [使用手冊](https://help.kolable.com/migration/zh-tw/learn/%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8A?hsLang=zh-tw) - [常見問題](https://help.kolable.com/migration/zh-tw/learn/%E5%B8%B8%E8%A6%8B%E5%95%8F%E9%A1%8C?hsLang=zh-tw) - [教學手冊](https://help.kolable.com/migration/zh-tw/learn/%E6%95%99%E5%AD%B8%E6%89%8B%E5%86%8A?hsLang=zh-tw#main-content) - [入門資訊 Before Started](https://help.kolable.com/migration/zh-tw/learn/%E6%95%99%E5%AD%B8%E6%89%8B%E5%86%8A?hsLang=zh-tw#%E5%85%A5%E9%96%80%E8%B3%87%E8%A8%8A-before-started) - [開始建立 Edit](https://help.kolable.com/migration/zh-tw/learn/%E6%95%99%E5%AD%B8%E6%89%8B%E5%86%8A?hsLang=zh-tw#%E9%96%8B%E5%A7%8B%E5%BB%BA%E7%AB%8B-edit) - [百科全書](https://help.kolable.com/migration/zh-tw/learn/%E7%99%BE%E7%A7%91%E5%85%A8%E6%9B%B8?hsLang=zh-tw) [![kolable-logo](https://help.kolable.com/hubfs/KOLABLE.svg "kolable-logo")](https://kolable.com) 版權所有 © 2026，台灣數位遊牧者協會