添加、移动和调整区块大小

通过拖动或点击向页面添加区块,再在 12 列网格上移动、调整大小、复制和删除区块。

区块是页面的组成部件:标题、文字、按钮、图片、商品网格等等。您从“区块”面板中添加区块,把它放到想要的位置,再拖动边缘来调整大小。

区块是如何排版的

页面的每个板块都是一个 12 列的网格。一个区块会占据这个网格中的一列或多列、一行或多行。放下或调整区块时,它会自动对齐网格,因此内容排列整齐,页面在手机上也能干净利落地重新排列。您不需要按精确的像素来摆放区块。

区块位于板块之中。页面至少要有一个板块,才能添加区块。

添加区块

添加区块有两种方式。

把它拖到页面上

  1. 在左侧的“区块”面板中找到想要的区块。分组有基础、媒体、布局、店铺、营销和菜单与表单。
  2. 按住区块,把它拖到页面上。
  3. 把指针移到某个板块上方。板块中会出现浅色的列,并有一个蓝色方框,准确显示区块将落在哪里以及有多大。
    一个文字区块正从“区块”面板拖入空板块,画面上有 12 个网格列,以及显示落点位置的蓝色方框
  4. 松开鼠标按钮。区块会出现在方框中并处于选中状态,它的设置会在右侧打开。
注意:请把区块放在空白处。如果放到已被其他区块占用的位置,两个区块会叠在一起。按 Ctrl + Z 撤销,或者把新区块拖到别处。

点击添加

点击“区块”面板中的某个区块,它会被添加到您选中的板块的底部。如果没有选中任何内容,它会进入页面上的最后一个板块。这是从上到下搭建页面最快的方式。

选中区块

点击页面上的区块。它会出现蓝色轮廓、两个蓝色的调整手柄,旁边还有一个小工具栏,上面有三个按钮:复制、旋转和删除。右侧的设置面板会切换为该区块的设置。

一个被选中的文字区块,带有蓝色轮廓,右边缘和下边缘各有一个调整手柄,旁边的工具栏有“复制”“旋转”和“删除”按钮

移动区块

  1. 按住区块并拖动。区块的一个小副本会跟随您的指针。
  2. 看蓝色方框,了解它将落在哪里。
  3. 松开鼠标按钮。

您可以把区块拖到另一个板块,或拖进容器或网格。只有在桌面视图下才能把区块移到其他板块,因为这会改变该区块在所有屏幕尺寸下的位置。

调整区块大小

  1. 点击区块将其选中。
  2. 拖动右边缘的手柄,可以改变它占几列宽;拖动下边缘的手柄,可以改变它占几行高。
    通过拖动右边缘来加宽的文字区块,背后显示着网格列
  3. 松开鼠标按钮。

用数字设置大小和位置

如果需要精确控制,可以用设置面板代替拖动。

  1. 选中区块。
  2. 在设置面板中,点击尺寸与位置将其展开。
  3. 用减号和加号按钮调整起始列、占几列、起始行和占几行。
    “尺寸与位置”设置,包含起始列、占几列、起始行、占几行、“占满整行宽度”按钮、两个开关以及“精细调整”滑块

同一个分组里还有这些额外选项:

  • 占满整行宽度会让区块横跨其所在容器的所有列。
  • 隐藏这个区块会隐藏区块。在平板和手机视图中,这个开关只会在对应的屏幕尺寸下隐藏它。请参阅让站点在手机和平板上显示效果良好。
  • 所有屏幕保持一致会让区块在桌面、平板和手机上使用同一种布局。
  • 精细调整包含旋转角度、水平微调和垂直微调滑块。它们只在视觉上倾斜或平移区块,不改变区块在网格中的位置,因此周围的内容不会移动。滑块旁边的小号 x 可以把它重置为零。您也可以拖动区块工具栏中的旋转按钮,围绕区块转动来旋转它。它会自动吸附到水平位置,按住 Shift 则每次吸附 15 度。
提示:您还可以用键盘移动选中的区块。Ctrl + 方向键会把它移动一个网格单元,Ctrl + Shift + 方向键会让它加宽或加高一个单元。所有快捷键请参阅编辑器一览。

复制或删除区块

  • 要复制,请选中区块,点击其工具栏中的复制,或按 Ctrl + D。副本会出现在原区块的正下方。
  • 要删除,请选中区块,点击其工具栏中的删除,或按 Delete。您也可以在设置面板中展开管理,在那里点击复制或删除。

删除区块时不会要求您确认。如果误删了,请点击顶部栏中的撤销。

相关文章

Last updated 2026-10-03