古腾堡编辑器教程：WordPress区块大小调整技巧

WordPress 5.0正式推出的古腾堡区块编辑器，为用户带来了前所未有的内容定制自由。告别了以往在TinyMCE经典编辑器等所见即所得工具中的束缚，Gutenberg通过为文章或页面内容的每个元素创建独立区块，让用户能够更轻松地设计WordPress内容。想要让设计脱颖而出？最简单的方法就是超越默认设置。本文将深入探讨如何在WordPress中调整区块大小，助您突破思维定式，实现创意设计。

区块的响应式特性意味着大多数调整仍受限于站点的内容区域。若将页面内容区域设置为全幅，您的设计将在此空间内展开。例如，若内容区域宽580像素或1200像素，您的调整将基于此范围。以下方法均基于这一原则——在特定区块容器边界内进行操作。

### 如何在编辑器中调整区块大小

部分区块内置了调整大小选项，这些选项因区块而异，位置也不同。以下实例将展示不同区块的调整方法。

#### 示例#1：图片区块

点击图片区块会弹出上下文菜单，其中的调整大小选项实为间距设置。宽幅宽度和全幅宽度对齐功能可将图片区块调整为容器宽度（宽幅）或页面宽度（全幅）。右侧边栏的块设置同样可用于调整图片大小。

WordPress提供了便捷的预设尺寸选择，包括缩略图、中、大和全尺寸。全尺寸选项的表现取决于主题，可能完全显示或适应内容区域。您还可以按像素精确设置宽度和高度，或使用百分比调整。该百分比基于宽度和高度字段数值，而非预设尺寸。

点击图片本身会出现带有白色圆形锚点的蓝色边框，拖动锚点即可调整区块大小。这一操作会同步更新块设置菜单中的高度和宽度字段。

#### 示例#2：活动区块

活动区块（Automattic插件，非古腾堡核心组件）的调整大小设置仅限于编辑器上下文菜单。与图片区块类似，这里的选项实为间距设置，包括居中对齐和全幅宽度两个选项。

调整活动区块高度稍显复杂，但可通过插入空段落区块实现。在空区块字段按Enter/return键，即可添加额外段落区块扩展高度。虽然这不是理想方案，但在紧急情况下有效。

#### 示例 3#：使用栏目调整区块大小

若区块设置或上下文菜单中无调整选项，可借助栏目区块实现。点击任意+按钮搜索并添加栏目区块，其中可容纳其他区块。搜索栏还会出现区块编辑器模式，提供预设模板供您替换内容。

栏目区块允许初始选择6个不同方向的页面百分比配置。通过蓝色+按钮随时添加新栏目，每个栏目可单独调整宽度。虽然需要反复试验，但最终可实现精心设计且间距适宜的内容布局。请记住，空栏目在前端也会显示为空白。

通过调整不同栏目的宽度、位置和数量，您可以灵活控制区块的布局和尺寸。

### 需要更多尺寸选择？考虑使用更高级的页面构建器

若发现Gutenberg的调整选项受限，可考虑更高级的页面构建器。例如Divi为每个模块提供丰富的调整和变换选项，相比古腾堡在形状、大小和间距控制上更具优势。大多数高级页面构建器都提供类似功能，若Gutenberg无法满足需求，Divi等工具将是理想选择。

### 如何使用CSS调整WordPress区块大小

每个区块的高级设置面板中都有CSS部分。通过额外CSS类字段，您可为目标区块分配任何选择器，无论其是否已存在于站点中或专为该区块创建。建议使用类而非ID（因编辑器不支持ID），并采用清晰命名约定保持代码简洁。

完成类名输入后，导航至外观–自定义，在最底部找到额外CSS部分。编写或粘贴CSS代码即可调整区块大小。建议使用vw（视口宽度）、vh（视口高度）或%（百分比）而非像素（px），这些单位会根据设备或周围内容进行缩放。

示例代码：
.block-1 { height:35vh; max-height:50vh; }
.block-2 { width: 100vw; }
.block-3 { max-width:80vw; }

%和vw/vh虽然功能相似，但锚点不同。百分比基于元素容器，若容器未满屏，即使设置width:100%也不会到达边界。而vw/vh始终相对于设备视口，使用height:80vh可确保区块始终占据屏幕高度的80%。

### 小结

WordPress区块编辑器为用户带来了前所未有的定制自由。掌握区块大小调整技巧对于充分发挥编辑器潜力至关重要。随着全站点编辑功能的推出，这项技能将愈发重要。通过合理运用内置工具和CSS，您几乎可以创造出任何设计效果。

文章网址：https://www.wpbull.com/jiqiao/9177.html

古腾堡编辑器教程：WordPress区块大小调整技巧

相关推荐