模块排版、卡片与外观

概述

模块是组成网页的独立内容区块（就像乐高积木）。封面主视觉、图文并排、卡片画廊、常见问题、关键指标与 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，让访客点击后平滑滚动到这个区块！

相关文件