如何在WordPress中更改块的高度和宽度

你想在WordPress中更改块的高度和宽度吗?默认情况下,WordPress 可以轻松地使用块为您的帖子和页面创建漂亮的内容布局。但是,有时您可能希望调整块的大小以使其看起来更好。在本文中,我们将向您展示如何在WordPress中轻松更改块的高度和宽度。

如何在WordPress中更改块的高度和宽度

为什么要在WordPress中更改块的高度和宽度?

块编辑器使您能够使用不同的块向 WordPress 网站添加内容,包括标题、段落、图像、视频、音频等。

但是,有时您可能希望更改特定块的宽度或高度,以改善其外观或整体内容的布局。

调整块大小还可以确保您的内容响应迅速,并在所有设备(包括手机、平板电脑和笔记本电脑)上正确显示。

例如,您可能已在内容编辑器中上传了图像,但它太大,使页面看起来没有吸引力。

图像预览

或者,您可能希望更改标题块的大小,以使其更好地与内容对齐。

通过调整块的宽度和高度,您可以使您的帖子和页面看起来更美观。

方法 1:使用块设置更改块高度和宽度

对于这种方法,我们将向您展示如何使用WordPress提供的默认设置更改块的高度和宽度。

目前,WordPress没有为所有块提供相同的调整大小选项。但是,块编辑器提供了许多方法来调整不同块的高度和宽度。

让我们从WordPress中的图像块开始。

首先,您可以通过单击块上方工具栏中的“对齐”按钮来更改图像块的对齐方式。

在这里,选择“宽宽度”选项将使块与容器的宽度相同。

或者,“全宽”对齐选项将使块成为页面的整个宽度。

使用对齐设置调整图像大小

您还可以通过转到右侧的“块设置”面板并向下滚动到“设置”部分来调整块的大小。在这里,您可以从“图像大小”下拉菜单中调整块的大小。

您还可以通过在“图片尺寸”部分的“宽度”和“高度”框中输入首选像素大小来调整块的宽度和高度。

在此之下,您还可以按百分比调整块的大小。

使用块面板设置调整图像大小

调整图像块大小的另一种方法是单击图像本身以显示带有圆形锚点的蓝色边框。

然后,只需拖动这些锚点即可更改图像块的高度和宽度。

使用锚点调整图像块的大小

完成后,单击“更新”或“发布”按钮以存储您的设置。

方法 2:使用列块更改块的高度和宽度

如果要调整大小的块没有附带对齐按钮或调整大小设置,则此方法适合您。

对于此方法,我们将块放在列块中。它充当容器,您可以在其中添加每列中的块。然后,您可以通过调整列的高度和宽度来调整这些块的大小。

首先,您需要单击屏幕左上角的“添加块”(+)按钮。

从这里,只需找到列块并将其添加到内容编辑器。然后,系统会要求您选择一种变体。

选择列块

之后,列布局将显示在屏幕上,您现在可以通过单击列内的“添加块(+)”按钮来添加所需的块。

添加块后,您可以使用右侧面板中的“列设置”调整其大小。

使用列添加块

完成后,只需单击“发布”按钮即可存储更改。

这是在两列块中调整和对齐两个段落块后内容在我们的演示网站上的外观。

列块预览

方法 3:使用组块更改块的高度和宽度

您还可以使用组块调整块的宽度和高度。它允许您对不同的块进行分组并将它们样式化在一起。

首先,您需要单击顶部的“添加块”(+)按钮。接下来,您必须找到组块并将其添加到内容编辑器。

完成此操作后,组块将显示三种不同的布局选项供您选择。在本教程中,我们将使用“组”布局。

选择组块并选择布局

之后,“添加块”按钮将显示在屏幕上。您现在可以添加所需的任何块。

在本教程中,我们将添加标题块、段落块和图像块并调整其大小。

将标题块添加到组块

要将多个块添加到组,您必须单击块工具栏中的“选择组”按钮。

选择组后,只需单击底部的“添加块”按钮(+)。

在组中添加多个块

单击“选择组”按钮还会打开右列中的块设置。从这里,您可以轻松调整所有块的布局、对齐和方向。

更改布局也会更改不同的块大小。您可以配置这些设置,直到您对结果满意为止。

配置组块的块设置

完成后,单击“更新”或“发布”按钮以存储您的设置。

这就是组块在我们的演示网站上的外观。

组块预览

方法 4:使用覆盖块更改块高度

如果要使用“覆盖”块,此大小调整方法适合您。它使您能够在图像或视频之上显示文本和其他内容。

首先,您需要单击顶部的“添加块”(+)按钮并找到覆盖块。

完成此操作后,系统会要求您选择颜色或从WordPress媒体库中上传图像。此图像或颜色将用作封面块的背景。

添加盖板

接下来,只需将您想要的任何块拖放到 Cover 块中。

之后,您需要单击 覆盖 块以在右列中打开其块设置。

从这里,向下滚动到“尺寸”面板,您可以在其中使用像素调整覆盖块的高度。

更改覆盖块高度

最后,不要忘记单击“保存更改”按钮来存储您的设置。

使用种子生产中的高级块创建漂亮的页面

您可以使用 SeedProd 插件轻松创建美观且美观的页面。

它是市场上最好的WordPress页面构建器,可让您使用块创建登录页面。这些块也非常容易根据您的需要进行自定义和调整大小。

首先,您需要安装并激活 SeedProd 插件。

注意: SeedProd 也提供免费版本,但我们将在本教程中使用高级版本。

激活后,您必须从WordPress仪表板转到SeedProd »设置页面,然后在“许可证密钥”框中输入许可证密钥。

您可以在 SeedProd 网站的帐户页面上找到许可证密钥。

在字段中粘贴许可证密钥

接下来,您需要从管理侧边栏访问 SeedProd » 登录页面屏幕以开始创建登录页面。

从这里,只需单击“添加新登录页面”按钮。

点击添加新着陆页按钮

现在,您将被带到“选择新页面模板”页面。种子生产提供了许多预制模板供您选择。

选择模板后,系统会要求您提供着陆页的名称和网址。

添加这些详细信息后,只需单击“保存并开始编辑页面”按钮即可继续。

输入您的页面详细信息

这将启动 SeedProd 的拖放页面构建器,您现在可以在其中开始编辑页面。

在本教程中,我们将添加图像块和按钮块并调整其大小。

首先,您需要将图像块从左侧的块面板中拖放到页面上的任何位置。

接下来,只需单击 图片 块以在左栏中打开其块设置。从这里,您可以从媒体库中上传图像。

接下来,您可以使用像素或百分比更改块的高度和宽度。

您还可以通过切换到设置面板顶部的“高级”选项卡来调整图像大小和位置。

然后,只需单击 间距 面板以展开其设置。

在这里,只需添加值即可根据需要调整块的边距和填充。

您可以调整块的顶部、底部、左侧和右侧区域的边距和填充。

只是块的边距和填充

使用 Seedprod,您还可以在两个不同的块之间添加一个间隔块,以便在它们之间留出一些空间。

首先,您需要从左列中找到并添加“间隔”块。然后,单击它以打开其设置。

添加间隔块

现在,您可以使用“高度”滑块控制垫片的高度。

间隔块可以帮助您创建一个整洁的网站。

WooCommerce独立站
Image

联系我们

六翼为您提供更丰富的服务项目,涵盖设计、开发、多媒体、营销、云服务等,驱动品牌网站的互联网创新发展,释放品牌潜力。

联系电话

400-188-6006
010-86469696

在线咨询