使用指南/编辑您的网站/编辑器/使用编辑器/选择和移动区块

选择和移动区块

在编辑站点内容时,您可能需要将单个区块(或多个区块)移动到页面的其他位置。本指南将为您介绍多种选择和移动区块的方法。

视频教程

在本视频中,您将学习如何在 WordPress 编辑器中选择和移动区块。视频涵盖了通过点击或使用列表视图来选择区块,以及如何使用工具栏箭头,或在列表视图中拖动,来移动一个或多个区块。

选择正确的区块

在移动区块之前,请确保您选择了正确的区块。虽然大多数区块只需点击一下即可选中,但有些区块嵌套在其他区块内部,因此下面我们来看看几种方法,帮助您选中要移动的区块。

使用列表视图选择区块

要访问列表视图,请点击屏幕左上角的图标,它看起来像三条叠在一起的横线:

三条错开排列的竖线,代表列表视图。

此功能会显示您在页面或文章中插入的所有区块列表,方便您选择想要操作的区块。

在右侧图片中,可以看到多个区块嵌套在单个栏内,而这个栏又位于多栏区块中。因此,如果我们想移动整个栏及其中的所有内容,就需要点击包含所有内容的多栏区块。

如需了解更多列表视图的使用贴士,请参阅我们的列表视图指南

列表视图显示页面上所有区块的列表。

使用面包屑导航选择区块

要确保选中了正确的区块,另一种方法是查看屏幕底部的面包屑导航(在下图中以橙色标记)。之所以叫面包屑导航,是因为它就像一路留下的面包屑,方便您按路径返回:

显示多个区块,屏幕底部的面包屑导航以橙色高亮标出,表示一个标题区块嵌套在一个栏目内,而该栏目又位于一个多栏区块中。

您当前选中的区块会显示为面包屑导航列表中的最后一项。如果您想选择其他区块,可以点击该区块的名称将其选中。

使用父区块选择器选择区块

有些区块嵌套在其他区块(称为“父”区块)内部,您需要一种简便的方法来选择父区块。

另一种方法是使用父区块选择器,它会显示在某些区块的工具栏中:

高亮显示父级选择器按钮,位于区块设置工具栏的左侧偏移位置。
多栏区块工具栏

点击含有父区块的区块后,工具栏左侧会出现一个稍微偏左的按钮(如上图中橙色标记所示)。点击该按钮即可选中父区块(在此示例中为多栏区块)。

这在很多场景下都非常实用,例如:您在栏中添加了一些文本,需要选中多栏区块;或者在按钮区块中包含多个按钮时,您需要选中整个“按钮”区块容器。

移动区块

您可以使用多种方法来移动已选中的区块。

使用工具栏移动区块

要移动区块,请先选中它,区块的上方或下方会出现工具栏。然后,您可以点击向上或向下箭头,将区块向上或向下移动一个位置。

您也可以使用工具栏中的六点图标,将区块拖动到其他位置。

以下动画演示了这两种方法:

一张动图,演示如何点击并按住拖动图标(由两列共 6 个圆点组成的图标),然后通过该手柄将区块向上拖动。
移动区块

使用列表视图移动区块

或者,您可以使用列表视图查看页面上区块的完整列表,然后点击并拖动区块到新位置:

一张动图,展示在列表视图中通过点击并拖动区块将其移动到新位置的操作。
要访问列表视图,请点击屏幕左上角的图标,它看起来像三条叠在一起的横线。

使用拖放方式移动区块

您可以使用鼠标将区块拖放到所需的位置:

移动嵌套区块

嵌套区块位于布局区块(比如堆栈)中。您可以点击区块工具栏中的箭头来移动这些区块:

动图,展示如何选中并移动一个嵌套区块。
移动嵌套区块

一次移动多个区块

使用工具栏移动区块

您可以先用鼠标将这些区块全部选中,然后点击工具栏中的箭头,一次移动多个区块,如下所示:

一张动图,演示选中两个区块后,通过点击弹出工具栏中的箭头图标将它们一起移动的过程。

使用列表视图移动区块

您可以使用列表视图一次选中多个区块,然后将它们拖放到新位置:

  1. 点击编辑器左上角的三条横线图标,打开列表视图
  2. 点击第一个区块。
  3. 按住键盘上的 Shift 键,然后点击最后一个区块。这样就会选中第一个和最后一个区块之间的所有区块。
  4. 将选中的区块拖放到目标位置。
动画,展示在列表视图中移动多个区块的操作。

💡

列表视图中,您可以使用键盘快捷键 CTRL + A(PC)或 CMD + A(Mac)来选中所有区块。

并排移动区块

如果您想让区块彼此并排显示,而不是上下排列,请先插入多栏区块。然后,您就可以在每一栏中插入任意区块。

如果您想将现有内容放入多栏中,请先插入多栏区块,然后使用列表视图将区块拖放到相应的栏中。

使用 WordPress 智能体重新排列区块

The WordPress Agent four-pointed star icon.

本部分适用于使用 AI 网站构建器创建的站点(所有付费套餐)或已启用 WordPress 智能体的站点(所有付费套餐)。点击屏幕底部的 AI 图标(四角星形)即可打开 WordPress 智能体。

WordPress 智能体可以帮助您查看并优化页面内容的结构和流程。以下是一些示例提示词,您可以直接复制使用:

  • “查看此页面,并建议各个部分更合适的排列顺序。”
  • “这篇文章的结构适合写成操作指南吗?”
  • “作品集首页应该先展示哪些内容?”
  • “建议如何重新组织这些区块,以提高可读性。”

使用 WordPress 智能体重新排列区块

The WordPress Agent four-pointed star icon.

您可以使用 Claude、Cursor、ChatGPT、OpenClaw 等外部 AI 智能体来安全地读取和编辑您的网站。为外部 AI 智能体启用 MCP 工具访问

WordPress 智能体可以根据自然语言提示,在您的页面和文章中重新排列区块顺序。以下是一些可供尝试的提示词:

  • “重新排列我的“服务”页面中的各个部分,将定价部分放在最后。”
  • “将特色图片区块移动到我最新文章的顶部。”
  • “交换我的“关于”页面中第一段和第二段的位置。”
  • “将联系按钮区块移动到我首页主视觉区域的正下方。”
Copied to clipboard!