页面创建与积木模块 (Blocks) 搭建指南

在外贸独立站的运营中，除了标准化的产品详情页，企业往往需要根据不同的海外营销需求，快速制作各种专属页面——例如工厂综合实力介绍页 (About Us)、OEM 来图定制解决方案页 (Custom Manufacturing)、行业应用落地页 (Applications) 或是海外展会专题页。

传统的网站往往把页面内容写死在模板里，若要调整版块顺序或增加一个案例，必须联系程序员改代码。而在 SymbolFlow Appsuite 中，每个页面都可以通过灵活的**“页面积木” (Blocks)** 自由拼装！

本篇将系统讲解如何新建页面，以及如何运用后台内置的 15 种专业 Blocks 积木 搭建出媲美世界 500 强的工业营销页面。

1. 页面创建的基础流程

在 Payload CMS 中，所有通用页面都在 「页面」 (Pages) 集合中统一管理：

操作步骤：

登录 Payload CMS 管理后台；
在左侧功能菜单中，点击 集合 (Collections) 分组下的 「页面」 (Pages)；
点击右上角的 「新建页面」 (Create New) 按钮；
页面顶部输入 页面标题 (Title)：例如输入 Custom Rubber Molding Solutions（来图定制橡胶解决方案）。该标题支持多语言，切换语种后可分别录入；
在右侧边栏设置 网址别名 (Slug)：例如填写 custom-manufacturing（前台访问路径即为 /custom-manufacturing 或 /zh/custom-manufacturing）。

2. 页面四大功能标签页详解

在页面编辑区中央，提供了 4 个结构清晰的配置标签页：

标签页名称	英文标示	核心作用与配置重点
顶部首屏	Hero	决定买家打开网页第一眼看到的视觉冲击力。支持 3 种版式： • `High Impact`：大气全宽背景大图，适合首页或震撼的工厂鸟瞰图； • `Medium Impact`：经典的左右图文分栏排版，适合产品解决方案； • `Low Impact`：简洁文字大标题，适合文档或关于我们。
内容积木区	Content	页面的主体内容承载区，通过 `layout`（布局）字段自由添加、排序各种功能积木。
搜索引擎优化	SEO	配置该页面专属的 Meta Title、Meta Description、社交分享卡片图 (Meta Image) 及结构化数据。
顶部横幅公告	Top Banner	（可选）若希望该页面顶部出现专属的展会提醒或促销通知，可在此单独覆盖全局公告。

[!IMPORTANT] 多语言排版独立性原则 (Localized Layout)：页面的 layout 字段是语言相关的。当您在英文（en）环境下精心排布好 6 个积木模块后，切换到中文（zh）时，模块不会自动复制过去。您需要在中文环境下同样添加或翻译对应的积木。这种设计允许您针对欧美客户展示环保合规认证，而针对东南亚客户突出高性价比现货，赋予企业因地制宜的全球营销能力。

3. 核心 15 种页面积木 (Blocks) 深度解析

在 Content 标签页中，点击 「Add Block」 按钮，您可以自由选用系统内置的 15 种工业级专业积木：

1. 多列图文内容块 (Content Block)

标识代码：content
定位：页面的“全能工作马”，最常用的核心图文排版组件。
核心功能：支持将一行划分为单列 (Full)、双列 (1/2)、三列 (1/3) 或非对称双列 (2/3 + 1/3)；每一列均支持嵌入精美的 Lucide 矢量图标、富文本说明文字及行动按钮。

2. 特性与优势矩阵 (Feature Grid)

标识代码：featureGrid
定位：展示工厂的“硬核实力”，如制造精度、质检设备、材料专利。
核心功能：以卡片网格形式排布，每张卡片可选择不同尺寸、Material 工业图标、并支持开启 渐变高亮 (useGradient)，让核心优势瞬间抓住海外工程师眼球。

3. 行动号召横幅 (Call To Action / CTA)

标识代码：cta
定位：促成买家转化的关键收口版块。
核心功能：醒目的主副标题配合醒目的操作按钮组。常用于页面中段或底部，例如引导买家：“Need custom OEM shock absorbers? Contact our engineering team for instant 3D CAD support.”

4. 高清媒体大图块 (Media Block)

标识代码：mediaBlock
定位：展示大型生产设备、现代化无尘车间或产品 3D 爆炸图。
核心功能：关联媒体库资产，支持添加图片底端说明文字 (Caption)，并支持控制是否全宽铺满页面。

