现在用 WordPress 搭建网站，很多人都会选择使用区块编辑器（又叫 Gutenberg 编辑器）来编辑页面。它自带的模块不仅易用，而且在布局方面也越来越强，特别是对响应式设计的支持相当完善。
这篇文章就带大家了解一下，用 WordPress 自带的区块编辑器，怎样做出能在电脑、平板和手机上都好看、好用的页面布局。
使用“组”和“列”区块构建基础结构
在区块编辑器中，常见的响应式布局通常是用 “组”区块（Group） 和 “列”区块（Columns） 来实现的。
“组”区块可以把多个元素包在一起，方便统一设置背景、间距等。而“列”区块可以创建左右、三栏、或更多分栏结构，非常适合展示图文并排的内容。
比如要制作一个左右结构的模块：
添加一个“列”区块，选择“两栏布局”左边放一张图片，右边放标题+段落+按钮
在手机端，这两栏会自动变成上下结构，无需另外处理，非常方便。
巧用“宽度”、“间距”与“排列方式”
区块编辑器中，每个区块都有相关的样式设置，学会调整这些参数能让布局更灵活。
宽度设置：可以选择“内容宽度”、“宽幅”、“全宽”等模式。如果要让背景色铺满整屏，可以用“全宽”。
间距设置：使用“块间距”和“内边距”可以让元素之间保持足够的留白，让页面看起来更舒服。
排列方式：组区块中的内容可以设置为垂直或水平排列，还可以设置内容居中、靠左、靠右，适应不同展示需求。
这些设置不仅影响视觉效果，也能让内容在不同屏幕下有更好的适配。
使用“堆叠”、“隐藏”增强移动端优化
有时我们在电脑上希望展示更多内容，但在手机上可能就不适合。区块编辑器有些主题支持“隐藏某个区块在手机端或桌面端”的功能，可以灵活应对。
比如：
在桌面显示一张横幅图，手机上用一张竖图代替
在移动端隐藏冗余的文字，只保留重点信息
让按钮在手机上变大一点，方便点击
如果你使用的主题或插件支持“显示条件”功能，比如 Kadence 或 GenerateBlocks 插件，也可以实现更精细的控制。
别忘了测试不同设备
编辑完成之后，一定要在实际设备上查看效果。虽然编辑器中可以预览不同设备，但真实手机上的效果更能反映问题。
建议打开手机、平板、不同尺寸的浏览器窗口检查页面：
图片是否加载正常
内容是否变成上下排列
按钮是否够大，易于点击
字体是否清晰，段落是否太密
如果页面有表格、图片集或视频，建议使用区块提供的“自适应”设置，避免在小屏幕上内容溢出。
总结
用 WordPress 区块编辑器做响应式页面，关键是要善用“组”、“列”、间距、排列和隐藏功能。只要结构搭得好，页面在手机和平板上都会很自然地调整，不需要写任何代码。
很多人以为用高级插件或可视化工具才能做响应式，WordPress 自带的编辑器已经足够强大，只要用熟了，也能做出漂亮实用的网页。