如果你正在用 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 主题也提供了强大的支持。