🆕 Bricks 2.4 已发布:查询循环性能提升 40%,迁移教程同步更新 →

首页 / 中文教程 / 教程

如何在古腾堡编辑器中设置图片点击放大

教程:用古腾堡自带的灯箱能力,让访客在文章里点图片后弹层放大查看,无需装插件,阅读体验更顺。

Ray ChanRay Chan·2026-08-20·约 1 分钟
目录
  1. 1.古腾堡的灯箱是什么
  2. 2.设置步骤
  3. 3.注意事项
  4. 4.小结

写博客时经常要在文章里插大图,但默认情况下点图片只会跳链接。用古腾堡(Gutenberg)自带的灯箱(Lightbox)能力,可以让访客点图后在当前窗口弹层放大查看,体验更顺。

古腾堡的灯箱是什么

灯箱(Lightbox)指点击图片后,图片以半透明遮罩层的形式在浏览器窗口中央放大展示,点右上角关闭即可退出。古腾堡编辑器从较新版本起,给图片块内置了「点击展开」的连接选项,无需装插件就能实现。

设置步骤

  1. 在古腾堡编辑器里添加一张 图片 块,上传或选好图。
  2. 选中图片块,在右侧「块设置」里找到「链接到 / Link to」选项。
  3. 把链接目标设为 媒体文件(Media File),然后在展开的「点击行为」中选择「点击展开 / 灯箱(Lightbox)」。
  4. 更新或发布文章,前台点图片即可看到弹层放大效果。

注意事项

  • 灯箱依赖主题或编辑器对灯箱脚本的加载,如果点击没反应,检查是否装了会禁用灯箱的优化/懒加载插件。
  • 外贸站产品图建议用原图或大尺寸图做灯箱源,缩略图负责列表展示、灯箱负责看清细节。
  • 若你的站主要用 Bricks 排版而非古腾堡,也可以在 Bricks 的图片元素里开启灯箱类设置达到同样效果。

小结

古腾堡图片灯箱是零成本提升阅读体验的小技巧:图片块链接到媒体文件并开启「点击展开」,访客点图即放大。适合教程截图、产品细节图等需要看清大图的场景。


内容说明(整理稿):本文选题与步骤框架参考自竞对站 trybricks.com / qinbanliang 站的公开教程(源多为截图驱动教程,正文极薄),内容为 BricksWiki 基于 Bricks 官方公开文档与通用实操经验重写整理,非原文逐字翻译,也不构成官方文档。操作入口/路径以你当前 Bricks 版本为准,实操前建议对照官方文档核对。

Ray Chan

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

延伸阅读