如何在 WordPress 中调整块大小

WordPress 5.0 中正式引入的古腾堡块编辑器让用户有机会完全自定义他们的 WordPress 内容和网站。 不再需要像 TinyMCE 这样的 WYSIWYG 工具来创建 经典编辑器, Gutenberg 为帖子或页面内容的每个元素提供单独的块。 通过控制每个特定块的设置,用户可以比以往更轻松地设计 WordPress 内容。 让设计脱颖而出的最简单方法之一就是让它们超越默认设置。 因此,我们将研究如何在 WordPress 中调整块的大小,以便您可以开始跳出框框思考(和设计)。

由于块的响应性质,块编辑器中的大多数调整大小仍然受限于站点的内容区域。 如果您将页面的内容区域设置为全角,您将在该空间内工作。 例如,如果您将帖子内容区域设置为 580 像素或 1200 像素,您将在那里工作。 我们用来教您如何在 WordPress 中调整块大小的方法都是基于这样的想法,即您将停留在任何特定块容器的边界内。

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

一些(但不是全部)块具有内置的调整大小选项。 由于显而易见的原因,这些是最容易调整大小的。 但是,根据块的不同,调整大小选项将位于不同的位置。

示例 #1:图像块

单击块会弹出上下文菜单,这里的调整大小选项实际上是间距选项。 但是,宽宽度和全宽对齐会将图像块的大小更改为容器的宽度(宽)或整个页面的宽度(完整)。

how-to-resize-blocks-in-wordpress 如何在 WordPress 中调整块大小

您还可以使用右侧边栏中的块设置调整图像块的大小。 恰当命名的图像大小部分有许多选项,您可以使用这些选项调整块的大小。how-to-resize-blocks-in-wordpress-1 如何在 WordPress 中调整块大小

WordPress 有一个用于快速调整大小的下拉菜单,您可以从缩略图、中、大和全尺寸中选择预设。 选择全尺寸将因您的主题而异,无论它是实际完全显示还是适合内容区域。

您还可以按像素专门调整宽度和高度。 在此之下,您可以按百分比进行调整。 百分比基于宽度和高度字段中的数值。 不是您从下拉菜单中选择的预设图像尺寸。

最后,您可以单击图像本身以显示带有白色圆形锚点的蓝色边框。 您可以拖动它们来调整块的大小。

how-to-resize-blocks-in-wordpress-2 如何在 WordPress 中调整块大小

您只需单击并拖动任何锚点即可缩放图像。 这样做将调整块设置菜单中高度和宽度字段的大小。

示例#2:事件块

对于事件块,调整大小设置仅在编辑器本身的上下文菜单中。 (这 事件块 是您将安装的 Automattic 的一个单独插件,它不是 Gutenberg 核心编辑器的一部分。)

how-to-resize-blocks-in-wordpress-3 如何在 WordPress 中调整块大小

像一些图像块选项一样,这里的调整大小选项在技术上是间距选项。 但是这两个选项是居中对齐和宽宽度。 您可以选择一个在容器中居中或在屏幕上的整个宽度。

在编辑器本身中调整块的高度有点麻烦,但有效。 如果您只是在空块字段中按 Enter/return,则可以通过插入额外的空段落块来扩展高度。

how-to-resize-blocks-in-wordpress-4 如何在 WordPress 中调整块大小

这是一个不太理想的解决方案。 但它很快,而且在紧要关头工作——特别是考虑到事件块没有真正的高度调整选项。

示例 3#:在 WordPress 中使用列调整块大小

如果您需要调整大小的块在其设置面板或上下文菜单中没有调整大小选项,则使用块编辑器的列是您可以调整任何块大小的另一种方式。 只需按任意 + 按钮搜索 Columns 块即可添加新块。

how-to-resize-blocks-in-wordpress-5 如何在 WordPress 中调整块大小

在 Column 块中,您可以添加所需的任何其他块。 在搜索选项中,块编辑器 图案 也出现。 这些是您可以插入到您的帖子或页面中的模板,其中内容已经调整大小和放置,等待您的内容替换占位符。

从一开始,Columns 块就允许您选择列本身的大小。 它分为 6 个不同的方向,每个方向都有不同的页面百分比用于各个列。

