🔍 背景：当图片和文字需要一起讲清一个项目
介绍设计项目、品牌故事或一件新产品时，图片与文字往往需要互相配合。先展示一张大图，再放很长的说明，读者读到后面可能已经忘记画面中的细节；如果把说明直接写进图片，小屏幕上又不容易阅读，也不方便后续更新。
分屏设计提供了另一种组织方式：让画面与解释并置，再按章节逐步推进。它适合有明确叙述顺序的内容，但也要求每一屏有清楚的重点，而不是把普通长文生硬拆成很多动画场景。
- 图文关系明确：每张画面都能找到对应的说明。
- 介绍顺序连贯：从背景、过程到结果，逐步解释项目。
- 视觉变化有节制：滚动效果帮助区分章节，不影响信息阅读。
- 详细内容有出口：完整案例、文章或联系信息仍然容易到达。
🚀 主题简介
Split是Themify以分屏滚动为特色的主题，可以在连续版块中组合图片、视频与文字，并通过两侧内容的视觉关系组织展示。它也提供常规文章和作品布局，适合将视觉首页与独立详情页面结合使用。
Split主题适用于需要让图文共同表达的项目。作为分屏叙事主题，可以按阶段介绍创作过程；作为创意项目展示主题，则能把作品画面、设计思路和具体说明放在相互对应的位置，避免视觉与内容分离。
如果用于品牌故事网站主题项目，建议先确定几个真正值得讲述的章节，例如起点、材料、制作和使用场景，再选择画面。分屏的价值是让读者理解每一阶段，而不是仅仅觉得页面有特殊效果。
核心特性：
- 分屏滚动效果：随版块切换形成两侧内容的视觉变化。
- 独立列样式：分别调整各列背景、文字、间距与覆盖效果。
- 多媒体内容组合：结合图片、滑块、视频和文字介绍项目。
- 图文详情布局：可使用半页图文或全宽特色图等展示方式。
- 作品分类浏览：配合可选作品内容类型及类别筛选整理项目。
- 页眉页脚与列表选项：根据页面用途安排导航、瀑布流和加载方式。
🔧 核心功能亮点
↔️ 分屏滚动叙事（让章节切换对应内容变化）
- 功能：Split以分屏滚动方式呈现连续版块，可以让图像与说明在两侧形成对应关系。制作时应先规划每个版块的内容任务，再安排切换效果，避免一屏文字过多、另一屏只有装饰图，导致两边信息失去平衡。
- 场景：一个产品项目可以按需求、草图、材料和成品逐步展开；品牌故事可以按不同阶段组织。用户每次向下浏览，都能获得一个相对完整的信息点，而不是只看到背景在变化。
- 价值：页面有更明确的叙述节奏，复杂项目可以拆成容易理解的部分。效果帮助强调章节，但内容仍然需要具体，只有画面和说明真正相关，分屏才比普通排列更有意义。
🎨 独立列样式（用对比建立关系，而不是制造干扰）
- 功能：通过Builder列样式，可以分别设置背景、字体、间距和覆盖等表现，让两侧既有区别又保持统一。图片列适合突出素材，文字列应保证清晰对比，并给标题和段落留下足够空间。
- 场景：设计工作室介绍一套视觉系统时，可以一侧展示应用画面，另一侧说明设计目的；介绍材质时，也可以用细节图搭配简短说明。两侧内容承担不同任务，但共同回答同一个问题。
- 价值：不必把文字压在复杂背景上，也能保持强烈的视觉表现。列样式统一后，后续章节可以沿用清楚的规则，减少每一屏都重新设计造成的风格混乱。
🎬 多媒体版块（按照信息需要选择照片或视频）
- 功能：展示区域可以结合图片、滑块和视频等素材，让静态细节与动态过程分别得到表达。视频应有合适的静态替代画面，文字也需要独立说明重点，不能让关键信息只存在于自动播放的内容中。
- 场景：餐饮品牌可以用照片展示菜品细节，用短片介绍制作过程；产品展示可以用静态图解释结构，用动态画面说明使用方法。媒体形式根据问题选择，不必每个章节都使用相同效果。
- 价值：信息表达更贴近实际对象，也让读者在不同设备和网络条件下仍能理解内容。控制媒体数量与文件体积，可以保留展示力，同时减少等待和无法播放带来的断层。
📖 图文详情布局（让代表画面陪伴完整说明）
- 功能：文章可采用半页图文布局，保留一侧代表图、另一侧阅读内容，也可以使用全宽特色图等方式。长文、较复杂案例和图片比例不同的项目，应选择适合自己的布局，而不是全部套用最有动感的一种。
- 场景：设计案例需要说明任务、过程和交付内容时，代表画面可以帮助保持项目印象；对于图片较多的摄影系列，则可以使用更适合连续图文的方式，给每张作品和说明留出位置。
- 价值：视觉入口与深入阅读形成联系。首页负责吸引和概览，详情页负责回答具体问题，用户可以根据需要继续阅读，不必把所有说明都压缩在有限的分屏场景里。
🗂️ 作品分类与筛选（让多个项目不再只有时间顺序）
- 功能：配合可选Portfolio内容类型，可以维护作品，并通过类别筛选帮助访客选择方向。分类应以项目类型或服务范围为依据，名称保持稳定，避免同一项目为了多次出现而加入过多相近类别。
- 场景：工作室同时提供品牌、网页和摄影服务时，潜在客户可以先看与自己需求相关的案例。每个案例再清楚标注承担的工作，帮助对方判断团队的经验，而不是只欣赏封面画面。
- 价值：作品集更有可查找性，业务增长后也容易继续维护。分类不仅方便浏览，还能帮助编辑检查不同服务方向是否有足够案例，避免首页介绍很多能力，却没有相应内容支持。
🧭 导航与常规内容浏览（让特殊展示接回正常阅读）
- 功能：主题提供页眉、页脚可见性设置，以及瀑布流和连续加载等列表选项。分屏页面可以减少多余元素，但仍应保留清楚的返回、作品和联系路径；常规博客则可以使用更适合持续阅读的结构。
- 场景：品牌首页以视觉叙事为主，访客看完后可能想查具体服务或联系方式。设计时不能只检查滚动是否漂亮，还要实际走一遍从首页到案例、再到联系页面的路线，确认每一步都容易理解。
- 价值：特殊效果不会把用户困在展示中。页面可以有鲜明风格，同时保留网站基本的可用性，让希望深入了解的人能够顺利找到资料，而不是只能不断滚动到结尾。
📊 功能对比：普通图文堆叠与分章节的视觉介绍
| 展示环节 | 常见图文问题 | 使用Split时的规划方向 |
|---|---|---|
| 图文关系 | 图片与说明距离过远 | 两侧内容围绕同一信息点配合 |
| 章节推进 | 长页面缺少明确顺序 | 每屏设置一个主要问题 |
| 视觉样式 | 每段颜色和版式都不同 | 用独立列设置建立统一规则 |
| 媒体内容 | 视频或图片只作装饰 | 按结构、细节和过程选择素材 |
| 项目详情 | 为适应效果删掉必要说明 | 独立详情页承接完整内容 |
| 后续路径 | 看完展示不知道去哪里 | 保留作品、服务和联系入口 |
🛍️ 适用场景（含应用示例）
| 应用场景 | 实际应用示例 |
|---|---|
| 🎨 创意工作室 | 图文并置介绍服务与案例，独立页面补充完整项目过程。 |
| 📦 产品展示网站 | 依次说明设计起点、结构、材质和使用方式。 |
| 🍽️ 餐饮品牌介绍 | 用菜品与空间画面配合品牌理念和经营信息。 |
| 👤 个人作品主页 | 按创作方向组织代表项目，再连接详细作品和个人介绍。 |
| 🏷️ 品牌故事专题 | 把起源、制作与应用场景拆成清楚章节，形成连贯阅读路线。 |
⚙️ 使用建议
- 先用文字写出章节：每屏只保留一个主要主题，说明这一屏希望读者理解什么，再选择与其真正相关的图片。
- 控制单屏文案长度：不要把完整介绍塞进有限空间。需要解释更多时，用独立详情页继续展开，并提供清楚的入口。
- 图文两侧保持关联：画面展示的对象应当与说明一致，避免文字讲材料、图片却只展示品牌标志。相关性比视觉对称更重要。
- 检查不同设备的顺序：手机和平板上的分屏呈现可能与桌面不同，逐屏检查内容排列、图片裁切和文字长度，确保叙述仍然连贯。
- SEO信息写出实际项目：标题和描述说明项目类型与核心内容，正文自然解释服务、过程和作品。不要让关键文字只出现在图片或视频中。
- 把联系路径走完整：从首页进入案例，再找到联系方式，确认没有被隐藏菜单或特殊滚动阻断。可视效果完成后，再做一次纯阅读检查。
💡 最佳实践：
- 先完成三到五个内容扎实的章节，再考虑是否增加更多场景。
- 为视频准备静态画面，为长说明准备详情页，让展示在不同条件下仍然完整。
- 将同类项目使用的标题、图片和说明格式统一，便于后续作品持续增加。
❓ 常见问题（FAQ）
Q1：Split只能制作带分屏效果的页面吗？
A：不是。它也提供常规文章和作品布局，可以将视觉首页与普通详情、博客页面结合使用。
Q2：手机上会与桌面保持完全相同的分屏动画吗？
A：不应这样理解。不同设备会采用相应的响应式呈现，应实际检查手机和平板上的内容顺序与操作，而不是要求动画完全一致。
Q3：长篇介绍适合全部放进分屏里吗？
A：通常需要取舍。分屏适合清楚的章节概览，详细背景、过程和资料可以放到独立页面，避免单屏文字过长。
Q4：可以增加商品销售吗？
A：可以配合WooCommerce规划商店，但商品、支付和配送需要另行配置。视觉产品介绍与实际交易流程应分别检查。
🧠 总结
Split通过分屏滚动、独立列样式和多媒体布局，让图片与文字围绕同一项目共同叙述。它适合内容有明确阶段、视觉素材充足的品牌和创意网站。把章节写清楚、把详细资料安排好，再让效果服务内容，才能形成既有风格又容易理解的展示体验。
🎯 如果项目需要边看画面、边理解过程，Split可以提供鲜明的分屏表达方式，让视觉展示与实际说明保持联系。
