WordPress 5.0 中正式引入的古腾堡块编辑器让用户有机会完全自定义他们的 WordPress 内容和网站。 不再受需要在 TinyMCE Classic Editor 等 WYSIWYG 工具中进行创建的限制，Gutenberg 为帖子或页面内容的每个元素提供了单独的块。 通过控制每个特定块的设置，用户可以比以往更轻松地设计 WordPress 内容。 让设计脱颖而出的最简单方法之一就是让它们超越默认设置。 因此，我们将研究如何在 WordPress 中调整块大小，以便您可以开始跳出框框思考（和设计）。
由于块的响应性质，块编辑器中的大多数调整大小仍然受限于站点的内容区域。 如果您将页面的内容区域设置为全角，您将在该空间内工作。 例如，如果您将帖子内容区域设置为 580 像素或 1200 像素，您将在那里工作。 我们用来教您如何在 WordPress 中调整块大小的方法都是基于这样的想法，即您将停留在任何特定块容器的边界内。
如何在编辑器中调整块大小
一些（但不是全部）块具有内置的调整大小选项。 由于显而易见的原因，这些是最容易调整大小的。 但是，根据块的不同，调整大小选项将位于不同的位置。
示例 #1：图像块
单击块会弹出上下文菜单，这里的调整大小选项实际上是间距选项。 然而 宽幅 和 全屏宽度 对齐会将图像块的大小更改为容器的宽度（宽）或整个页面的宽度（完整）。
您还可以使用右侧边栏中的块设置调整图像块的大小。 恰如其分的命名 图片尺寸 部分有许多选项，您可以使用这些选项调整块的大小。
WordPress 有一个用于快速调整大小的下拉菜单，您可以从中选择预设 缩略图, 中等的, 大的， 和 全尺寸。 选择 全尺寸 无论是实际完全显示还是适合内容区域，都会因您的主题而异。
您还可以按像素专门调整宽度和高度。 在此之下，您可以按百分比进行调整。 这 百分比基于宽度和高度字段中的数值. 不是您从下拉菜单中选择的预设图像尺寸。
最后，您可以单击图像本身以显示蓝色边框 白色圆形锚. 您可以拖动它们来调整块的大小。
您只需单击并拖动任何锚点即可缩放图像。 这样做将调整块设置菜单中高度和宽度字段的大小。
示例#2：事件块
对于事件块，调整大小设置仅在编辑器本身的上下文菜单中。 （事件块是您将安装的 Automattic 的一个单独插件，它不是古腾堡核心编辑器的一部分。）
像一些图像块选项一样，这里的调整大小选项在技术上是间距选项。 但是这两个选项是 居中对齐 和 宽幅。 您可以选择一个在容器中居中或在屏幕上的整个宽度。
在编辑器本身中调整块的高度有点麻烦，但有效。 如果你只是打 进入/返回 在空块字段中，您可以通过插入额外的空段落块来扩展高度。
这是一个不太理想的解决方案。 但它很快，而且在紧要关头工作——特别是考虑到事件块没有真正的高度调整选项。
示例 3#：在 WordPress 中使用列调整块大小
如果您需要调整大小的块在其设置面板或上下文菜单中没有调整大小选项，则使用块编辑器的列是您可以调整任何块大小的另一种方式。 只需搜索 列 按任意键阻止 + 按钮 添加一个新块。
在 Column 块中，您可以添加所需的任何其他块。 在搜索选项中，还会出现块编辑器模式。 这些是您可以插入到您的帖子或页面中的模板，其中内容已经调整大小和放置，等待您的内容替换占位符。
从一开始，Columns 块就允许您选择列本身的大小。 它分为 6 个不同的方向，每个方向都有不同的页面百分比用于各个列。
这些不是您可以使用的唯一配置。 您可以使用 蓝色 + 按钮 在块内随时添加新列。 每个单独的列都有自己的设置面板，您可以在其中按百分比单独调整其宽度。
可能需要进行一些实验才能使尺寸适合您的设计。 但是，当它完成后，您可以在首页上放置一些精心设计且间隔适当的内容。 请记住，块编辑器中的任何空列也将在前端显示为空。
通过调整不同列的宽度、位置和数量，您的块几乎可以以任何方式调整大小和放置。
需要更多尺寸选择？ 考虑使用更高级的页面构建器
我们意识到其中一些调整块大小的方法可能会受到限制。 如果您发现它们对您来说限制太多，那么可能是时候研究更高级的页面构建器了。
例如，我们自己的 Divi 有 浆纱 和 转变 每个模块（块）的选项，使您可以比古腾堡更好地控制形状、大小和间距。 大多数高级页面构建器也是如此，因此如果您发现 Gutenberg 的选项过于有限，那么查看 Divi 之类的内容可能是下一步的最佳选择。
如何使用 CSS 调整 WordPress 中的块大小
每个块在设置面板下都有一个 CSS 部分 高级设置. 除了任何其他特定于块的高级设置外，每个设置都有一个字段用于 额外的 CSS 类. 您可以将您想要的任何选择器分配给这个单独的块，无论它们是否已经存在于您的站点上，或者您是否专门为此块创建了它。
通常，我们建议对单个块使用 CSS ID 而不是类，但块编辑器不支持（至少默认情况下）。 因此，您将只想使用多个类来跟上单个块而不是 ID。 类实际上是为了涵盖大类的元素类型，而 ID 是为了单个元素。 在这种情况下，我们建议使用清晰的命名约定来保持代码中的简洁。
无论如何，您只需将类输入到文本字段中即可。 请勿在此字段中的班级名称前包含句点/点.
现在，您应该导航到 外观 – 定制 并找到 额外的 CSS 最底部的部分。 编写或粘贴 CSS 代码以根据您的喜好调整块的大小。
我们建议避免在 像素（px） 因为它们是绝对的。 最好，您将使用 大众 （视口宽度）, vh （视口高度），或 % （百分比）来调整块。 这些都将参考设备和/或它周围的其他内容进行缩放。
.block-1 {
height:35vh;
max-height:50vh;
}
.block-2 {
width: 100vw;
}
.block-3 {
max-width:80vw;
}
请记住 % 和 车速/车速 也不同，尽管它们的功能相似。 它们都按百分比起作用，但它们与不同的锚点有关。
百分比测量与元素所在的容器有关。 因此，如果元素所在的部分或行没有到达屏幕的边缘，即使设置 宽度：100% 不会到达边界。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
使用 甚高/大众 但是，因为它们相对于设备本身的视口，而不是站点的元素。 使用 高度：80vh，无论是在移动设备、台式机还是平板电脑上显示，您始终可以确保此块占据屏幕高度的 80%。
结论
WordPress 中的块编辑器为用户提供了大量以前不可用的自定义选项（即在编辑器本身内）。 了解如何在 WordPress 中调整块大小对于能够最大程度地利用块编辑器至关重要。 随着现在全站点编辑的功能，这是一项随着时间的推移只会变得更有用的技能。
关于在 WordPress 中调整块大小，您可以分享哪些提示和技巧？
文章特色图片由 3rieart/shutterstock.com 提供
