模組排版、卡片與外觀

概述

模組是組成網頁的獨立內容區塊（就像樂高積木）。封面主視覺、圖文並排、卡片畫廊、常見問題、關鍵指標與 YouTube 影片，都是一個個模組。您可以在同一頁自由堆疊多個模組，並針對單一模組調整底色、卡片風格、間距與按鈕位置，打造出豐富的視覺層次。

想知道目前共有哪些模組可選，請搭配查閱。

新增、排序與管理模組

1. 新增模組（AI 輔助或從範本修改）

1. 在編輯網站頂部工具列開啟「模組」。面板依用途分為「推薦」「視覺」「圖文」「文字」「資訊」「商店」與「整合」（若系統已分析您的品牌，最前方會列出適合補齊的「推薦」模組）。
2. 點選想加入的模組卡片：
   • 支援 AI 的內容模組可選擇「AI 輔助」（輸入需求由 AI 寫好初稿，消耗 2 點 AI 點數）或「從範本修改」。
   • 商店模組（商品展示、商品目錄、計劃選購）與網上表單直接讀取您後台建立的資料，加入後從下拉選單綁定即可。
3. 選擇要插入在頁面最上方或某個既有模組下方，確認內容後點擊面板底部的「加入網站」即寫入草稿。

提示：頁首與頁尾是全站固定的上下外框，不在「模組」目錄中，請從頂部工具列的「版面」編輯；多連結工具頁則是單頁專用版面，不支援混排一般模組。

2. 在畫布或「版面」面板排序、複製與跨頁移動

將滑鼠移到預覽畫布的模組上（流動裝置點選模組後看底部懸浮列），或開啟頂部的「版面」清單，可使用右上角的「編輯」與「⋯」執行以下動作（操作後皆立即自動存入草稿）：

• 拖曳排序／上移下移：在「版面」清單按住拖曳把手即可調整模組順序。
• 隱藏與顯示（眼睛圖示）：暫時不想公開的活動或籌備中內容可設為「隱藏」（下方會跳出「復原」提示，隨時可重開），不必刪除重做。
• 再製（複製）：複製出一個相同內容與排版的模組，適合快速建立結構一致的段落。
• 移動到其他頁面：當網站有多個一般頁面時，可將該模組直接搬移到另一頁。
• 刪除：移除該模組（剛刪除可按頂部 ↶ 上一步 或從找回）。

同家族模組「一鍵轉換版型」

選錯模組不需要刪掉重打！對於結構相近的模組家族，您可以直接點選畫布模組右上角「⋯」（或「版面」面板選單）中的「轉換版型」，一鍵切換成同家族的其他模組：

• 來回切換也不掉圖：就算您先把「圖文小卡畫廊」轉成不顯示照片的「文字小卡畫廊」，系統仍會在背景替您保留原本上傳的圖片與焦點；之後再轉回「圖文小卡畫廊」時，照片會原封不動回來。

文字局部排版、標題層級與長文收合

點選模組的標題或描述（內文）輸入框時，欄位標題列右側會自動浮現富文本排版工具列與 AI 寫作按鈕：

1. 標題語意層級（H1 / H2 / H3）

點擊標題欄位工具列上的 H1 / H2 / H3 按鈕，即可切換該標題的語意與預設字級：

• H1（頁面主標題）：建議每一頁只留給最上方的首屏模組（如「頁面主視覺」），讓 Google 與 AI 搜尋一眼看懂這頁的主題。
• H2（段落大標題）：一般內容模組的預設層級，代表頁面中的各個主要章節。
• H3（次級小標題）：適合附屬說明或卡片標題。

2. 局部文字大小、顏色與格式

在標題或描述框內反白選取一段文字，即可用工具列為該段文字單獨套用樣式：

• 局部字級：提供 9 級字級，可讓標題中的某個關鍵詞特別放大或縮小。
• 文字顏色與螢光底色：可切換文字色或加上柔和螢光筆底色，突顯優惠或關鍵數字。
• 文字格式與結構：支援粗體、斜體、底線、刪除線、項目清單、編號清單、引用區塊、行內超連結，以及一鍵「清除格式」。

3. 長文收合（避免字太多把頁面拉得太長）

當模組的描述內文輸入超過 150 個字時，輸入框底部會自動浮現「長文收合」設定列：

• 可選擇「全部顯示」（預設）、「顯示 3 行 / 5 行 / 10 行 / 15 行」（超出部分自動漸層收合並附上「查看更多」展開按鈕），或「固定高度捲動區域」。
• 在卡片與列表模組（如圖文小卡、文字小卡、常見問題、計劃展示、里程碑、多媒體內容）的卡片區塊底部，也提供「卡片內文收合（全部顯示／3 行／5 行）」，一鍵解決同一排卡片因字數長短不一造成的長短腳問題。

標題配件：前導小標、重點清單與小數據

為了讓表單保持清爽，進階配件收納在標題與內文欄位的右上角，點擊後才會展開：

