WoodMart 教程：创建 Lookbook 搭配展示页面

如果你正在用 WoodMart 主题搭建一个高端电商网站，想要展示产品的风格搭配或系列组合，一个 Lookbook 页面是非常理想的方式。它可以提升品牌调性，还能让访客以更直观的方式了解产品在真实场景中的呈现效果。

下面就来手把手教你，如何用 WoodMart 创建一个美观实用的 Lookbook 或目录展示页面。

第一步：准备好页面内容与图片

在动手操作之前，建议你先准备好：

• 高质量的产品场景图或模特图
• 每张图片对应的产品链接
• 简短的文字介绍（可选）

Lookbook 的核心是视觉呈现，图片质量决定了整体页面的高级感。

第二步：创建一个新页面并启用 Elementor 或 WPBakery

WoodMart 支持两种页面构建器：Elementor 和 WPBakery。如果你用的是 Elementor，可以：

• 前往 WordPress 后台 → 页面 → 添加新页面

• 命名为 “Lookbook” 或 “搭配目录”
• 点击 “用 Elementor 编辑” 或 “用 WPBakery 编辑” 进入可视化构建界面

第三步：使用 WoodMart 专属元素添加 Lookbook 模块

WoodMart 内置了多个适合创建 Lookbook 的小工具，比如：

• Lookbook 图片热点（Hotspot）模块
  这个模块允许你在一张图片上添加多个点击点，每个热点都能链接到对应商品，常用于“模特穿搭”、“家居场景”等展示。

• 拖入 Lookbook Hotspot 元素
• 每个热点都可以填写商品名称、短文字说明并设置跳转链接

• 上传一张风格图或模特图
• 点击添加热点，调整位置

• 产品网格（Product Grid）+ 场景图模块
  可在页面中间插入一张横幅图片，配合下方产品列表，营造视觉落差感。

• 图像+按钮组合模块
  适合做分区式目录，例如 “男装专区” “配件专区” 等。

第四步：设置响应式显示效果

Lookbook 页面往往图片较多，热点也比较密集，所以移动端适配非常关键。建议你在编辑器上方切换到“平板”和“手机”视图，逐一检查每个模块是否显示正常。尤其是热点的位置，有时在小屏幕下需要微调。

第五步：添加导航按钮或面包屑

为了提升页面跳转体验，可以在页面顶部加一个“返回商城”或“查看全部产品”按钮，避免用户在浏览完 Lookbook 后迷路。

如果启用了 WoodMart 的面包屑导航（Breadcrumb），Lookbook 页面建议放在主导航菜单里，让访客更容易发现。

第六步：发布并测试跳转链接

完成页面内容后，点击“发布”，然后在前台预览效果。

重点检查以下几点：

• 每个热点是否正确跳转
• 图片加载是否顺畅
• 页面在手机端是否展示清晰

小技巧：如何提升 Lookbook 的转化率？

• 每张图下方加入“立即购买”按钮或链接
• 添加限时优惠标签（如“新品”、“HOT”、“限时折扣”）
• 用 Lookbook 页面配合社交媒体引流，吸引用户点击

总结

在 WoodMart 中创建一个 Lookbook 页面并不复杂，关键在于视觉设计和产品联动。准备好优质的素材，善用热点功能与产品链接，让你的品牌更具专业感，还能有效提升转化率。

如果你想创建更复杂的 Lookbook 效果，比如横向滑动、视频背景、弹窗购买等，WoodMart 主题也提供了强大的支持。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息