概述
三个可复用的布局组件几乎出现在构建器的每个版块中:组、文字和分割线。理解它们可让您无需编写 CSS 即可构建所需的任何布局。
组
组是一个灵活的布局容器。在其中添加子区块(文字、按钮、图片、订阅输入框,甚至嵌套组),并精确控制它们的排列方式。
方向
- 垂直:子元素从上到下堆叠(大多数版块的默认设置)。
- 水平:子元素并排排列成一行。
启用在移动端堆叠可让水平组在小屏幕上自动切换为垂直堆叠。
对齐与位置
这两个设置控制子元素如何沿主轴和交叉轴分布,其含义会根据组的方向而变化:
- 垂直方向:位置控制垂直分布(顶部、中间、底部或两端对齐);对齐控制水平位置(左、中、右或两端对齐)。
- 水平方向:对齐控制水平分布(左、中、右或两端对齐);位置控制垂直位置(顶部、中间、底部或两端对齐)。
两端对齐会将子元素均匀分布,间距相等,适用于将项目拉伸至全宽行。
间距
子元素之间的像素间距(0 至 100 像素,默认 20 像素)。
宽度
- 填充:扩展以占用父容器中所有可用空间,适用于应在水平父容器中平均共享空间的组。
- 适应:收缩至内容的自然尺寸,适用于宽度应与内容相同的组。
- 自定义:设置特定百分比(0 至 100%),组将保持该尺寸,不增不减。
色彩方案与继承
默认情况下,组继承其父版块的色彩方案。关闭继承方案可从全局颜色设置中指定显式色彩方案(1 至 9)。这让您无需添加新版块,即可在版块内创建不同的背景或文字颜色区域。
边框
在组周围添加边框。选项:无或实线。选择实线后,设置边框粗细(1 至 20 像素);颜色来自当前方案的边框颜色。
圆角
以像素为单位的圆角大小(0 至 100),可用于创建卡片式的组容器。
不透明度
组的整体不透明度(0 至 100%,默认 100%)。
叠加层
在组内添加彩色图层。启用后,设置叠加层颜色(使用颜色选择器的透明度滑块可设置透明度)、样式(纯色平铺或渐变至透明),以及渐变的方向(向上或向下)。常用于在主视觉版块的媒体背景上创建半透明着色图层。
内边距
每侧的像素间距(顶部、左侧、右侧和底部),各为 0 至 100 像素。内边距在组边框内侧应用,在边框与子元素之间创造呼吸空间。
文字
文字区块在版块或组内呈现富文本内容(标题、段落和格式化文字)。编辑器支持加粗、斜体、下划线、删除线和彩色文字。
预设
排版预设控制字体大小、字重及文字的语义角色。可用预设:
- 默认:继承版块的基础文字样式。
- 段落:正文文字样式。
- 标题 1至标题 6:尺寸从大到小递减,使用您排版设置中定义的标题字体。
大小
以像素为单位的自定义字体大小(10 至 30 像素),会覆盖预设的大小。留为默认值则由预设决定大小。
宽度
- 适应:文字区块仅与内容一样宽。
- 填充:文字区块扩展至容器可用宽度的 100%。
对齐
水平文字对齐:左对齐、居中或右对齐。
行高
控制垂直节奏:紧凑(行距紧凑)、正常(默认)或宽松(行距宽松)。
字间距
控制字符间距:紧凑(字符更紧密)、正常(默认)或宽松(字符更分散)。
色彩方案与继承
默认情况下,文字区块从父版块继承颜色。关闭继承方案可使用特定的色彩方案。标题预设使用方案的标题颜色;段落和默认预设使用方案的正文文字颜色。
内边距
每侧的像素内间距(顶部、左侧、右侧和底部),各为 0 至 100 像素。
分割线
视觉分隔线。在垂直布局中显示为水平线,在水平组内显示为垂直线。分割线会自动适应其父容器的方向。
粗细
线条粗细,以像素为单位(1 至 10 像素,默认 1 像素)。
长度
线条相对于其容器的跨度,以百分比表示(5 至 100%,默认 100%)。将其设置为低于 100%,并结合对齐方式,可创建居中或内缩的装饰性线条。
端盖样式
- 直角:矩形端点。
- 圆角:胶囊形端点。
对齐
当长度小于 100% 时,线条的位置:起始、居中(默认)或末尾。
宽度
- 适应:分割线容器仅与线条本身一样宽。
- 填充:分割线容器扩展以填充父容器中的可用空间。
色彩方案
可选设置色彩方案(1 至 9),分割线使用所选方案的边框颜色。如果未设置方案,则继承父版块或组的颜色。
内边距
每侧的像素间距。当分割线用作顶级版块时,内边距值可达 200 像素,提供更宽裕的垂直呼吸空间。
常见注意事项
- 水平父容器中的两个填充组:每个将占用可用空间的 50%,这通常是您想要的效果。如果您需要一侧比另一侧更宽,请对其中一个使用自定义宽度。
- 垂直分割线不显示:分割线只有在作为设置为水平方向的组的直接子元素时才会变为垂直线。请确保父组的方向已设置为水平。
- 文字显示意外颜色:如果文字区块颜色不对,很可能是从具有不同色彩方案的父组继承了颜色。关闭文字区块上的继承方案并显式指定正确的方案。