• ＋前導小標（Eyebrow）：顯示在模組大標題正上方的小標籤，可挑選一個小圖示搭配短文字（如 ✦ 為什麼選擇我們、🔥 限時優惠）。
• ＋重點清單（Features）：在「頁面主視覺」「圖文並排」「標語呼籲」與各類卡片中，加入最多 8 條帶品牌色打勾圖示 ✓ 的條列重點。
• ＋小數據（Highlights）：在主視覺、圖文並排與標語呼籲中，並列最多 4 組醒目數據（例如 10+ 年實戰經驗、99% 客戶滿意度）。

版型與外觀：底色、對齊、欄數與卡片風格

在模組編輯面板向下捲動至「版型與外觀」區塊，可調整整個模組的視覺呈現（調整時中央預覽會即時同步）：

1. 模組底色（6 種表面色票，文字與按鈕自動維持清晰對比）

2. 標題位置、三裝置對齊與每行欄數

• 標題位置：多數模組支援將標題區塊放在「上方置頂」「左側欄」或「右側欄」（選左側或右側時，電腦版會呈現左文右內容的雜誌感排版）。
• 標題對齊（支援電腦／平板／流動裝置分別設定）：當標題在上方時，可點選欄位旁的裝置圖示，分別決定電腦、平板與流動裝置版要置中或靠左對齊（點選裝置圖示時，中央預覽會自動切換至該裝置視角）。
• 每行顯示數量（支援三裝置分別設定）：在卡片畫廊、圖片畫廊、關鍵指標、音訊與影片模組中，可分別指定電腦（1～6 欄）、平板與流動裝置的並排欄數。
• 模組上下間距：預設「跟隨全站」，也可單獨覆寫為「緊湊」「標準」或「寬敞」。

3. 卡片排列、4 種卡片風格與圖片比例

在卡片與商品列表模組中，您可以自由組合網格與卡片外觀：

• 網格排列：等寬網格（預設）、首卡放大（第一張重點卡片跨 2 欄放大，呈現現代 Bento 風格）、橫列清單（單欄左圖右文橫條排列）。
• 4 種卡片風格：
  • 立體陰影：經典浮起白卡（圖文小卡預設）。
  • 細框：乾淨結構邊框（文字小卡、關鍵指標預設）。
  • 微底色：無邊框、無陰影的柔和色塊底。
  • 極簡無框：透明無框無底色、圖片維持圓角，適合作品集、服飾商品與雜誌風排版。
• 圖片比例與媒體寬度：圖文並排、圖片畫廊與商品模組支援切換 原始比例（不裁切）、16:9、4:3、1:1（正方形）或 3:4（直式人像／服飾）；單一影片、PDF 或大圖則可切換顯示寬度（緊湊／標準／寬幅）。

4. 卡片內容槽位全面互通

在「圖文小卡畫廊」「文字小卡畫廊」與「圖文小卡輪播」中，每張卡片都可以自由選配：

• 視覺：上傳照片（支援調整取景焦點與開啟「點擊圖片放大」燈箱），或改選一個品牌色圖示（Icon）。
• 右上角徽章：在卡片角落加上短標籤（如 熱門、Step 1、NEW）。
• 標題、內文與打勾重點清單。
• 單卡獨立按鈕：每張卡片底部可各自綁定一顆自訂按鈕（同行卡片的按鈕會自動切齊底線）。

模組按鈕（最多 3 顆 × 3 種樣式）與就地新增

在模組表單底部的「加入自訂按鈕」區塊，每個模組最多可放 3 顆行動按鈕：

1. 挑選或就地新增按鈕：從下拉選單勾選全站共用按鈕，或直接點選標題列右側的 ＋新增按鈕 就地建立一顆新按鈕（自動同步回全站品牌設定，不必跳出目前面板）。
2. 切換 3 種按鈕樣式（展開已選按鈕卡片即可為該模組單獨指定）：
   • 品牌主色（實心）：最醒目的主要行動按鈕（如「立即預約」）。
   • 預設（中性邊框）：適合排在主按鈕旁邊的第二行動（如「查看計劃」）。
   • 文字箭頭（→）：無背景無邊框、自帶平移箭頭的輕量連結，適合放在卡片或段落底部。
3. 按鈕位置與底部備註：當已選按鈕時，可選擇將按鈕放在「標題區下方」或「模組內容底部」，並可點 ＋底部備註 在按鈕正下方加上一行小字說明（例如「免綁約，隨時可取消」）。

全站共用模組與頁內 #錨點 設定

在多數模組表單的最底部（「全站共用與進階設定」區塊）提供兩個實用功能：

• 設為全站共用模組：開啟後，若您將這個模組複製或引用到其他頁面，只要在一頁修改內容，所有使用該共用模組的頁面都會同步更新（適合放全站統一的客戶見證、常見問題或底部行動呼籲）。
• 區塊錨點 ID（供頁內滑動跳轉）：填入簡短的英文小寫與連字符（例如 pricing 或 faq）。設定完成後，您就能在或自訂按鈕選擇該頁面時，直接從下拉選單綁定 #pricing，讓訪客點擊後平滑捲動到這個區塊！

相關文件