写在前面：有一类生意，客户先问的不是”多少钱”
B2B 里有这么一类企业：客户开口第一句不是”这个报价多少”，而是“我这个场景能不能用”。
离网小屋、房车改装、牧场供电、工厂储能、商业备电……客户带着一个具体场景来，要的是一套能跑起来的系统。这时候如果你的官网只有产品列表，等于把最赚钱的那部分价值——方案设计能力——藏起来了。
XSPro 就是为这类方案型企业做的。它是 XSLab / XSPro / XSMade 三款主题中，唯一内置方案（Solution）内容模型的一款。
一、XSPro 的定位
| 项目 | 说明 |
|---|---|
| 主题标识 | xs-pro-master（经典 PHP 模板体系，非区块主题） |
| 目标场景 | 系统集成商、方案商、工程公司、能提供行业解决方案的设备制造商 |
| 核心内容模型 | product（产品）+ solution（方案） + download（下载）三套自定义文章类型 |
| 分类法 | product_category / solution_category / download_category |
| 电商依赖 | 不依赖 WooCommerce，纯展示 + 询盘转化 |
| 构建器依赖 | 不依赖任何页面构建器，原生 Gutenberg 可用 |
| 表单 | WPForms，全站询盘入口复用同一套表单 |
一句话概括：如果你的销售话术里高频出现”方案””案例””应用场景”，选它。
二、头部：把”联系方式”和”搜索”顶到最上面
XSPro 的头部是双行结构，这个安排有讲究。
- 上行：左侧 WhatsApp + 企业邮箱，右侧全站搜索框 + 多语言切换 + 移动端汉堡。
- 下行：左侧 Logo，右侧主导航。
对比一下另外两款——XSLab 是单行 sticky + Send Inquiry 按钮，XSMade 是上行放 Logo + CTA。XSPro 把联系方式和搜索框放在了整站最顶部，逻辑是：
方案型客户往往是”带着问题来的”。他可能记得去年看过一个牧场供电的案例，但记不住在哪个菜单下——给他搜索框，比给他一个 CTA 按钮更有用。
搜索框还配了移动端全屏搜索面板，小屏上点图标即展开，不占导航空间。
三、首页：产品中心用分类树，方案中心讲场景
1. Hero 幻灯片
首屏轮播，带分页器与左右导航。
2. 产品中心（左侧分类树 + 右侧产品列表）
这是 XSPro 与其他两款最直观的区别。它不用 Tab，而是左侧固定一列两级分类树（Charge & Convert → Autotransformers / Chargers / DC-DC Converters / EV Charging / Inverter-Chargers / Inverters / Isolation transformers……），右侧同步展示产品列表。
对产品线深、类目多的企业，这种”目录式”浏览比 Tab 更能承载层级——访客一眼能看到你有多少条产品线，也一眼能找到自己要的那一条。
3. 方案中心（XSPro 的灵魂）
首页中段独立区块，卡片式展示方案案例，底部带 Explore All Solutions 与 Consult an Expert 双出口。
演示站里的 8 个方案长这样：Backup and Off-grid、Brewing from nature、Dairy over the moon with solar power、Chicken farmer in Turkey gets Goose bumps、Solar powered miles in Cybertruck and camper、Four Season RV with Solar Power、Victron ESS for commercial applications、Residential energy storage with Victron ESS。
4. 关于我们（图文 + 视频弹窗）
左侧多媒体默认展示图片，点击播放弹出视频层，支持 YouTube / Vimeo / 直链。区块内直接挂出 About Us、Our Team、Manufacturing Facility、Certifications & Awards 四个入口。
5. 新闻中心
最新文章列表 + View More News。
6. 底部 CTA
左文案、右表单（WPForms）。
四、三套内容模型：产品 / 方案 / 下载
方案（Solution）—— XSPro 独有
这是 XSPro 的核心资产，也是它区别于通用 B2B 主题的地方。
- 独立
solution内容类型 +solution_category分类法 - 方案归档页：左侧方案列表，右侧侧边栏（含方案分类、产品中心、最新文章、Get in touch）
- 方案详情页：面包屑 → 标题 → 发布日期 → 正文卡片 → 右侧边栏 → 底部 CTA
演示站里一篇商业储能方案的结构是这样的：
Victron ESS: the energy to match your ambition
先讲痛点——”你想上更重的机器、电动货车、扩建厂房，但申请电网增容时发现前面排着几千家企业”；
再给答案——”用储能系统绕过排队，从现有容量里榨出更多功率、最大化自用光伏、削减电费、停电时保供”；
最后拆能力点——Scales with your needs（按需扩展）/ Lower costs, higher returns（降本增收）/ Intelligent energy management（智能调度）。
这个「场景 → 痛点 → 能力点」的三段式，就是方案页最有效的写法，XSPro 的模板天然适配它。
产品（Product）
product+product_category，支持多级分类- 分类归档页：Hero + 分类描述 + 产品网格 + 侧边栏子分类筛选（All / Inverter-Chargers / EV Charging / Chargers……）+ 分页
- 产品详情：面包屑 → 竖排缩略图画廊 + 主图 + 灯箱 → 产品信息 +
Get Instant Quote/Contact Us→ 正文 → 关联资料 → 相关产品 → 底部 CTA
下载（Download）
download+download_category- 归档页为表格化列表：File Name / Format / Upload Date / File Size / Download
XSPro 在导航里把 Blog 和 Downloads 收在同一个 Resources 菜单下——对方案型站点来说，这是更合理的组织方式：产品和方案是”卖什么”，Resources 是”凭什么信你”。
五、询盘链路
| 位置 | 转化入口 |
|---|---|
| 头部上行 | WhatsApp 直连 + 企业邮箱（常驻顶部） |
| 方案中心区块 | Explore All Solutions + Consult an Expert |
| 方案详情页 | 底部 CTA 区块（左文案 + 右表单） |
| 产品详情页 | Get Instant Quote + Contact Us 双按钮 |
| 每一页底部 | 底部 CTA 区块 |
| 右下角悬浮工具栏 | WhatsApp（气泡显示号码）、邮箱、询盘弹窗、返回顶部 |
所有入口调起的是同一个 Quote 弹窗与同一份 WPForms 表单，后台只维护一份，数据不分散。
Consult an Expert 这个按钮值得单独提一句——对方案型业务，”我要报价”和”我要找人聊聊”是两种意图，XSPro 把后者单独做成了出口。
六、内页模板矩阵
| 模板 | 结构要点 |
|---|---|
| 首页 | Hero / 产品中心（分类树）/ 方案中心 / 关于我们 / 新闻 / 底部 CTA |
| 方案归档 | 方案列表 + 右侧边栏 |
| 方案详情 | 面包屑 → 标题 → 日期 → 正文卡片 → 侧边栏 → CTA |
| 产品分类归档 | Hero + 分类描述 + 产品网格 + 侧边栏筛选 + 分页 |
| 产品详情 | 画廊 / 信息 / 正文 / 资料 / 相关产品 |
| 下载列表 | 表格式文件列表 + 侧边栏 |
| 文章详情 | 面包屑、日期 + 作者、正文、标签、上下篇、作者卡片、相关产品 |
| 关于我们 / 工厂 / 团队 / 认证 | Hero + 正文 + 侧边栏 |
| 联系我们 | 多组联系方式卡片 |
| FAQ / 合规页 | 问答列表 / 隐私 · 条款 · Cookie |
侧边栏小工具按方案型站点配齐：About Us（含 Our Team / Manufacturing Facility / Certifications & Awards）、Product Center、Solutions、Latest Articles、Get in touch。
七、技术底子
| 层面 | 实现 |
|---|---|
| 样式 | 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 | 全站面包屑、语义化标题层级、内容类型独立归档与分类法 |
没有页面构建器依赖。方案页、产品页的结构由模板固定，客户在后台填内容即可，不会因为人手更替把版式改乱。
八、适合谁，不适合谁
适合
- 系统集成商、方案商、工程承包商
- 产品线深（多个大类、多级分类）的设备制造商
- 有大量行业应用案例可讲的储能 / 光伏 / 自动化 / 暖通 / 水处理企业
- 客户决策周期长、需要”案例佐证”的高客单价业务
不适合
- 只卖标准品、讲不出应用场景的纯贸易商（XSMade 更合适）
- 需要在线交易的零售电商
- 以内容流量为核心的博客 / 媒体站
九、上手建议
- 先写方案，再铺产品。 方案是 XSPro 的差异化资产，优先把 5–8 个真实案例按「场景 → 痛点 → 能力点」三段式写出来，首页方案中心就有了内容。
- 搭两级分类树。 首页产品中心左侧读的就是
product_category的父子结构，先把类目层级理清楚。 - 善用 Resources 菜单。 把 Blog 和 Downloads 收在一起，导航更干净。
- 配好搜索。 方案型客户经常靠搜索找东西，确保方案、产品标题里包含客户会搜的关键词（场景词、行业词）。
- Consult an Expert 别删。 它是方案型业务的高意向入口。
十、三款主题怎么选
| XSLab | XSPro | XSMade | |
|---|---|---|---|
| 核心驱动 | 技术资料 / 下载 | 方案案例 | 制造实力 |
| 内容模型 | product + download | product + solution + download | product + download |
| 首页主模块 | 产品 Tab / Why Us / 客户评价 | 分类树产品 / 方案中心 | 分类分组产品 / 工厂·团队·认证 |
| 头部形态 | 单行 sticky + Send Inquiry | 双行：联系 + 搜索在上，Logo + 导航在下 | 双行：Logo + CTA 在上，黑底全宽导航在下 |
| 最合适 | 技术型设备商、资料多的企业 | 系统集成商、方案商 | 工厂型、OEM/ODM 企业 |
三款共用同一套设计体系与技术底座（Tailwind + Swiper + Iconify + WPForms + GTranslate + 全站询盘链路），差异只在内容组织方式——你需要先想清楚：客户到底是被你的资料说服、被你的方案说服，还是被你的工厂说服。
结语
如果你的销售在客户现场最常画的不是产品图，而是一张系统拓扑图，那 XSPro 是三款里最对的那一个。
它把”方案”从博客文章升级成了一等公民内容类型——有独立归档、有分类、有详情页、能进导航、能上首页。这让你的行业 know-how 第一次在官网上有了正式的位置。
👉 演示站：https://xspro.inwptheme.com/
注：演示站中的品牌文案与图片（含 Victron Energy、SANY 等公开资料）仅用于演示主题的内容结构与排版能力，不随主题授权，实际交付时替换为客户的真实内容。
