写在前面：外贸官网最难的一件事，是让陌生人相信你存在
做工厂型外贸的人都懂这个困境：客户在地球另一边，看不到你的车间、你的产线、你的质检台。他眼前只有几个网页。
他要判断的是三个问题：你到底是不是自己生产？你的产能和质量撑不撑得住我的单？我凭什么把订单给一个从没见过的人？
参数表能回答第二个问题，回答不了另外两个。回答它们的，是工厂照片、团队面孔、证书墙。
XSMade 就是围绕这件事做的。它的首页在讲完产品之后，紧接着就是三块内容——工厂照片、团队照片、认证和荣誉。
一、XSMade 的定位
| 项目 | 说明 |
|---|---|
| 主题标识 | xs-made-master（经典 PHP 模板体系，非区块主题） |
| 目标场景 | 生产型工厂、OEM/ODM 代工厂、有自有车间与团队的制造企业 |
| 核心内容模型 | product（产品）+ download（下载）两套自定义文章类型 |
| 分类法 | product_category / download_category |
| 电商依赖 | 不依赖 WooCommerce，纯展示 + 询盘转化 |
| 构建器依赖 | 不依赖任何页面构建器，原生 Gutenberg 可用 |
| 表单 | WPForms，全站询盘入口复用同一套表单 |
一句话概括：如果你最大的竞争力是”我自己能造”，选它。
二、头部：黑底全宽导航，稳
XSMade 也是双行头部，但气质和 XSPro 完全不同。
- 上行：左侧 Logo，右侧搜索框 +
Send Inquiry按钮 + 多语言切换 + 移动端汉堡。 - 下行：黑底全宽主导航条。
这个黑底导航条是 XSMade 的视觉锚点。相比 XSLab 的轻量单行、XSPro 的白底导航，黑底全宽给人的感觉是厚重、稳定、有规模感——这恰好是采购方对供应商的心理预期。
Send Inquiry 放在上行右侧，与 Logo 同高，是整站最显眼的转化入口；搜索框则退到它左边，作为辅助。
三、首页：产品分组陈列 + 三段实力证明
1. Hero 幻灯片
首屏轮播，带分页器与左右导航。
2. 产品中心（按分类分组陈列）
XSMade 的首页产品区不走 Tab，也不走左侧树，而是按分类一段一段往下铺：分类标题（可点击跳转）→ 该分类下的产品卡片。
而且每个分类段的版式可以不同——演示站里三种分类分别用了卡片上图下文和图文左右两种布局交替，视觉上不单调。
更关键的是：每张产品卡片上直接带 Send Inquiry 按钮。 访客不用点进详情页，在首页/列表页就能发起询盘——把转化路径从”三次点击”压缩到”一次点击”。
部分版式还会同时给出 Learn More + Send Inquiry 双按钮，让”想细看”和”想直接问”的人各走各的路。
3. 关于我们（图文 + 视频弹窗）
左侧多媒体默认展示图片，点击播放弹出视频层，支持 YouTube / Vimeo / 直链。工厂宣传片往这里放。
4. 工厂照片（Manufacturing）
图片区块，展示车间、产线、设备。
5. 团队照片（Our Team）
图片区块，展示团队面貌。
6. 认证和荣誉（Certifications & Awards）
图片区块，展示证书与资质。
这三块连在一起，构成一条完整的信任链：我厂在这 → 我人在哪 → 我的资质是什么。
对从未谋面的海外买家，这比任何形容词都有效。
7. 新闻中心
最新文章列表 + View More News。
8. 底部 CTA
左文案、右表单（WPForms）。
四、两套内容模型：产品 + 下载
产品（Product）
product+product_category，支持多级分类- 分类归档页：Hero + 分类描述 + 产品网格（每张卡片带 Send Inquiry）+ 侧边栏子分类筛选 + 分页
- 产品详情页结构完整：面包屑 → 左侧竖排缩略图画廊 + 主图 + 图片灯箱 → 右侧产品信息 + 卖点标签（如 5 Year warranty、World-wide support）+
Get Instant Quote/Contact Us双按钮 → 正文（About this product / 技术特性分节）→ 相关产品 → 底部 CTA
产品信息区的卖点标签是个小设计，但很实用：质保年限、全球服务、交期承诺这类”一句话信任点”，放在价格/规格旁边，比写在正文里有效得多。
下载（Download）
download+download_category- 归档页为表格化列表：File Name / Format / Upload Date / File Size / Download
对于要提供规格书、认证证书、检测报告的工厂，这个模块直接省掉一个文档管理插件。
五、询盘链路：能少点一次就少点一次
| 位置 | 转化入口 |
|---|---|
| 头部上行 | Send Inquiry 按钮（与 Logo 同高，最显眼） |
| 首页 / 分类页产品卡片 | 每张卡片自带 Send Inquiry（列表页直询，无需进详情页） |
| 产品详情页 | Get Instant Quote + Contact Us 双按钮 |
| 每一页底部 | 底部 CTA 区块（左文案 + 右表单） |
| 右下角悬浮工具栏 | WhatsApp（气泡显示号码）、邮箱、询盘弹窗、返回顶部 |
XSMade 在转化上比另外两款更激进：别人要进详情页才能询盘，它在列表页就开口。
这很适合工厂型业务——采购方往往是在批量浏览产品线，看到某个感兴趣的就想问价，让他多点一层，就多一层流失。
所有入口依然调起同一个 Quote 弹窗、同一份 WPForms 表单，后台只维护一份。
六、内页模板矩阵
| 模板 | 结构要点 |
|---|---|
| 首页 | Hero / 分组产品区 / 关于我们 / 工厂 / 团队 / 认证 / 新闻 / 底部 CTA |
| 产品分类归档 | Hero + 分类描述 + 产品网格（卡片带询盘）+ 侧边栏筛选 + 分页 |
| 产品详情 | 画廊 / 卖点标签 / 正文 / 相关产品 |
| 下载列表 | 表格式文件列表 + 侧边栏 |
| 通用内页 | Hero + 正文 + 侧边栏 |
| 关于我们 / 工厂实拍 | Hero + 正文 + 侧边栏 |
| 联系我们 | 多组联系方式卡片（销售热线 / 海外服务 / 总部地址） |
| FAQ / 合规页 | 问答列表 / 隐私 · 条款 · Cookie |
| 排版验收页 | Page Style Guide |
侧边栏小工具：About Us 菜单、Product Categories、Latest Articles、Get in touch。
演示站里那页 Page Style Guide 别忽略——主题把 H2–H6 层级、有序/无序列表、引用块、代码块、原生表格、图片与图注、左右浮动环绕、iframe 16:9 自适应，以及 Gutenberg 的 Pullquote、Verse、Cover、Media & Text、Buttons、Audio、File、Gallery、Table、Video 等块都做了样式覆盖。
你在古腾堡里正常写内容，出来就是设计稿的样子，不用额外调 CSS。对需要长期自己更新内容的工厂客户，这一条很关键。
七、技术底子
| 层面 | 实现 |
|---|---|
| 样式 | Tailwind CSS 编译产物，原子类直接写在模板里，二次开发不用翻 CSS |
| 脚本 | 单文件打包，内含 Swiper 轮播、灯箱、Tab、弹窗、懒加载、IntersectionObserver，无 CDN 外链 |
| 图标 | Iconify 按需渲染，非整包图标字体 |
| 模板 | 经典 PHP + get_template_part() 分块，开发者接手成本低 |
| 多语言 | 集成 GTranslate，顶部语言切换 + 移动端同步 |
| 无障碍 | Skip to content（WCAG 2.1 SC 2.4.1）、关键控件 aria-label、移动端抽屉 + 遮罩 |
| SEO | 全站面包屑、语义化标题层级、产品/下载独立归档与分类法、原生站点地图 |
没有页面构建器依赖。 模板固定结构，客户在后台填内容，不会因为换人运营把版式改乱——对人员流动快的外贸团队尤其重要。
八、适合谁，不适合谁
适合
- 有自有车间、产线的生产型工厂
- 以 OEM / ODM 为主、需要展示产能与资质的代工厂
- 客户高度关注”是不是真工厂”的外贸 B2B 业务
- 产品线按大类分组、适合分段陈列的制造企业
不适合
- 需要讲复杂系统方案的集成商（XSPro 更合适）
- 需要在线交易的零售电商
- 纯贸易商、无自有工厂（这个主题的主打模块你会用不上）
九、上手建议
- 先把三块实力区填满。 工厂照片、团队照片、认证和荣誉——这是 XSMade 的核心价值，别留空。拍得糙一点没关系，真实比精致重要。
- 产品分类按大类分组。 首页是按分类分段陈列的，建议首页放 3 个主分类，每个分类 4–8 个产品，别贪多。
- 用足卡片上的 Send Inquiry。 这是它比另两款转化路径更短的地方，别在后台把它关掉。
- 填好产品卖点标签。 质保年限、全球服务、交期承诺，用短语，别写句子。
- 下载中心放资质文件。 检测报告、体系认证、规格书，按
download类型录入，归档页自动生成表格。 - 对照 Page Style Guide 验收。 客户自己更新内容前先让他看一遍，能省掉大量排版返工。
十、三款主题怎么选
| XSLab | XSPro | XSMade | |
|---|---|---|---|
| 核心驱动 | 技术资料 / 下载 | 方案案例 | 制造实力 |
| 内容模型 | product + download | product + solution + download | product + download |
| 首页主模块 | 产品 Tab / Why Us / 客户评价 | 分类树产品 / 方案中心 | 分类分组产品 / 工厂·团队·认证 |
| 头部形态 | 单行 sticky + Send Inquiry | 双行：联系 + 搜索在上，Logo + 导航在下 | 双行：Logo + CTA 在上，黑底全宽导航在下 |
| 询盘特点 | 详情页 + 底部 CTA | 详情页 + Consult an Expert | 列表页卡片即可询盘 |
| 最合适 | 技术型设备商、资料多的企业 | 系统集成商、方案商 | 工厂型、OEM/ODM 企业 |
三款共用同一套设计体系与技术底座（Tailwind + Swiper + Iconify + WPForms + GTranslate + 全站询盘链路），差异只在内容组织方式——先想清楚：客户是被你的资料说服、被你的方案说服，还是被你的工厂说服。
结语
很多工厂把官网做成了一本电子画册：产品图堆一堆，公司简介写两段，然后纳闷为什么询盘少。
问题在于，海外客户看的不是你的产品图有多精美，而是你这家企业是否可信。 XSMade 做的事很朴素——把工厂、团队、证书这三样最能证明”我真的存在”的东西，放到访客一定会经过的位置上。
如果你的客户最常问的是”你们是自己生产的吗””能验厂吗”，那 XSMade 是三款里最对的那一个。
👉 演示站：https://xsmade.inwptheme.com/
注：演示站中的品牌文案与图片（含 Victron Energy、SANY 等公开资料）仅用于演示主题的内容结构与排版能力，不随主题授权，实际交付时替换为客户的真实内容。
