“`html
如何修改 WordPress 区块的高度和宽度
过去，要让 WordPress 区块精确符合设计尺寸，往往需要编写自定义 CSS 或使用复杂的变通方法。我们对此深有体会——因为曾经花费大量时间帮助用户解决这类问题。不过，得益于 WordPress 的近期更新，控制区块尺寸已经变得简单多了。
很多人可能不知道，WordPress 其实内置了多种调整区块大小的方法。经过大量测试，我们总结出了一套最可靠、适用于不同主题和场景的操作方案。
下面这份指南，将为你介绍修改 WordPress 区块高度和宽度最简单的方法。
快速答案：5 种修改区块尺寸的方法
- 区块设置（直接控制）：利用对齐选项、像素/百分比输入框或拖拽调整手柄，适用于自带尺寸控件的区块。
- 列区块（容器控制）：将区块放入列中，通过调整列宽来间接控制内部区块的宽度。
- 组区块（集体样式）：将多个区块组合为一个组，利用组的设置统一调整布局和尺寸。
- 封面区块（区域高度）：为类似横幅的区域设置最小高度，常用于背景图片或颜色。
- SeedProd（高级页面构建器）：使用 SeedProd 的拖拽式界面，实现精确控制并轻松调整任意区块。
为什么要修改区块高度和宽度？
WordPress 区块编辑器虽然能轻松添加内容，但默认的区块尺寸未必总能满足你的设计需求。调整区块的高度和宽度，是提升页面外观控制力的简单途径。
- 改善视觉布局：通过精确控制元素尺寸，打造更平衡、更专业的页面设计。
- 增强可读性：调整文本区块的宽度，尤其在宽屏显示器上，能让内容更易阅读。
- 确保响应式设计：正确设置区块尺寸，有助于内容在桌面端到移动端等各种设备上呈现良好效果。
- 突出重要内容：放大或缩小特定区块，可以吸引用户对关键行动号召或重要信息的关注。
了解 WordPress 区块尺寸的单位
在动手操作前，先了解 WordPress 定义区块尺寸的几种方式很有帮助：
| 术语 | 含义 | 适用场景 |
|---|---|---|
| 像素（px） | 固定尺寸单位，不随屏幕大小变化。 | 当你需要某个元素在所有设备上保持完全相同的大小时使用。 |
| 百分比（%） | 基于父容器调整的弹性单位。 | 让布局在不同屏幕尺寸下都能良好适配。 |
| 宽幅宽度 | WordPress 的一种对齐方式，使区块比内容区更宽，但不会占满全屏。 | 让某部分内容突出，但又不至于横跨整个页面。 |
| 全宽 | 使区块边缘贴边，横跨整个屏幕。 | 适用于英雄区、横幅或大尺寸背景图片。 |
| 最小高度 | 设置区块允许的最小高度，但区块可随内容增加而自动扩展。 | 用于封面区块等需要保持统一高度的区域。 |
接下来，我们逐一介绍具体操作方法，你可以通过下面的快速链接跳转到感兴趣的部分：
- 方法1：使用区块设置修改高度和宽度
- 方法2：使用列区块修改宽度
- 方法3：使用组区块修改高度和宽度
- 方法4：使用封面区块修改高度
- 高级技巧：用 SeedProd 的增强区块创建精美页面
- 常见问题 FAQ
方法1：使用区块设置修改高度和宽度
此方法展示如何利用 WordPress 默认设置调整区块尺寸。虽然并非所有区块都提供完全相同的尺寸选项，但编辑器提供了多种强大手段。
以图片区块为例：
点击图片区块上方工具栏中的“对齐”按钮，选择“宽幅”可让图片横跨大部分内容区，选择“全宽”则让图片铺满整个页面。
在右侧的“区块设置”面板中，你还可以调整图片的显示尺寸。在“设置”部分，使用“图片尺寸”下拉菜单可选择预设尺寸（如缩略图、中等、大图或原图）。
你也可以在“图片尺寸”区域直接输入像素值来修改宽度和高度，下方还支持按百分比调整。
另一种方法是直接拖拽图片上的蓝色圆形锚点，实时调整图片区块的高度和宽度。
调整完成后，点击“更新”或“发布”按钮保存设置。
方法2：使用列区块修改宽度
如果你需要调整的区块（如段落区块）没有内置尺寸控件，此方法可作为变通方案：将区块放入一个可控制的容器中。
本方法使用列区块作为容器，你可以在列中添加各种区块，然后通过调整列宽来控制内部区块的宽度。列的高度会自动适应内容。
首先，点击左上角的“添加区块”（+）按钮，找到并添加列区块，然后选择一种列布局。
在列布局显示后，点击列内部的“添加区块”按钮放入你想要的区块。然后选中该列，在右侧的区块设置面板中，找到“设置”部分调整列的宽度，从而间接调整内部区块的宽度。
完成后点击“发布”按钮。以下是我们演示站点上使用两列区块对齐两个段落区块的效果：
方法3：使用组区块修改高度和宽度
组区块非常适合组织多个区块，并管理它们的整体布局和间距。虽然它不能直接设置内部每个区块的高宽，但可以控制组本身的整体尺寸以及内容的排列方式。
点击“添加区块”（+）按钮，找到并添加组区块。组区块会提供“组”、“行”或“堆叠”等布局选项，本教程使用默认的“组”布局。
随后会显示“添加区块”按钮，你可以向组内添加任意区块。本教程添加了标题、段落和图片区块。
要添加多个区块，先在区块工具栏上点击“选择组”，然后点击底部的“添加区块”（+）按钮。
右侧的区块设置面板会打开，你可以轻松调整布局、对齐方式和内部区块的排列方向。这些布局设置会影响区块在组内的排列方式和所占空间，反复调整直到满意。
完成后点击“更新”或“发布”按钮。以下是我们演示站点上组区块的效果：
方法4：使用封面区块修改高度
此方法适合使用封面区块并为特定区域设置最小高度，非常适合创建全宽横幅或带有文字和内容的英雄图片。
点击“添加区块”（+）按钮，找到封面区块。然后选择一种颜色或从媒体库上传一张图片作为封面背景。
接下来，将任意区块拖拽到封面区块内。然后点击封面区块，在右侧的区块设置面板中向下滚动到“尺寸”面板，用像素值调整封面区块的高度。
最后别忘了点击“保存”按钮。如需更详细的封面区块使用说明，可参考猫哥的封面图片与特色图片对比指南。
高级技巧：用 SeedProd 的增强区块创建精美页面
使用 SeedProd 插件，你可以轻松创建美观且令人赏心悦目的页面。它是目前市场上最好的 WordPress 页面构建器之一，让你使用区块搭建着陆页，并能够极其方便地自定义和调整尺寸。
多个合作伙伴品牌已使用该工具设计整站，用户非常喜欢它们现代清爽的外观。详细了解可查看猫哥的 SeedProd 评测。
步骤1：安装并激活 SeedProd
首先安装并激活 SeedProd 插件（也提供免费版本，本教程使用高级版）。激活后，在 WordPress 后台进入 SeedProd » 设置，输入许可证密钥，密钥可在 SeedProd 官网的账户页面找到。
步骤2：创建新着陆页
在后台侧边栏进入 SeedProd » 着陆页，点击“添加新着陆页”按钮。然后选择模板，为页面命名并设置 URL，最后点击“保存并开始编辑页面”。
步骤3：调整图片区块尺寸
进入 SeedProd 的拖拽式页面构建器后，将左侧面板中的图片区块拖放到页面上。点击图片区块，在左侧设置面板中上传图片，然后通过像素或百分比修改宽度和高度。
切换到“高级”选项卡，展开“间距”面板，可以微调区块的外边距（margin）和内边距（padding），上下左右均可单独设置。
步骤4：调整间距区块高度
SeedProd 还提供间距区块，可以在两个区块之间添加空白。添加间距区块后，点击它，使用“高度”滑块控制间距大小，有助于打造整洁的页面布局。
步骤5：配置按钮区块内边距
视频、标题、按钮等区块的调整方法类似。将按钮区块拖入页面，点击后在“高级”选项卡中，通过“垂直内边距”滑块增加按钮上下空间，通过“水平内边距”滑块增加左右空间，从而改变按钮的尺寸。
完成后点击“保存”按钮。
常见问题 FAQ
如何缩小 WordPress 区块的尺寸？
选择区块后，在区块设置中降低宽度、内边距或字体大小即可。从尺寸或间距入手，逐步调小直到满意。
如何调整文本区块的尺寸？
可以在排版设置中修改字体大小，也可以通过调整行高或间距来控制文本区块的视觉大小。
如何调整区块间距？
编辑区块的外边距和内边距。如果区块内部空间过大，建议先减小内边距。
如何调整整个网页的尺寸？
在主题或页面构建器的布局设置中，切换盒装布局或全宽布局，即可改变页面整体宽度。
如何让整个网站看起来更紧凑？
逐步减小字体大小、间距和容器宽度，不要一次性大改，而是分元素微调。
希望这篇文章能帮助你学会如何修改 WordPress 区块的宽度和高度。你可能还想了解如何在 WordPress 区块编辑器中添加和对齐图片，以及我们精选的最佳 Gutenberg 友好型 WordPress 主题。
如果你喜欢这篇文章，欢迎订阅猫哥的 YouTube 频道获取 WordPress 视频教程，也可以在 Twitter 和 Facebook 上找到我们。
“`