组是一个可以容纳并排列其他区块的盒子。用它可以把内容并排放置、构建多列,或让版块的某一部分拥有自己的背景和边框。
在哪里可以使用组
许多版块都支持组区块:页脚、邮件订阅、主视觉、幻灯片展示的幻灯片、常见问题、前后对比、评论、联系我们、404、订单确认、折叠项,以及精选产品和分类等产品列表的文字区域。每个版块决定其组中可以放哪些区块,以及可以有多少个组。
要在建站工具中添加组,请选择版块,点击添加新区块,然后选择组。接着把其他区块拖进去。有些版块(页脚、邮件订阅、评论)还允许在组中再放组。
布局
- 宽度:填充占用剩余空间,并与旁边其他填充组平均分配。适应只与内容一样宽。自定义以百分比设置自定义宽度。
- 方向:垂直把区块堆叠起来,水平把它们并排放置。空间不够时,并排的区块会换到新的一行。
- 移动端垂直堆叠(仅水平):在手机上,区块改为堆叠显示。
- 位置:在上下方向放置区块(顶部、居中、底部)。
- 对齐:在左右方向放置区块(左、居中、右)。
- 间隔:让区块分散开,彼此之间的间距相等。它出现在区块排列的方向上:垂直组在位置中,水平组在对齐中。
外观
- 使用父级配色方案:默认开启,组使用版块的颜色。关闭后选择一个配色方案,可以让组拥有自己的背景和文字颜色。
- 边框:无或实心。实心会增加边框粗细(1 到 20 像素)和边框透明度。颜色是配色方案的边框颜色。
- 圆角半径:让角变圆,0 到 100 像素。
- 背景叠加:在背景上方添加一个颜色层。设置叠加颜色和叠加样式:实心,或逐渐变为透明的渐变,渐变方向可以是向上或向下。这有助于让主视觉图片上的文字更易阅读。
间距
间距是组内区块之间的空白(0 到 100 像素)。内边距是组边缘与其区块之间每一边的空白。
示例
- 主视觉中两个并排的按钮:把两个按钮都放进一个水平组,并设置较小的间距。
- 三列页脚:一个水平组,内部放三个填充项目,并开启移动端垂直堆叠。
- 卡片:一个垂直组,使用自己的配色方案、实心边框、圆角半径和内边距。
- 文字在左,按钮在右:一个水平组,把对齐设为间隔。
小贴士
- 某一列比您想要的更宽:两个填充组会平均分配空间。把其中一个设为自定义,并给它一个百分比。
- 组没有显示:没有区块或只有隐藏区块的组不会在店铺中显示。
- 区块列表中没有组:该版块不支持组,或已达到组的数量上限。
- 文本、按钮和分隔线的设置请参阅组、文本、按钮和分隔线区块:布局组件设置如何运作?。