WordPress Gutenberg编辑器教程：区块内容怎么排版
很多用 WordPress 做独立站的卖家，在写产品页或者 Landing Page 时，总觉得内容排版很别扭。文字要么挤在一起，要么图片和段落对不齐，想做个两栏布局还得装一堆页面构建器插件。其实，WordPress 自带的 Gutenberg 编辑器（古腾堡）就能解决大部分排版问题。这篇文章不讲废话，直接带你走一遍区块内容排版的核心操作、常见坑和 SEO 优化要点。
一、理解 Gutenberg 的排版基础：区块与组
Gutenberg 的核心逻辑是“区块”。每个段落、图片、标题都是一个独立区块。排版的关键在于如何把这些区块组合起来。
- 段落区块：默认文本排版，支持加粗、斜体、链接。注意，不要在一个段落区块里塞太多内容，移动端阅读体验会差。
- 标题区块：H2 到 H6。H1 通常留给页面标题，正文里用 H2 做主段落标题，H3 做子标题。这对 SEO 很重要。
- 组区块：这是排版的灵魂。你可以把多个区块（如图片+文字）放进一个“组”里，然后对整个组设置背景色、边距、内边距。
- 列区块：直接做多栏布局。选择列数（比如 2 列），然后在每一列里添加区块。
后台路径：编辑页面或文章时，点击左上角的“+”号，选择你需要的区块。组区块和列区块都在“布局元素”分类下。
二、实操步骤：从零排出一个产品介绍页
假设你要做一个有图有文的产品介绍区域。以下是配置顺序，照着做不会乱。
- 先建组：点击“+”添加一个“组”区块。这个组就是你的外层容器。
- 设置组样式：选中组，在右侧面板设置“背景颜色”和“内边距”。建议内边距设为 20px 以上，避免内容贴边。
- 添加列：在组内部，再添加一个“列”区块。选择 2 列。这样你就能左右放内容了。
- 左侧放图片：点击第一列，添加“图片”区块。上传产品图，建议宽度 600px 以上，但不用太大，Gutenberg 会自动响应式缩放。
- 右侧放文字：点击第二列，先加“标题”区块（H2 或 H3），再加“段落”区块。文字不要超过 3 行，否则容易破坏布局。
- 对齐与间距：选中列区块，在右侧面板调整“垂直对齐”为“居中”。这样图片和文字会在同一水平线上。
检查清单：发布前预览移动端效果。如果文字被挤到图片下方，说明列宽比例不合适。可以把列宽从 50/50 改成 40/60（右侧面板里调整）。
三、常见排版坑与解决方案
即使有经验的老手，也会在 Gutenberg 里踩坑。以下是几个高频问题。
| 问题 | 表现 | 解决方法 |
|---|---|---|
| 区块间距太大 | 段落之间空隙不自然 | 选中区块，在右侧“尺寸”里把“外间距”调为 0 或 10px。或者在组里统一设置间距。 |
| 图片不响应 | 手机端图片溢出屏幕 | 检查图片区块的“尺寸”设置，不要选固定像素宽，用“全宽”或“大”即可。 |
| 列内内容错位 | 文字和图片顶部不对齐 | 选中列区块，在“垂直对齐”里选择“顶部”或“居中”，不要留空。 |
| 背景色覆盖不全 | 组背景只包住部分内容 | 检查组的内边距是否设置。如果内边距为 0，背景色就会紧贴内容。 |
常见坑：很多用户习惯在段落里直接按回车换行，结果写了两个段落区块。正确做法是用 Shift+Enter 在同一个段落里换行，或者用列表区块。否则移动端会出现奇怪的空格。
四、排版对 SEO 和转化率的影响
排版不只是好看，它直接影响用户行为和搜索引擎判断。
- 标题层级要清晰：搜索引擎会通过 H2、H3 理解页面结构。产品页里，H2 放核心卖点，H3 放具体参数。不要跳过层级，比如直接从 H2 跳到 H4。
- 移动端优先：Google 现在以移动端版本为主进行索引。如果排版在手机上显示混乱，排名会受影响。用 Gutenberg 的预览功能检查所有断点。
- CTA 按钮位置：在排版时，把购买或咨询按钮放在组区块的底部，并且用“按钮”区块加粗颜色。不要放在文字段落里，容易被忽略。
- 减少跳出率：用列区块把图片和文字并排，用户扫读速度更快。如果纯文字堆叠，用户可能直接关闭页面。
常见问题
Gutenberg 排版后，前端显示和后台不一样怎么办？
通常是主题样式冲突。检查你的主题是否完整支持 Gutenberg。可以在“外观-主题”里切换到默认主题（如 Twenty Twenty-Four）做测试。如果正常，说明是你的主题 CSS 覆盖了区块样式。解决方法：在“自定义-CSS”里补上样式覆盖代码，或者联系主题作者。
列区块里能再加列吗？
可以，但不推荐。列区块嵌套列区块，在移动端会变得非常难控制，容易崩。如果确实需要复杂布局，建议用“组”区块替代列区块，然后手动用多个列区块并排。
排版好之后，想批量调整所有区块的间距怎么办？
Gutenberg 没有全局批量调整功能。你可以选中最外层的“组”区块，统一设置“内边距”和“外间距”。这样内部所有区块都会继承这个间距，但内部区块的独立间距不会被覆盖。如果需要精细控制，建议用“布局”面板里的“块间距”设置。
总结
Gutenberg 的排版能力被很多人低估了。你不需要额外插件，就能做出清晰、响应式的产品页布局。下一步，打开你的 WordPress 后台，随便找一篇产品页或文章，用组区块和列区块重新排一下版。重点检查移动端预览和标题层级。排好之后，你会发现页面加载速度更快（因为没加冗余插件），而且用户停留时间会明显增加。如果遇到主题兼容问题，先换默认主题测试，再针对性修复。