how-to-resize-blocks-in-wordpress-6 如何在 WordPress 中调整块大小

这些不是您可以使用的唯一配置。 您可以使用块内的蓝色 + 按钮随时添加新列。 每个单独的列都有自己的设置面板,您可以在其中按百分比单独调整其宽度。

how-to-resize-blocks-in-wordpress-7 如何在 WordPress 中调整块大小

可能需要进行一些实验才能使尺寸适合您的设计。 但是,当它完成后,您可以在首页上放置一些精心设计且间隔适当的内容。 请记住,块编辑器中的任何空列也将在前端显示为空。

how-to-resize-blocks-in-wordpress-8 如何在 WordPress 中调整块大小

通过调整不同列的宽度、位置和数量,您的块几乎可以以任何方式调整大小和放置。

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

我们意识到其中一些调整块大小的方法可能会受到限制。 如果您发现它们对您来说限制太多,那么可能是时候研究更高级的页面构建器了。

how-to-resize-blocks-in-wordpress-9 如何在 WordPress 中调整块大小

我们自己的 迪维例如,每个模块(块)都有大小调整和变换选项,使您可以比古腾堡更好地控制形状、大小和间距。 大多数高级页面构建器也这样做,因此如果您发现古腾堡的选项太有限,请查看类似 迪维 可能是最好的下一步。

如何使用 CSS 调整 WordPress 中的块大小

每个块在高级设置下的设置面板中都有一个 CSS 部分。 除了任何其他特定于块的高级设置外,每个设置都有一个附加 CSS 类的字段。 您可以将您想要的任何选择器分配给这个单独的块,无论它们是否已经存在于您的站点上,或者您是否专门为此块创建了它。

how-to-resize-blocks-in-wordpress-10 如何在 WordPress 中调整块大小

通常,我们建议对单个块使用 CSS ID 而不是类,但块编辑器不支持(至少默认情况下)。 因此,您将只想使用多个类来跟上单个块而不是 ID。 类实际上是为了涵盖大类的元素类型,而 ID 是为了单个元素。 在这种情况下,我们建议使用清晰的命名约定来保持代码中的简洁。

无论如何,您只需将类输入到文本字段中即可。 不要在此字段中的类名称前包含句点/点。

how-to-resize-blocks-in-wordpress-11 如何在 WordPress 中调整块大小

现在,您应该导航到 Appearance – Customize 并在最底部找到 Additional CSS 部分。 编写或粘贴 CSS 代码以根据您的喜好调整块的大小。

how-to-resize-blocks-in-wordpress-12 如何在 WordPress 中调整块大小

我们建议避免使用以像素 (px) 为单位的度量,因为它们是绝对的。 最好使用 vw(视口宽度)、vh(视口高度)或 %(百分比)来调整块。 这些都将参考设备和/或它周围的其他内容进行缩放。

.block-1 { 高度:35vh; 最大高度:50vh; } .block-2 { 宽度:100vw; } .block-3 { 最大宽度:80vw; }

请记住,% 和 vw/vh 也不同,尽管它们的功能相似。 它们都按百分比起作用,但它们与不同的锚点有关。

百分比测量与元素所在的容器有关。 因此,如果元素所在的部分或行没有到达屏幕的边缘,即使设置 width:100% 也不会到达边界。

然而,使用 vh/vw 将是相对于设备本身的视口,而不是站点的元素。 使用 height:80vh,您始终可以确保此块占据屏幕高度的 80%,无论它是在移动设备、台式机还是平板电脑上显示。

结论

WordPress 中的块编辑器为用户提供了大量以前不可用的自定义选项(即在编辑器本身内)。 了解如何在 WordPress 中调整块大小对于能够最大程度地利用块编辑器至关重要。 随着现在全站点编辑的功能,这是一项随着时间的推移只会变得更有用的技能。

关于在 WordPress 中调整块大小,您可以分享哪些提示和技巧?

文章特色图片由 3rieart/shutterstock.com 提供

来源

原创文章,作者:WPJIAN,如若转载,请注明出处:https://wpjian.com/tips/2021073147964.html