什么是 Z形图文？它指的是网页内容以“左图右文”接着“左文右图”的交错形式呈现，视线轨迹刚好形成一个“Z”字。这种设计能极其有效地引导海外买家的视线，适合用于介绍核心优势 (Why Choose Us)、生产流程、或产品核心卖点。
在 SX-Creval 系统中，你只需要像填表一样依次录入图文，系统会自动为你完成极具美感的 Z 字形交错排版！
1. 三大高级 Z形版式 (Layout Styles)
根据你想要传达的视觉氛围，我们为你准备了 3 款不同风格的 Z形组件：
款式一：Z形图文 - 标准 (Standard Z-Layout)
- 视觉特点：最纯粹、最经典的交错排版。图片与文字完美对齐，没有多余的背景干扰，直接融入当前网页的底色中。
- 适用场景：适合穿插在产品详情页中，用于逐一拆解产品的各个功能亮点。清晰、严谨、商务感十足。
款式二：Z形图文 - 淡入 (Fade-in Z-Layout)
- 视觉特点：在标准版的基础上，增加了**“全局背景控制”**。你可以为这组图文垫上一层专属的颜色或光斑背景。随着访客向下滚动，图片和文字会伴随着优雅的淡入动效出现。
- 排版细节：此款式提供了极其精细的文本排版引擎。你可以为每一个模块的“顶部小标签 (Badge)”添加极具科技感的微小装饰符号（如：三圆点、双轨线），并自由微调标题和描述的字号与间距。
款式三：Z形图文 - 叠加 (Overlay Z-Layout)
- 视觉特点：最具现代感与苹果官网风的设计！ 文字不再是干巴巴地放在图片旁边，而是作为一个独立的“浮动卡片”，部分**叠加（Overlay）**在图片之上。这种打破边界的设计，能制造出极强的三维空间立体感。
- 专属高级功能 - 卡片颜色反转：
如果你上传了一组深色调的精美工厂照片，请务必开启【卡片颜色反转】功能！文字卡片会瞬间化身为深色毛玻璃质感，与深色图片完美融合，展现出无与伦比的高端质感。 - 适用场景：强烈推荐用于首页的“公司核心优势 (Why Partner With Us?)”版块。
2. 自动化交错与内容录入 (Content Setup)
使用 Z形模块最爽的地方在于——你不需要手动去设置“这张图在左边，下一张在右边”。
- 傻瓜式添加：在【内容列表】中，你只需要点击“添加内容”，然后依次上传图片、填写标题和描述即可。
- 智能排版算法：系统会在前台自动将你添加的第 1 个内容设为“左图右文”，第 2 个设为“右图左文”，第 3 个再回到“左图右文”……完美实现 Z 字交错。(注：在手机端，系统会自动将所有内容转化为“上图下文”的单列模式，保证最佳的移动端阅读体验。)
- 经典三段式文案：支持填写 顶部小标签 (Badge)、主标题 和 多行描述，层次分明，让外贸采购商能一秒抓住核心重点。
3. 图片与质感优化 (Image & Hover Effects)
为了让网页不仅“好看”而且“好玩”，你还可以对图片进行质感升级：
- 图片圆角 (Radius)：你可以统一控制所有图片的边缘。如果是机械设备类，推荐使用 直角 或 小圆角，彰显硬核工业风；如果是消费电子或服务类，推荐使用 大圆角 (rounded-2xl)，更具亲和力。
- 悬停特效 (Hover Effect)：当客户的鼠标移到图片上时，系统会自动触发预设的好莱坞级动效。
- 推荐使用 放大 (Zoom in)：鼠标移入时，图片在框内缓慢放大，拉近客户与你的距离。
- 如果是“叠加版”，悬停时不仅图片会动，叠加的文字卡片也会产生轻微的阴影浮动，交互体验极佳。
💡 SX-Creval 营销排版避坑指南 (Pro Tips)
- 奇数法则 (The Rule of 3)：
Z形排版最忌讳过长！如果添加太多，访客的脖子会像看网球比赛一样左右摇摆，导致视觉疲劳。强烈建议一个 Z形模块中只添加 3 个（最多不要超过 4 个）内容项。 比如总结你们的 3 大核心竞争力。 - 图片尺寸与比例保持一致：
为了保证 Z 字交错时的对齐美感，请确保你上传的这一组图片，在裁剪时的宽高比例尽量保持一致（例如全是 4:3 的横图，或全是 1:1 的方图）。如果一张长一张扁，排版就会显得杂乱无章。 - 文案“字数均衡”原则：
尽量保证每一个区块的【模块描述】字数相近（比如都在 3-4 行左右）。如果左边写了 500 个字，右边只写了 10 个字，整个版面就会发生严重的“头重脚轻”。平衡，是高级设计的第一要义。