容器、列与小部件：Elementor 三层结构（完整图文步骤）

一、先搞懂三层结构

Elementor 的所有页面，不管多复杂，拆到最后都是同一个套娃结构 🎯：容器（Container）→ 列（Column / 子容器）→ 小部件（Widget）。

层级	是什么	类比	负责什么
容器	页面中最大的布局单位，一个横向「区域」	房间	背景、整体间距、布局方向
列	容器内部的纵向分区	房间里的隔断	宽度比例、对齐
小部件	真正承载内容的最小元素	家具	文字、图片、按钮本身

举例：首页的 Banner 区是一个容器；里面左边放标题右边放图，就是两列；标题、图片各自是一个小部件。

💡 术语说明：Elementor 3.6 之前最外层叫「区块（Section）」、内部叫「列（Column）」；3.6 引入 Flexbox 容器后，官方统一改用「容器（Container）」。现在的新版本默认就是容器体系，老的 Section 只是兼容保留。本教程统一使用「容器」叫法，老教程里看到的 Section 理解成同一个东西即可。

---

二、添加容器：布局的起点

🏗️ 2.1 从画布添加

1. 打开一个页面进入 Elementor 编辑器。
2. 点击画布中间的 「+」号。
3. 弹出结构选择面板，选你需要的栏数结构：单栏、两栏（50/50）、三栏（33/33/33）、或不对称的（比如 25/75）。
4. 选好后页面出现一个虚线框，这就是容器。

💡 另一条路径：也可以从左侧面板把「容器（Container）」部件直接拖进画布，再按提示选择 Flexbox（弹性）或 Grid（网格）结构，效果一样。

🔍 2.2 认识容器的三个标签页

点中容器（鼠标悬停后点顶部的容器把手图标），左侧面板出现三组设置：

• 布局（Layout）：内容宽度（Boxed 盒装 / Full Width 全宽）、最小高度、方向（横向/纵向）、对齐、子元素间距（Gap）。
• 样式（Style）：背景（纯色/渐变/图片/视频）、背景覆盖、边框、形状分隔器（Shape Divider）。
• 高级（Advanced）：内外边距、动效、响应式隐藏、自定义 CSS。

💡 Boxed 和 Full Width 的区别：Boxed 模式下内容居中在一个固定宽度里（默认 1140px，可在站点设置里改），两边留白；Full Width 则铺满整个屏幕宽。Banner 图常用 Full Width，正文区常用 Boxed。

📐 2.3 常用容器设置速查

设置项	在哪	常用值
内容宽度	布局 → Content Width	Boxed 1140px
最小高度	布局 → Min Height	Banner 常用 400–600px，或 100VH 满屏
方向	布局 → Direction	横向（→）做并排，纵向（↓）做堆叠
垂直居中	布局 → Align Items	Center（配合最小高度做 Banner）
内边距	高级 → Padding	上下 60–100px 制造呼吸感
背景	样式 → Background	纯色/渐变/图片

---

三、列：把容器切成几份

✂️ 3.1 两种建列方式

1. 添加容器时直接选多栏结构（推荐）：选 50/50 就是两列，选 33/33/33 就是三列。
2. 容器里再嵌套容器：在容器内部再拖入一个容器，实现更复杂的分区。新版 Elementor 用「嵌套容器」替代了老版本的「内部区块（Inner Section）」。

↔️ 3.2 调整列宽比例

• 鼠标悬停在两列之间的边界上，出现竖线后直接拖动，实时改比例。
• 或者点中某一列，在布局面板里把宽度（Width）改成具体百分比，比如 70% / 30%。

💡 经典的「内容 + 侧边栏」布局就是 70/30；「图文介绍」常用 50/50；三列服务卡片就是 33/33/33。

📱 3.3 列在手机上会自动堆叠

桌面端的三列布局，切到手机视图会自动变成纵向单列堆叠，不用手动改。但堆叠的顺序可能需要调（比如想让图片在文字上方），可通过子元素的排序（Order）设置调整。

---

四、小部件：内容的载体

🧩 4.1 添加小部件

1. 从左侧面板找到需要的小部件。
2. 按住拖进目标列中，看到蓝色指示线后松手。
3. 点中它，左侧面板切换到这个小部件的设置。

