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

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

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

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

在动手操作之前,建议你先准备好:

高质量的产品场景图或模特图

每张图片对应的产品链接

简短的文字介绍(可选)

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

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

WoodMart 支持两种页面构建器:ElementorWPBakery。如果你用的是 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 主题也提供了强大的支持。

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注