用 Box 构建落地页结构

Box 是 LanderLab 中最重要的布局工具之一。 它让你在页面内部更精细地分组、组织和控制元素。

​

什么是 Box

Box 是一个容器，里面可以装其他元素。 可以放进 Box 的内容：

• 文本
• 图片
• 按钮
• 列表
• 其他 Box

👉 可以把它看成一个包裹层，帮你组织内容结构。

​

如何添加 Box

• 打开左侧边栏
• 进入 Layout
• 把 Box 拖到某个 section 或分栏内

​

Box 为什么重要

Box 让你更好地控制元素的排列方式。 常见用途：

• 把相关元素归为一组
• 让元素正确对齐
• 搭建更复杂的布局
• 精调间距和位置

👉 大多数精细布局都要靠 Box 才能做好。

​

Box 的工作方式

结构示例：
Section → Columns → Box → 元素

• Box 位于分栏或 section 内
• 元素放在 Box 内部
• Box 还可以嵌套在其他 Box 里，控制更精细

​

布局控制

选中一个 Box 后，你可以控制：

• Direction：横排或竖排
• Alignment：元素对齐方式（左、中、右）
• Distribution：元素在空间中的分布
• Gap：元素之间的间距

大部分布局调整都在这里完成。

​

样式选项

Box 还支持：

• 背景（纯色或渐变）
• 间距（padding 与 margin）
• 边框和圆角
• 阴影
• 宽度和高度