⚙️ 4.2 每个小部件的三板斧

所有小部件的设置都遵循同样的结构：

• 内容（Content）：这个小部件「是什么」——标题的文字、图片的图、按钮的链接。
• 样式（Style）：它「长什么样」——颜色、字号、间距、边框。
• 高级（Advanced）：它的「布局和特效」——外边距/内边距、动效、响应式可见性。

📦 4.3 免费版最常用的 10 个小部件

小部件	用途
标题 Heading	各级标题文字
文本编辑器 Text Editor	正文段落
图片 Image	单图
按钮 Button	链接按钮、CTA
图标 Icon	单个矢量图标
图标列表 Icon List	带图标的清单（联系方式、卖点列表）
图像框 Image Box	上图下文的服务卡片
视频 Video	嵌入 YouTube/自托管视频
分隔线 Divider	视觉分隔
间隔 Spacer	纯占位撑开距离

🖱️ 4.4 小部件的快捷操作

右键任何小部件，有几个高频操作：

• 复制（Duplicate）：就地克隆一个一样的，改内容即可。
• 拷贝 / 粘贴（Copy / Paste）：跨列、跨容器甚至跨页面搬运。
• 粘贴样式（Paste Style）：只搬样式不搬内容，统一卡片风格的神器。
• 另存为模板：存进模板库复用。
• 导航器定位：页面复杂时从导航器树里选中它。

---

五、实战：搭一个三列服务区

把三层结构用起来，做一个标准的「三列服务卡片」区块 🎯。

🏗️ 5.1 搭骨架

1. 点「+」添加容器，选 33/33/33 三栏结构。
2. 选中容器：布局 → 内容宽度 Boxed；高级 → Padding 上下各 80px。
3. 容器样式 → 背景：浅灰色。

🧩 5.2 填第一列

1. 拖一个 图标（Icon） 到第一列，选一个图标，样式里把颜色设为品牌色、大小 50px。
2. 拖一个 标题（Heading） 到图标下方，文字改为 网站设计，HTML 标签选 H3。
3. 拖一个 文本编辑器 到标题下方，写两行服务介绍。

📋 5.3 复制出另外两列

1. 右键图标小部件 → 拷贝（Copy），在第二列空白处右键 → 粘贴（Paste）；标题、文本同样操作。
2. 更快的方式：直接右键第一列的列容器 → 复制 → 把新列拖到第二列位置，整列连内容一起克隆。
3. 修改第二、三列的图标、标题和文字。

✅ 5.4 检查

• 桌面视图：三列等宽并排，间距均匀。
• 手机视图：自动堆叠为单列，顺序是图标→标题→文本逐列排列。
• 发布或保存草稿。

到这里，「容器 → 列 → 小部件」的完整套路你就跑通了。后面所有页面都是这个结构的排列组合。

---

六、常见问题排查

⛔ 6.1 拖不进去，蓝色指示线不出现

• 确认你拖到的位置是容器内部，不是容器与容器之间的缝隙。
• 页面嵌套太深时目标区域很小，打开导航器（Navigator），把小部件拖到导航器树里对应容器节点上，更精准。

⛔ 6.2 选不中想改的那个元素

画布上元素互相重叠时点不中很正常。两个办法：

1. 右键任意元素，在右键菜单里会列出该位置的所有层级，逐层选。
2. 打开导航器，从结构树里直接点选。

⛔ 6.3 列宽拖不动 / 改了没反应

• 检查列所在容器的「方向」：纵向（↓）容器里的子元素宽度百分比不生效，先把方向改成横向。
• 确认改的是子容器的宽度（Width）而不是小部件的宽度。

⛔ 6.4 小部件之间间距忽大忽小

• 间距有三个来源：容器的 Gap、小部件的外边距（Margin）、主题自带样式。优先用容器的 Gap 统一控制，少在小部件上单独设 Margin，否则改起来要逐个点。
• 主题样式干扰时，检查站点设置里是否禁用了主题默认间距。

⛔ 6.5 想要四列、五列，结构选择里没有

结构面板只给了常见组合。做法：先选三栏，然后右键某一列 → 复制，拖到尾部即可；或者选单栏容器，方向设横向，手动把几个子容器宽度各设为 25% / 20%。