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

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

区块编辑器使您可以使用不同的区块(包括标题、段落、图像、视频、音频等)向您的 WordPress 网站添加内容。然而,有时候您可能希望更改特定区块的宽度或高度,以改善其外观或整体内容布局。调整区块大小还能确保您的内容在所有设备(包括手机、平板电脑和笔记本电脑)上都能正常显示。

例如,您可能在内容编辑器中上传了一张图片,但它太大,导致页面在前端看起来不美观。您可能还希望更改标题区块的大小,以便更好地与内容对齐。通过调整区块的宽度和高度,您可以使您的帖子和页面看起来更加美观。

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

在这种方法中,我们将向您展示如何使用 WordPress 的默认设置来更改区块的高度和宽度。当前,WordPress 并未为所有区块提供相同的调节选项。然而,区块编辑器提供了许多方法来调整不同区块的高度和宽度。

首先,您可以通过点击区块上方工具栏中的“对齐”按钮来更改图像区块的对齐方式。在此处,选择“宽对齐”选项会使区块的宽度与容器相同。或者,“全宽对齐”选项会使区块宽度覆盖整个页面。

您还可以通过右侧的“区块设置”面板滚动到“设置”部分来调整区块大小。从这里,您可以在“图像尺寸”下拉菜单中调整区块的大小。您还可以在“图像尺寸”部分输入首选的像素大小,以调节区块的宽度和高度。

另一种调整图像区块大小的方法是点击图像本身,这会显示一个带有圆形锚点的蓝色边框。然后,只需拖动这些锚点以更改图像区块的高度和宽度。

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

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

如果您想调整的区块没有对齐按钮或调整大小设置,您可以使用列区块。在这种方法中,我们将把我们的区块放在列区块中。它充当一个容器,您可以在每个列中添加不同的区块。然后,您可以通过调整列的高度和宽度来调整这些区块的大小。

首先,点击屏幕左上角的“添加区块”按钮。从这里找到并添加列区块到 Gutenberg 编辑器中。接下来,您将被要求选择一种变体。

选择您需要的列布局后,布局将显示在屏幕上,您可以通过点击列中的“添加区块”按钮添加您想要的区块。区块添加后,您可以使用右侧面板中的“列设置”调整其大小。

完成后,只需点击“发布”按钮保存您的更改。

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

您还可以使用组区块调整区块的宽度和高度。它允许您将所需的区块分组并一起调整样式。首先,点击顶部的“添加区块”按钮,然后找到并添加组区块到内容编辑器中。

添加组区块后,将显示三种不同的布局选项。在本教程中,我们将使用“组”布局。然后,点击屏幕上的“添加区块”按钮,您可以添加所需的任何区块。在本教程中,我们将添加并调整标题区块、段落区块和图像区块的大小。

要向组中添加多个区块,点击区块工具栏中的“选择组”按钮。选择组后,点击底部的“添加区块”按钮。

执行此操作后,右侧将打开区块设置侧边栏。从这里,您可以轻松调整所有区块的布局、对齐和方向。更改布局也会更改不同区块的大小。您可以配置这些设置直到满意为止。

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

方法4:使用封面区块更改区块高度

如果您想使用封面区块,这种调整方法适合您。它使您可以在图像或视频上显示文本和其他内容。首先,点击顶部的“添加区块”按钮并找到封面区块。选择封面区块后,您将被要求选择一种颜色或从 WordPress 媒体库中上传图像。该图像或颜色将用作封面区块的背景。

接下来,只需将您想要的任何区块拖放到封面区块中。然后,点击封面区块以打开其右侧栏中的区块设置。

从这里,滚动到“尺寸”面板,您可以使用像素调整封面区块的高度。最后,别忘了点击“保存更改”按钮保存您的设置。

赞助:使用 SeedProd 中的高级区块创建美丽的页面

您可以使用 SeedProd 插件轻松创建美观的页面。它是市场上最好的 WordPress 页面构建器。它允许您使用区块创建登陆页面,这些区块非常容易自定义和调整大小以满足您的需求。

首先,您需要安装并激活 SeedProd 插件。安装后,访问 WordPress 仪表板并转到 SeedProd » 设置 页面,在“许可证密钥”框中输入许可证密钥。您可以在 SeedProd 网站上的账户页面找到许可证密钥。

接下来,访问 SeedProd » 登陆页面 屏幕开始创建登陆页面。点击“添加新登陆页面”按钮,您将被带到“选择新页面模板”屏幕。SeedProd 提供了许多预制模板,您可以从中选择。

选择模板后,您将被要求提供页面名称和 URL。添加这些详细信息后,点击“保存并开始编辑页面”按钮以继续。这将启动 SeedProd 的拖放页面构建器,您现在可以开始编辑页面。

在本教程中,我们将添加并调整图像区块和按钮区块的大小。首先,您需要从左侧区块面板中拖动图像区块并将其放在页面上。接下来,点击图像区块以打开其设置。从这里,您可以从媒体库中上传图像,并使用像素或百分比调整区块的高度和宽度。

您还可以通过切换到设置面板顶部的“高级”选项卡来调整图像大小和位置。点击间距面板展开其设置,添加值以根据需要调整区块的边距和填充。您可以调整区块顶部、底部、左侧和右侧的边距和填充。

使用 SeedProd,您还可以在两个不同区块之间添加间隔区块以放置一些空间。首先,在左侧列中找到并添加“间隔”区块,然后点击它以打开其设置。现在,您可以使用“高度”滑块控制间隔的高度。

您还可以以同样的方式更改其他区块(包括视频、标题和按钮区块)的宽度和高度。找到左侧列中的按钮区块并拖动到页面上,点击按钮打开其设置。从这里,切换到顶部的“高级”选项卡,通过拖动“垂直填充”滑块更改区块的高度。

要更改宽度,拖动左列中的“水平填充”滑块。完成后,别忘了点击“保存”按钮保存您的设置。

希望本文能帮助您了解如何在 WordPress 中更改区块的宽度和高度。



Related Posts

  • 2024-10-30
  • WordPress 基础知识

WordPress表单是连接访客和扩展受众的重要工具。无论是联系表单、调查问卷还是反馈表,嵌入到您网站中都是收集访客信息的快速便捷方式。我们在所有项目中都使用表单,从联系页面到新闻订阅甚至结账表单。在过程中,我们学习了嵌入WordPress表单所需的所有步骤,并将从头到尾引导您完成整个过程。

閱讀更多
  • 2024-09-27
  • WordPress 基础知识

多年来,我们管理过数个 WordPress 多站点网络。实际操作中我们发现,拥有合适权限来管理所有网站的合适人员,可以极大地提高效率。而这正是超级管理员用户角色发挥作用的地方。然而,在 WordPress 多站点中添加超级管理员用户与在单一站点中添加新用户略有不同。对于初学者来说,这个过程可能有些困惑。文章中,我们将向您展示如何在 WordPress 多站点中添加超级管理员用户角色,提供两个简单的方法,并附加一些关于如何妥善保护 WordPress 多站点的技巧。

閱讀更多
  • 2024-08-25
  • WordPress 基础知识

人工智能 (AI) 的话题热度不减,许多人开始好奇如何利用人工智能来创建自己的 WordPress 网站。AI 承诺简化网站制作过程,加快创作速度,甚至启发新灵感,但如此多的工具让人无从下手。WPressize Me 经过广泛实验,探索 AI 如何提升 WordPress 体验,从 AI 页面构建器到内容生成器,并在此为您分享发现与方法。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>