5. 内容与博客归档块 (Archive Block)

标识代码：archive
定位：将最新的行业技术博客或成功案例动态展示在当前页面中。
核心功能：支持 按分类自动拉取 (Collection) 或 手动勾选特定文章 (Selection)，自动生成图文卡片流。

6. 产品目录内嵌块 (Offerings Catalog Block)

标识代码：offeringsCatalog
定位：将特定品类的产品直接“搬”到当前的营销页面中。
核心功能：买家无需跳转到专用的商城目录，在解决方案页面内部即可直接浏览、按分类筛选对应的减震器或零配件。

7. 动态商业表单块 (Form Block)

标识代码：formBlock
定位：收集海外潜在客户的商业询价与定制需求。
核心功能：直接挂载在后台“表单管理”中预先配置的表单（如《来图加工技术评估表》），字段自动校验并沉淀到后台。

8. 客户评价与背书 (Testimonials)

标识代码：testimonials
定位：利用买家真实好评打消海外新客户的顾虑。
核心功能：支持网格 (Grid)、轮播 (Slider) 或高亮大卡片 (Featured)；展示客户评语、采购商姓名、职位、公司名称及真实头像照片。

9. 合作伙伴与认证徽标云 (Logo Cloud)

标识代码：logoCloud
定位：建立信任度最高效的视觉区块。
核心功能：展示合作品牌、全球工程配套客户或权威资质认证（如 ISO9001、CE、RoHS、FDA、IATF 16949）的 Logo 阵列。

10. 阶梯定价与方案对比 (Pricing)

标识代码：pricing
定位：展示开模费方案、标准打样包或阶梯采购价格。
核心功能：并排对比不同套餐，支持打上 “Most Popular（最受欢迎）” 徽标，并在卡片内罗列包含的服务项清单 (Features List)。

11. 常见问题折叠问答 (FAQ)

标识代码：faq
定位：解答海外买家在下单前的常见疑虑，极大节省外贸业务员的重复解释时间。
核心功能：买家点击问题标题即可展开查看详细解答。这种格式天然契合 Google FAQ 结构化数据，极易被收录为搜索直达答案。

12. 自定义参数表格 (Table Block)

标识代码：tableBlock
定位：在文章或介绍页中插入清晰的结构化参数表。
核心功能：展示不同橡胶材质的耐温范围、邵氏硬度等级、拉伸强度对比等专业技术参数。

13. 企业里程碑与时序流程 (Timeline)

标识代码：timeline
定位：展示工厂发展历史，或展示标准外贸服务流程。
核心功能：按时间轴节点串联，例如展示从“客户图纸输入 -> 模流分析 -> 快速打样 -> 批量生产 -> 包装发运”的完整闭环。

14. 工程流程与架构图 (Mermaid)

标识代码：mermaid
定位：技术流极客展示。
核心功能：通过直观的 Mermaid 纯文本语法，直接在前台渲染出高清的质检流程图、工序逻辑图。

15. 矢量图形块 (Svg)

标识代码：svg
定位：需要嵌入高保真工业矢量示意图时使用。
核心功能：直接输入 SVG 源码或上传文件，缩放不失真。

4. 经典高转化页面搭建实战组合推荐

掌握了 15 种积木后，您可以像搭积木一样，根据页面目的进行组合：

推荐组合：【工厂实力与定制能力页 (OEM/ODM)】

Hero (首屏)：High Impact，全宽展示现代化全自动硫化车间视频或高清大图，主标“Precision Rubber Molding for Global OEMs”；
Logo Cloud：展示 ISO9001 / IATF16949 / CE 认证机构徽标；
Feature Grid：展示 4 大核心优势（自有模具车间、德国精度检测仪、24小时快速打样、无忧售后）；
Timeline：展示《从 CAD 图纸到量产交货的 5 步流程》；
Media Block：嵌入带尺寸说明的减震器剖面图；
FAQ：解答 MOQ（起订量）、模具开发周期（通常 7~10 天）等疑问；
Call To Action (CTA)：底部呼应按钮“Request a Free DFM Analysis & Instant Quote”。

在右侧 实时预览 (Live Preview) 中实时微调每一个文案与间距，确认无误后点击右上角 「发布」 (Publish)，一个顶级的出海营销页面即刻大功告成！