跳至正文
帮助
编辑器版块与区块

如何使用组区块把内容并排或分列放置?

组区块的工作方式:把区块并排或堆叠放置,嵌套组,方向,移动端垂直堆叠,位置和对齐,间隔,宽度(填充、适应或自定义),间距,配色方案,边框,圆角半径,背景叠加和内边距。

阅读时间 3 分钟

组是一个可以容纳并排列其他区块的盒子。用它可以把内容并排放置、构建多列,或让版块的某一部分拥有自己的背景和边框。

在哪里可以使用组

许多版块都支持组区块:页脚、邮件订阅、主视觉、幻灯片展示的幻灯片、常见问题、前后对比、评论、联系我们、404、订单确认、折叠项,以及精选产品和分类等产品列表的文字区域。每个版块决定其组中可以放哪些区块,以及可以有多少个组。

要在建站工具中添加组,请选择版块,点击添加新区块,然后选择组。接着把其他区块拖进去。有些版块(页脚、邮件订阅、评论)还允许在组中再放组。

布局

  • 宽度:填充占用剩余空间,并与旁边其他填充组平均分配。适应只与内容一样宽。自定义以百分比设置自定义宽度。
  • 方向:垂直把区块堆叠起来,水平把它们并排放置。空间不够时,并排的区块会换到新的一行。
  • 移动端垂直堆叠(仅水平):在手机上,区块改为堆叠显示。
  • 位置:在上下方向放置区块(顶部、居中、底部)。
  • 对齐:在左右方向放置区块(左、居中、右)。
  • 间隔:让区块分散开,彼此之间的间距相等。它出现在区块排列的方向上:垂直组在位置中,水平组在对齐中。

外观

  • 使用父级配色方案:默认开启,组使用版块的颜色。关闭后选择一个配色方案,可以让组拥有自己的背景和文字颜色。
  • 边框:无或实心。实心会增加边框粗细(1 到 20 像素)和边框透明度。颜色是配色方案的边框颜色。
  • 圆角半径:让角变圆,0 到 100 像素。
  • 背景叠加:在背景上方添加一个颜色层。设置叠加颜色和叠加样式:实心,或逐渐变为透明的渐变,渐变方向可以是向上或向下。这有助于让主视觉图片上的文字更易阅读。

间距

间距是组内区块之间的空白(0 到 100 像素)。内边距是组边缘与其区块之间每一边的空白。

示例

  • 主视觉中两个并排的按钮:把两个按钮都放进一个水平组,并设置较小的间距。
  • 三列页脚:一个水平组,内部放三个填充项目,并开启移动端垂直堆叠。
  • 卡片:一个垂直组,使用自己的配色方案、实心边框、圆角半径和内边距。
  • 文字在左,按钮在右:一个水平组,把对齐设为间隔。

小贴士

  • 某一列比您想要的更宽:两个填充组会平均分配空间。把其中一个设为自定义,并给它一个百分比。
  • 组没有显示:没有区块或只有隐藏区块的组不会在店铺中显示。
  • 区块列表中没有组:该版块不支持组,或已达到组的数量上限。
  • 文本、按钮和分隔线的设置请参阅组、文本、按钮和分隔线区块:布局组件设置如何运作?。

仍需帮助?

给我们留言,我们会回复你。

联系我们